JS gevorderde |
|
Hey Finduilas ik ben zo vrij geweest om je schematic structure even te herzien zodat je de code flink kan inkorten, zowel css als de html.
Verder zou je er ook goed aan doen om wanneer je css gebruikt dit te hanteren en zo min mogelijk inline styles te gebruiken. normaliter wekrt het wel, maar draagt niet echt bij aan de leesbaarheid van je document voor jou, en mogelijke se-bots.
Hier volgt een werkende versie [in iedergeval dat denk ik, niet getest]:
/* CSS */
table {
padding : 0px;
width : 740px;
}
div.menutop {
width : 100px;
height : 27px;
background : url(menu.gif) repeat-x left top;
text-align : center;
vertical-align : top;
padding : 0px;
margin : 0px;
}
td.menu a {
color : #000;
line-height : 18px;
font-size : 16px;
font-weight : normal;
text-decoration : none;
}
td.menu a:hover {
text-decoration : underline;
}
td.menu {
vertical-align : top;
width : 100px;
background : #E8E8E8;
padding : 0px;
}
td.content {
width : 600px;
text-align : left;
vertical-align : top;
}
/* HTML */
<table>
<tbody>
<tr>
<td colspan="2"><img src="NIEUW-bestanden/header.gif"></td>
</tr>
<tr>
<td class="menu">
<div class='menutop'>Menu</div>
<a href="">Home</a><br>
<a href="">Aanmelden</a><br>
<a href="">Inloggen</a><br>
<a href="">Top100</a><br>
<a href="">Regels</a><br>
<a href="">Prijzen</a>
</td>
<td class='content'>
blaat
</td>
</tr>
</tbody>
</table>
/* CSS */ table { padding : 0px; width : 740px; } div.menutop { width : 100px; height : 27px; background : url(menu.gif) repeat-x left top; text-align : center; vertical-align : top; padding : 0px; margin : 0px; } td.menu a { color : #000; line-height : 18px; font-size : 16px; font-weight : normal; text-decoration : none; } td.menu a:hover { text-decoration : underline; } td.menu { vertical-align : top; width : 100px; background : #E8E8E8; padding : 0px; } td.content { width : 600px; text-align : left; vertical-align : top; } /* HTML */ <table> <tbody> <tr> <td colspan="2"><img src="NIEUW-bestanden/header.gif"></td> </tr> <tr> <td class="menu"> <div class='menutop'>Menu</div> <a href="">Home</a><br> <a href="">Aanmelden</a><br> <a href="">Inloggen</a><br> <a href="">Top100</a><br> <a href="">Regels</a><br> <a href="">Prijzen</a> </td> <td class='content'> blaat </td> </tr> </tbody> </table>
|