Vraag is dus: wat willen we precies met de <div class="wisselvak">?
Aan de linkerkant moet de kasteel-afbeelding komen, aan de rechterkant moet de hele rest komen, ook als door omstandigheden (langere tekst, of letterformaat-vergroting door de bezoeker) de rechterhelft hoger is dan de afbeelding.
Daarom zetten we wat extra Lorem-tekst in de rechterkant, en de bedoeling wordt dus:
Als dat de bedoeling is, dan gaan we dat gewoon doen!

We laten de styles in het stylesheet
style-random.css nog even bij het oude, en gaan eerst de html-structuur regelen. Daarna kan bezien worden welke stijl-aanpassingen dan nodig zijn.
Binnen het wisselvak is het eigenlijk een eenvoudige 2-koloms opbouw.
- linkerkolom: afbeelding,
- rechterkolom: de rest.
De afbeelding in de linkerkolom kan links gefloat worden (dat staat ie al).
De hele rechterkolom wordt ingepakt in een <div>. Omdat deze div de enige div binnen de wisselvak-div is, hoeft deze div geen class of id te krijgen. Met gewoon
.wisselvak div {...} zijn de styles te regelen.
- Voor het gemak kunnen we de <noscript>-tags voorlopig weglaten, die kunnen er later makkelijk bij als we aan het scripten toe zijn.
HTML:
<div class="wisselvak" id="vak-1">
<a href="http://www.bilderberg.nl/hotels/kasteel-kerckebosch/" target="_blank">
<img src="img/deelnemers/frontad/uitgelicht-kerckebosch.jpg" alt="'t Kerckebosch" border="0" />
</a>
<div>
<h2>Bilderberg Kasteel 't Kerckebosch - Zeist</h2>
<h3>Kleinschalig en Sfeervol</h3>
<p>Het fraaie kasteel in Zeist ligt verscholen in de bossen van de Utrechtse Heuvelrug. Het monumentale pand is
gebouwd in 1904 en is uniek vanwege de door elkaar toegepaste bouwstijlen en interieurs. De moderne hotelkamers
verschillen elk van interieur, maar het persoonlijke hotelkarakter ziet u overal terug. Een vorstelijk onthaal
staat u te wachten.<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.<br />
Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
<p>
<a href="http://www.bilderberg.nl/hotels/kasteel-kerckebosch/" target="_blank"><img src="img/website.gif" alt="" /></a>
</p>
</div>
</div>
Bij de korte tekst gaat het goed, maar bij het eerste item met de langere tekst nog niet. Daar springt de tekst naar links, zodra er ruimte onder de float van de kasteel-afbeelding zit.
=======
Dat wordt opgelost door de rechterkant-<div> een margin-left te geven die wat groter is dan de kasteel-afbeelding. De laatste hoeft nu geen margin-right te krijgen, die is dan al geregeld.
Code:
.wisselvak div {
...
margin: 0 0 0 170px;
}
.wisselvak img {
...
margin: 0 0 10px 0;
}
Met de kolommen gaat het nu in beide gevallen goed. Over blijft alleen nog de website-button, die veel te groot is.
=======
Dat komt omdat voor
alle images in een wisselvak is opgegeven wat het formaat moet zijn (plus nog een aantal eigenschappen, die alleen voor de kasteel-afbeelding moeten gelden):
Code:
.wisselvak img {
width: 170px;
height: 140px;
border: none;
float: left;
margin: 0 0 10px 0;
}
Dat kan je ongedaan maken door voor
.wisselvak div img {...} eigen andere styles op te geven.
Maar handiger is het om deze voorgrond-afbeelding uit de html te schrappen, en er een background-afbeelding voor de betreffende link van te maken: ze zijn toch voor alle items hetzelfde.
HTML:
<div class="wisselvak" id="vak-1">
...
<div>
...
<p>
<a href="http://www.bilderberg.nl/hotels/kasteel-kerckebosch/" target="_blank"></a>
</p>
</div>
</div>
En als css daarbij:
Code:
.wisselvak p a {
width: 80px;
height: 20px;
background: url(img/website.gif);
display: inline-block;
}
Zo is het img tot de goede proporties teruggebracht, maar het staat nog wel pal op de vorige regel en het lijntje eronder.
=======
Wat eenvoudig op te lossen is door de <p>'s in het wisselvak een margin-bottom te geven, en het wisselvak zelf ook een margin-bottom voor geval van een lange tekst:
Code:
.wisselvak div {
margin: 0 0 10px 170px;
}
.wisselvak div p {
margin: 0 0 .5em 0;
}
=======
En nu we het website-img er als background-img in hebben staan, is hier ook mooi een subtiele hover-variant op te maken (in een gecombineerd image), die met css bediend wordt:
Code:
.wisselvak p a:hover,
.wisselvak p a:focus {
background-position: -80px 0;
}
Tot zover:
Nu kan de <noscript> weer om de vier standaard-items heen, en het style-random.css stylesheet bijgewerkt worden.
Als dat klaar is (testpagina?), dan kan de nieuwe html-structuur ingebakken worden in het javascript.
Met vriendelijke groet,
CSShunter