CSS en HTML (8)
CSS en HTML (8)

CSS en HTML (8)

De vorige keer hadden we met de gekozen oplossing onze kopfoto vernaggelt. Geen idee waar de laatste woord vandaan komt, maar het klinkt zo leuk. Die kopfoto moet weer terug, want het beperken van het plaatje geld alleen voor de content, trouwens dat voor die paragraaf ook. dus vertellen we dat in de CSS. Ofwel bij het plaatje in de container content hoort deze afmeting. In CSS:
p#content {max-width: 400px;color: red}
img#content {max-width: 400px}
Voor de plaatjes en paragrafen in de content wordt het dan:
<p id="content"></p>
<img id="content" src="plaatje"/>
het resultaat is wat we verwachten, de kopfoto is weer in de originele staan en de plaatjes en tekst in de content zijn weer beperkt. De tekst hebben we in hetzelfde ID de kleur rood (red) gegeven. Een korte uitleg vandaag, maar dat halen we wel in. Uiteindelijk hoeft u het niet uit te voeren, maar het te begrijpen. Zodat u weet als u straks eens ergens iets in uw eigen CSS wil veranderen, u daar niet echt vreemd tegenover staat. En vragen staat vrij toch. De (inline) CSS en het voorbeeld vindt u hier op de site.



12 Comments

  1. Voorlopig speel ik toch nog maar even op safe door geen wijzigingen aan te brengen. Dat heb ik een tijd geleden als eens gedaan, en dat is me toen niet echt goed bevallen. Uiteindelijk heb ik de zaak weer redelijk kunnen herstellen, maar volgens mij staat er nog steeds het e.e.a. door elkaar …

  2. als je een nagel (= een spijker) krom slaat, dan is ie ……… juist.

    nog ff over deze: img#content {max-width: 400px}
    als je de 400 vervangt voor 100% (het mag ook 99% vanwege IE6) wordt ie nooit breder dan de container waar het plaatje inzit.
    container?? dat is de ‘ouder’ van de tag, bijvoorbeeld ‘wrap’ of gewoon ‘container’
    ouders en kinderen?? die horen bij elkaar. de kinderen erven eigenschappen van de ouder.
    dus als de ouder 500px breed is met links en rechts een marge van 5px en de img tag is max-width 99% pas ie altijd.
    nou ja, in theorie dan he 😉

Laat een reactie achter bij FrankReactie annuleren

Deze site gebruikt Akismet om spam te verminderen. Meer informatie over hoe uw reactiegegevens worden verwerkt.