Beste SD'ers,

Ik zit met een probleempje betreft de basing van m'n content vlakken.

Dit moet het resultaat worden

Maar met dit probleem zit ik

Ik wil dus dat de div naast de tekst kwa hoogte meegaat met de rest. Hoe kan ik dit het best oplossen? Het is ook vervelend dat de background van de titels doorzichtig is, een div omhoog pushen gaat dus niet omdat de background dan achter het doorzichtige doorkomt.

Ik hoop dat iemand me kan helpen!

Dit is een lastige. Alle standaard-truukjes om 2 kolommen dezelfde hoogte te geven werken hier niet, doordat je overal doorzichtige achtergrondplaatjes hebt.
Waarschijnlijk is dit enkel op te lossen door gebruik te maken van een tabel. Dan weet je tenminste zeker dat de kolom altijd even lang is.

Je kan dit volgens mij gewoon met jQuery oplossen.


Zie o.a. http://www.cssnewbie.com/equal-heigh...s-with-jquery/

Voorbeeld: http://www.cssnewbie.com/example/equal-heights/

Succes

Probeer eens te kloten met z-index, en dan gewoon die bruine achtergrond laten verbergen onder die afbeelding zegmaar. Heb zelf weinig ervaring met het z-index attribuut, maar wellicht kan dit je helpen..

Thanks iedereen!

Het is gelukt met jquery, en ziet er nu netjes uit!

Ik zou de #nieuws_container #d0bb87 als achtergrondkleur geven, en een wit achtergrondplaatje van 10px*1px aan de linkerkant. Dit plaatje moet uiteraard over de y-as herhaald worden. Als de tekst groter wordt, wordt de container ook groter en gaat de achtergrond ook mee.

Dit is toch helemaal niet zo moeilijk? Transparantie? Dat is helemaal niet nodig hoor,,
en javascript al helemaal niet. Dit is gewoon puur css en logisch nadenken ;)

Zie bijlage.

Je hebt 3 divs nodig:

De datum + comments.
De titel.
De content ofwel het vak met tekst dat mee moet rekken.

Denk heel even de teksten weg, die kan jezelf gaan opmaken met css etc. (niet van toepassing)

De contentvak heeft gewoon helemaal de kleur zoals je wilt hebben.
De titel heeft een achtergrond met daarin de schuine lijn.
De datum + comment heeft als achtergrond dat vlakje en zweeft boven het content en titel div.

html:

Code:

<div id="titel">

  <div id="datum">

  </div>

</div>

<div id="content">

</div>

css:

Code:

#titel {
height:30px;
background:url('achtergrond_titel.png');
position:relative;
}

#datum {
position:absolute;
top:0;
left:0;
width:50px;
height:100px;
}

#content {
background:#f00;
}

preview?

leuk geïllustreerd gijsbert, idd. zo zou je er moeten komen :)