[reactie op de fietser; zie edit onderaan!]
Jazeker, dat is het principe. :thumb:
Er zijn in dit geval nog wel een paar bijkomende complicaties, die ook nog gevloerd moeten worden. Maar dat kan!
- In de huidige opzet is telkens de <div> voor het volgende blok opgenomen in de <div> van het vorige blok (ze zijn genest). In de nieuwe opzet moeten de <div>'s volstrekt identiek zijn en los van de andere, dan kan er zo een nieuwe boven gezet worden.
- De blokken hebben om en om een andere background-kleur voor de foto en de tekst. Heel subtiel, Willem! Dat kan ook automatisch geregeld worden: elk blok kan er een extra class bij krijgen (een element mag meer dan één class hebben!), "even" of "oneven", waarmee de inkleuring geregeld wordt. Dan gaat dat ook automatisch:
HTML:
<div class="matblok even">...</div>
<div class="matblok oneven">...</div>
<div class="matblok even">...</div>
enz.
Bij "even" krijgt de container (d.w.z. de kolom van de foto-achtergrond) de ene kleur, en de tekst in de <p> de andere kleur. Bij "oneven" precies omgekeerd: snel geregeld!
Code:
.even, .oneven p {
background: #DCDCDC;
}
.oneven, .even p {
background: #CCCCCC;
}
- De blokken zijn nog niet bestand tegen bezoekers die de lettergrootte groter hebben ingesteld op hun browser; dan kan de tekst uit het blokje lopen. Dit kan opgelost worden door de foto's een {float:left;} te geven, en de tekst een min-height die even hoog is als de foto.
Alle opmaak kan verder strikt gescheiden worden van de html, dat maakt het invoegen van nieuwe blokken ook erg eenvoudig. Als er voldoende aanknopingspunten in de html zitten, kan op deze manier een setje css-regels gemaakt worden die voor alle blokken tegelijk gelden, daar heb je dan geen omkijken meer naar:
Code:
.matblok {
clear: left;
width: 750px;
margin-top: 10px;
margin-left: 20px;
border: 1px solid #808080;
}
.matfoto {
float: left;
padding: 8px;
}
.matblok a img {
width: 165px;
height: 110px;
border: 2px solid white;
vertical-align: top;
}
.matblok p {
min-height: 112px;
margin-left: 185px;
padding: 8px 10px 10px 20px;
color: black;
}
.matblok p a { /* de foto-album links */
padding: 1px 3px;
font-style: italic;
text-decoration: none;
color: #000;
background: #ccccff;
}
.matblok p a:hover,
.matblok p a:focus { /* de foto-album links */
background: white;
color: green;
}
.matblok span { /* de klik-op-foto regel */
font-style: italic;
font-weight: bold;
color: #606060;
}
.even, .oneven p {
background: #DCDCDC;
}
.oneven, .even p {
background: #CCCCCC;
Tegelijkertijd kunnen dan alle apart opgegeven styles voor #matvak, #matvak2, #matvak3, #matvak4, enz. en alle styles voor #tekstmat, #tekstmat1, #tekstmat2, #tekstmat3, #tekstmat4 enz. uit de css verwijderd worden.
Dat ruimt lekker op!
Met de bovenstaande naamgeving kan de html voor een blok worden:
HTML:
<div class="matblok even">
<div class="matfoto">
<a href="imageswink/100_0683.jpg" rel="lightbox[versnip]" title="versnipperaar 380 volt">
<img src="imageswink/100_0683t.jpg" alt="versnipperaar" /></a>
<a href="imageswink/100_0684.jpg" rel="lightbox[versnip]" title="versnipperaar 380 volt"></a>
</div>
<p>* <strong>Versnipperaar</strong><br />
* 380 Volt<br />
<br />* <span>Voor meer foto's klik op de foto / For more photos click on photo</span>
</p>
</div>
<div class="matblok oneven">
<div class="matfoto">
<a href="imageswink/100_0685.jpg" rel="lightbox[iso]" title="isoleer-set, lengte = 1.00 mtr">
<img src="imageswink/100_0687t.jpg" alt="isoleer-set" /></a>
<a href="imageswink/100_0687.jpg" rel="lightbox[iso]" title="diverse diameters"></a>
</div>
<p>* <strong>isoleer-set/ diverse diameters</strong><br />
* Lengte = 1.00 mtr<br />
* met plak strip<br />
* voor het isoleren van verwarmings buizen<br />
* grote hoeveelheid<br / >
<br />* <span>Voor meer foto's klik op de foto / For more photos click on photo</span>
</p>
</div>
enz.!
Voor de blokken die naar een foto-album gaan, is er een iets andere opbouw. Maar die zijn ook steeds hetzelfde.
Is dat wat?
Met vriendelijke groet,
CSShunter
__________
PS. In elk geval op deze pagina kunnen de opgegeven hoogtes van de #hoofdcontainer en de #content gemist worden. Dat scheelt voor de bezoeker lege scroll-ruimte onderaan de pagina.
[Edit]
Hoepla,
dat was een stevige kruispost!!!
[/edit]
