Hoi Luuk,
Kun je me aangeven hoe je het ongeveer hebt gedaan?
Jawel!
- Ik heb een serie css-opdrachten toegevoegd, die staan vanaf /* ===== nieuw ===== */ in regelnr.103 t/m regelnr.134. Loslaten hiervan op de oude html-code helpt niet, want:
- Als je nog even doorscrollt, zie je dat ik de hele structuur van de html-code van de <div id="mainContent"> drastisch heb omgebouwd (regel 195 t/m einde </div> in regel 221). Hier staan de elementen in, waarvan de styles met de css erboven zijn gedefinieerd.
De oorspronkelijke opbouw van een item was:
HTML:
<p class="style8"><a href="http://viewonnature.wordpress.com/"><img
class="linkimage" src="images/Wordpress.jpg" width="214" height="45"
alt="View on Nature" /></a></p>
<p class="linktekst"><span class="style15">View on Nature</span> is mijn
(Engelstalige) Weblog. Hier geef ik toelichtingen over mijn foto's
en over vind je ook de laatste Nikon nieuwtjes.</p>
D.w.z. alle regels als alinea's koud achter elkaar. Het volgende item heeft weer twee <p>'s, enz.
De nieuwe opbouw per item is geworden:
HTML:
<li><a href="http://viewonnature.wordpress.com/"><img
src="images/Wordpress.jpg" alt="View on Nature" width="214" height="45"></a>
<p>Mijn (Engelstalige) Weblog. Hier geef ik toelichtingen over mijn foto's
en over vind je ook de laatste Nikon nieuwtjes.</p>
</li>
Dit is niet alleen korter, maar nu zijn ook steeds de img-link en de bijbehorende verklarende tekst samen opgenomen in één omvattend (list-)element <li>. Dat geldt ook voor de andere: het zijn nu ook in de html bij elkaar horende "blokjes" geworden die steeds hetzelfde zijn. Dat is niet alleen "semantisch beter" (hoi, zeggen de puristen onder ons), het heeft ook praktische voordelen bij het css-gebruik. Je kunt met minder id's en classes toe, en veranderen of aanvullen (zowel van de css als van de html) is veel makkelijker geworden.
Wat is er nu precies gebeurd?
We kijken eerst even naar wat het moet worden:
Eigenlijk moeten het twee kolommetjes worden, maar dat verschijnsel kent css (nog) niet. Wat wel kan, is: het img telkens laten "drijven" aan de linkerkant
{ float: left; }.
Daarmee wordt het img (met de link-tag <a> ... </a> eromheen) uit de zg. "normal flow" gehaald, en wordt datgene wat wel in de "normal flow" zit, eromheen gedrapeerd. Als je dat zonder meer zou doen, zou hier de tekst onder de afbeelding doorlopen, want dat is de eerste beschikbare ruimte:
Om daar van af te komen, kunnen de alinea's <p> een margin (kantlijn-afstand) aan de linkerkant krijgen:
{ margin-left: 260px; }. De afstand van 260px is gekozen op grond van de meest brede afbeelding in de serie (FanchiPhotography) + nog wat vrij ruimte voor het mooi. Dan zijn alle toelichtingen onder elkaar op dezelfde plaats te zien. Het prettige is, dat nu de eerste 3 regels (naast het img) niet ook nog eens op 260px rechts van het plaatje beginnen: het plaatje zit niet in de "normal flow", de <p> ziet 'm dan niet, en doet net alsof de rekenafstand voor de 260px links van het plaatje begint. CSS heeft soms een wat eigenaardige manier van denken! Als je dit soort dingen eenmaal weet en ze vaak genoeg bent tegengekomen (bij mij doorgaans via het schade-en-schande model), dan begint het op den duur te wennen.
Als bijverschijnsel: elke <li> heeft bovenin een border van 1px hoog gekregen (het grijze lijntje). Het lijntje eronder is dus het bovenlijntje van de volgende > en het allerlaatste item heeft dan ook geen onderlijntje.
Andere bijzaak, maar goed voor het oog: via de css-regel
a img { border: 0; } vertellen we dat images die links zijn, niet zo'n 2 pixel brede blauwe rand moeten krijgen.
Voor de hoofdlijnen zijn er nu nog twee dingen nodig.
De verpakking: een lijstje kan een "unordered list" <ul>...</ul> zijn (een ongeordende lijst met alleen stipjes) of een "ordered list" <ol>...</ol> (een geordende lijst, d.w.z. met nummertjes 1,2,3 enz.). We kiezen voor een <ul>, en in de css halen we de bullet van elk item weg met
ul { list-style: none; }.
Verder moet er nog iets verzonnen worden voor hele korte toelichtingen. Bij bv. maar één regel zou er dit gebeuren:
Wat is hier nu weer aan de hand? :shocked:
Niet alleen gaat de Flickr-afbeelding nu dwars door het lijntje van het volgende item, de ViewOnNature-afbeelding "kan er niet langs" en stoot met de neus van zijn linkerbovenhoek zo'n beetje tegen de rechterzijkant van de Flickr-afbeelding; en sleurt op zijn beurt de tekst mee naar rechts (tot het plaatje op is, en de tekst eronder komt (wel keurig op de 260px van links af). Hoezo?
Alweer komt dit door het floaten van de afbeeldingen en het daarom los staan van de "normal flow". Dan begint het volgende item op de plek die wel door de "normal flow" wordt voorgeschreven (ons oog zegt: te hoog!), en doordat de plaatjes een margin-top van 15px hebben (om in het normale geval op gelijke hoogte van de tekst te komen), kunnnen ze niet onder de vorige langs.
De truc is hier om een
li { overflow: auto; } toe te voegen.
nu weet ik niet welke tag/class de images en text moeten krijgen
Ha, géén!
Als je telkens voor een item de nieuwe opbouw in <li>'s gebruikt, hoef je alleen maar een <li>...</li> in code-view te kopieren, en dan na het inplakken de link-gegevens (het link-doel, het img en de hoogte en breedte daarvan) + de bijbehorende tekst te veranderen. Of als 'm als "lege li" in te vullen:
HTML:
<li><a href="http://gelinktesite.nl/mapjeindiesite/paginavandoel.htm"><img
src="images/logo.png" alt="..." width="..." height="..."></a>
<p>Hier ... de toelichtende tekst.</p>
</li>
Voor elke volgende doe je hetzelfde: klaar!
- Dat is het voordeel van css: je kunt met erg "schone html" werken (zonder allerlei extra id's en classes).
Hier gaat het om de drie elementen <a>, <img> en <p> die binnen een <li> zitten die binnen een <ul> zit, die binnen de <div id="mainContent">...</div> zit.
Dat is onze cascade. Om de style van een <p> in een item te bereiken, hoef je deze geen class of id mee te geven, als je begint met de #mainContent (dat is een id, en daar is er maar één van per pagina; dus daar mag je beginnen) en dan het trappetje van de waterval af gaat, bijvoorbeeld:
Code:
[FONT="Courier New"][SIZE="2"]#mainContent ul li p {
color: #EEEEEE;
}[/SIZE][/FONT]
In het voorbeeld is er maar één soort <p> binnen de #mainContent (alle <p>'s zitten op dezelfde manier in de <li>'s van dezelfde <ul>). In dat geval kunnen we dus alle tussenliggende watervalletjes overslaan, en ook zeggen:
Code:
[FONT="Courier New"][SIZE="2"]#mainContent p {
color: green;
}[/SIZE][/FONT]
Dat wil zeggen: alle <p>'s die binnen de #mainContent zitten. Dus? Dus!
Anders wordt het, als je eronder bv. ook een brokje pure tekst zou willen zetten dat buiten het lijstje valt. Die tekst moet natuurlijk niet op 260px vanaf de linkerkant beginnen, maar gewoon de hele regel vullen. En stel dat die tekst niet groen moet zijn, maar rood. Dan pak je het zo aan:
Code:
[FONT="Courier New"][SIZE="2"]#mainContent p { /* alle p's binnen de #mainContent */
margin: 0;
color: red;
}
#mainContent li p { /* alleen die p's die in een li van de #mainContent zitten */
margin-left: 260px;
color: green;
}[/SIZE][/FONT]
Kortom: het meest specifieke geval krijgt telkens de voorrang.
(ik begin het net te leren
)
Welkom in de wondere wereld van de css!
Groetjes,
CSShunter
[edit]Aha, na de inzending zag ik dat je de img {border:0;} al ontdekt hebt. Ik moet ook niet tussendoor weggaan en een half antwoord thuis laten kamperen op de nog aanblijvenstaande (aanstaanblijvende / aangeblevenstaande?) pc!
[/edit]
[edit]edit2 - O, voor het maken van vette tekst zou ik geen aparte class gebruiken, maar die er in zetten met <strong>...</strong>. Maar alles is beter dan een <b>...</b>![/edit]
. Ik zal border: 0px even erbij gaan zetten.
