HTML interesse |
|
Hallo 'lezers',
Ik heb een probleempje met mijn 'layout', ik maak hem eerst zonder plaatjes e.d en later verwerk ik er plaatjes in zoals logo en kopjes. Nu heb ik met divjes gewerkt, ( waar ik vroeger tables gebruikte ). nu wil ik 3 vlakken naast elkaar maken, ik heb ze voor het gemak maar even linker, center en rechter genoemt. Nu heb ik 2 problemen.
De lay out is totaal 770 px. Linker is 190, center is 440, rechter is 140 (alles in px). Nu moet ik in mijn CSS verwerken dat de rechter 140 px. is anders slaat de tekst van de rechter kolom naar beneden onder de linker.
Het tweede probleem. De achtergrond van center is #E1E1E1. Als ik die instel, dan krijg ik een vlakje van ong. 3px bij de rechter.
Hoe kan ik deze beide problem oplossen. Tips/fouten in de CSS en HTML zijn ook welkom.
CSS:
/* algemene box */
div.content {
background-color: #E1E1E1;
border: 0px;
border-style: solid;
border-color: #333333;
text-align:top;
height: 75%;
}
/* linker box */
#.left {
background-color: #FFFFFF;
border: 0px;
border-right-width: 1px;
border-style: solid;
border-color: #333333;
border-collapse: collapse;
height: 100%;
width: 190px;
}
/* middle box */
#.middle {
background-color: #E1E1E1;
border: 0px;
border-right-width: 1px;
border-style: solid;
border-color: #333333;
border-collapse: collapse;
height: 100%;
width: 440px;
border-collapse: collapse;
}
/* right box */
#.right {
background-color: #FFFFFF;
border: 0px;
border-style: solid;
border-color: #333333;
border-collapse: collapse;
height: 100%;
width: 130px;
}
/* algemene box */ div.content { background-color: #E1E1E1; border: 0px; border-style: solid; border-color: #333333; text-align:top; height: 75%; } /* linker box */ #.left { background-color: #FFFFFF; border: 0px; border-right-width: 1px; border-style: solid; border-color: #333333; border-collapse: collapse; height: 100%; width: 190px; } /* middle box */ #.middle { background-color: #E1E1E1; border: 0px; border-right-width: 1px; border-style: solid; border-color: #333333; border-collapse: collapse; height: 100%; width: 440px; border-collapse: collapse; } /* right box */ #.right { background-color: #FFFFFF; border: 0px; border-style: solid; border-color: #333333; border-collapse: collapse; height: 100%; width: 130px; }
HTML:
<div class="content">
<span class="left">linker</span>
<span class="middle">center</span>
<span class="right">rechter</span>
</div>
<div class="content"> <span class="left">linker</span> <span class="middle">center</span> <span class="right">rechter</span> </div>
|