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. Pfff wel handig maar klinkt ingewikkeld.
    Heb begrepen dat we slecht weer krijgen het weekend, kan ik lekker aan de slag met je tips.

  2. Ik ben blij met alles wat ik nu al weet en snap:-)

  3. 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 …

  4. ja mooi woord is dat…de kopfoto vind ik erg knap..het ontwerp, trouwens alles eigenlijk wel,denk verder niet dat ik het echt begrijp

  5. Vernachelen is het. Het is inderdaad een mooi woord.

  6. @ Hanny, ik deel je onwetenheid in deze… maar ja, ieder zijn kennisgebied.

  7. Hier zullen sommig weer blij mee zijn

  8. 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 😉

  9. Thanks weer voor de tip! We worden hier met de dag wijzer op CSS gebied!

  10. He he, die p#content tag (als voorbeeld) is net iets waar ik mee aan het puzzelen was. Maar dit gaat lukken vermoed ik. Bedankt weer. Zo kom ik er wel.

  11. Geheimtaal voor mij. Wie weet leer ik het nog wel eens. Tot die tijd vraag ik het aan mijn deskundige op dit terrein. 😉

  12. Ik ben allang blij dat er een voorbeeld css bij zat. Hoef ik het tenminste niet allemaal zelluf uit te zoeken. 😀 Scheelt een hoop. 😉

Geef een reactie