4haus-tips
4haus-tips
Wenn a als Blockelement festgelegt ist, nimmt es die Breite des Eltern-Elementes ein, hier also der Navigation.
Diese Variante ist zwar kürzer als die mit der Liste, hat aber den Nachteil, daß ohne CSS alle links nebeneinander ohne Abstand stehen.
html, body {margin:0; padding:0; height:100%}
body {background:url("flowers.jpg") top left fixed #1F5F13;}
#nav {width:20ex; float:left; padding:90px 0 0 0;}
#nav a {text-decoration:none; display:block;}
#nav a {margin-bottom:4px;}
#cont {background: #FEFEFE; margin-left:20ex; min-height:100%}
Damit IE den Abstand unter unter den Listenpunkten nicht verdoppelt, bekommt er mit conditional comments noch 100% für a und li verpaßt.
<!--[if IE ]>
<style type="text/css">
#cont {height:100%;}
#nav a {width:100%;}
</style>
<![endif]-->
Diese Spielerei mit den Hintergründen ist von meyerweb inspiriert.
Man braucht 3 Varianten eines Bildes. IE fängt nur mit dem Hintergrund für a im a-Element selber an, deshalb passen die Bilder nicht übereinander.
#nav a {background:url("flowersm.jpg") top left fixed;}
#nav a:link {background:url("flowersh.jpg") top left fixed;}
#nav a:visited {background:url("flowersh.jpg") top left fixed;}
#nav a:link:hover,
#nav a:visited:hover {background:url("flowersm.jpg") top left fixed;}