PHP expert |
|
ik heb <td> met achtergrondafbeelding, daarin zit een tabel met td's die ook achtergrondafbeelding hebben, maar die lopen niet goed in elkaar over
<table cellpadding="0" cellspacing="0" style="height:100%; width:100%; border:5px solid;">
<tr>
<td class="menu" style="border:2px solid #FFF;">
<!-- START BLOCK : menu -->
<table cellspacing="0" cellpadding="0" style="width:180px;">
<tr><td class="menubanner">Voorbeeld</td></tr>
<tr><td class="menuitem">Blaat</td></tr>
<tr><td class="menuitem">Blaat</td></tr>
<tr><td class="menuitem">Blaat</td></tr>
<tr><td class="menuitem">Blaat</td></tr>
<tr><td class="menuitem">Blaat</td></tr>
<tr><td class="menuitem"> </td></tr>
</table>
<table cellspacing="0" cellpadding="0" style="width:180px;">
<tr><td class="menubanner">Voorbeeld</td></tr>
<tr><td class="menuitem">Blaat</td></tr>
<tr><td class="menuitem">Blaat</td></tr>
<tr><td class="menuitem">Blaat</td></tr>
<tr><td class="menuitem">Blaat</td></tr>
<tr><td class="menuitem"> </td></tr>
</table>
<table cellspacing="0" cellpadding="0" style="width:180px;">
<tr><td class="menubanner">Voorbeeld</td></tr>
<tr><td class="menuitem">Blaat</td></tr>
<tr><td class="menuitem">Blaat</td></tr>
<tr><td class="menuitem">Blaat</td></tr>
<tr><td class="menuitem">Blaat</td></tr>
<tr><td class="menuitem">Blaat</td></tr>
<tr><td class="menuitem"> </td></tr>
</table>
<!-- END BLOCK : menu -->
</td>
<td class="content" style="border:2px solid #00FF00;">
<!-- START BLOCK : content_block -->
<div class="indent2">
<div class="margintop">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br />
Fusce leo leo, facilisis quis, aliquam vel, tincidunt non, lorem. <br />
Ut odio est, ultricies id, rutrum nec, volutpat at, erat. <br />
Curabitur massa. Etiam molestie velit in nisi. <br />
Integer faucibus, dui sollicitudin commodo ullamcorper, <br />
nisl metus convallis risus, eu laoreet urna massa ut massa. <br />
Vivamus consectetuer tortor vitae purus. <br />
Quisque nisl massa, consectetuer sed, accumsan nec, molestie ut, metus.<br />
Nulla facilisi. Donec libero. Maecenas sodales tristique nisi. <br />
Phasellus non odio. <br />
Proin urna dui, cursus id, bibendum at, lacinia a, nisl. <br />
Vivamus hendrerit vehicula libero.<br />
</div>
</div>
<br /><br />
<!-- END BLOCK : content_block -->
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" style="height:100%; width:100%; border:5px solid;"> <tr> <td class="menu" style="border:2px solid #FFF;"> <!-- START BLOCK : menu --> <table cellspacing="0" cellpadding="0" style="width:180px;"> <tr><td class="menubanner">Voorbeeld</td></tr> <tr><td class="menuitem">Blaat</td></tr> <tr><td class="menuitem">Blaat</td></tr> <tr><td class="menuitem">Blaat</td></tr> <tr><td class="menuitem">Blaat</td></tr> <tr><td class="menuitem">Blaat</td></tr> <tr><td class="menuitem"> </td></tr> </table> <table cellspacing="0" cellpadding="0" style="width:180px;"> <tr><td class="menubanner">Voorbeeld</td></tr> <tr><td class="menuitem">Blaat</td></tr> <tr><td class="menuitem">Blaat</td></tr> <tr><td class="menuitem">Blaat</td></tr> <tr><td class="menuitem">Blaat</td></tr> <tr><td class="menuitem"> </td></tr> </table> <table cellspacing="0" cellpadding="0" style="width:180px;"> <tr><td class="menubanner">Voorbeeld</td></tr> <tr><td class="menuitem">Blaat</td></tr> <tr><td class="menuitem">Blaat</td></tr> <tr><td class="menuitem">Blaat</td></tr> <tr><td class="menuitem">Blaat</td></tr> <tr><td class="menuitem">Blaat</td></tr> <tr><td class="menuitem"> </td></tr> </table> <!-- END BLOCK : menu --> </td> <td class="content" style="border:2px solid #00FF00;"> <!-- START BLOCK : content_block --> <div class="indent2"> <div class="margintop"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br /> Fusce leo leo, facilisis quis, aliquam vel, tincidunt non, lorem. <br /> Ut odio est, ultricies id, rutrum nec, volutpat at, erat. <br /> Curabitur massa. Etiam molestie velit in nisi. <br /> Integer faucibus, dui sollicitudin commodo ullamcorper, <br /> nisl metus convallis risus, eu laoreet urna massa ut massa. <br /> Vivamus consectetuer tortor vitae purus. <br /> Quisque nisl massa, consectetuer sed, accumsan nec, molestie ut, metus.<br /> Nulla facilisi. Donec libero. Maecenas sodales tristique nisi. <br /> Phasellus non odio. <br /> Proin urna dui, cursus id, bibendum at, lacinia a, nisl. <br /> Vivamus hendrerit vehicula libero.<br /> </div> </div> <br /><br /> <!-- END BLOCK : content_block --> </td> </tr> </table>
menu.css
.menu {
background-color: #4B3D32;
text-align:left;
width:185px;
margin-left:0px;
vertical-align: top;
background-image: url(images/layout/frame-leftmenu.jpg);
background-repeat: repeat-y;
height:100%;
z-index:0;
}
a:link { color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; }
a:visited { color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; }
a:active { color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; }
a:hover { color: #0099FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; }
.menuitem {
color: #FFFFFF;
vertical-align: top;
padding-left: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
}
.menubanner {
background-color: #4B3D32;
background-image: url(images/layout/menu-itembanner.jpg);
background-repeat: no-repeat;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #CCCCCC;
text-align: left;
vertical-align: middle;
height: 25px;
padding-left: 5px;
z-index:1;
}
.menu { background-color: #4B3D32; text-align:left; width:185px; margin-left:0px; vertical-align: top; background-image: url(images/layout/frame-leftmenu.jpg); background-repeat: repeat-y; height:100%; z-index:0; } a :link { color : #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; }a:visited { color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; } a:active { color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; } a:hover { color: #0099FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; } .menuitem { color: #FFFFFF; vertical-align: top; padding-left: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; text-decoration: none; } .menubanner { background-color: #4B3D32; background-image: url(images/layout/menu-itembanner.jpg); background-repeat: no-repeat; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #CCCCCC; text-align: left; vertical-align: middle; height: 25px; padding-left: 5px; z-index:1; }
(hopelijk niet teveel code )
dus menubanner en menu hebben allebei achtergrond, maar door menubanner wordt een stuk van de andere achtergrond weggestoken...
al geporbeerd dus met z-index, maar helpt nie
|