2004-08-31, 00:34
ich glaub ich habs:
wichtig ist: " A containing block is an element with the position property set to relative or fixed." Bei mir ging's mit "absolute" übrigens auch. Allerdings musste ich dann beim Balken width="100%" machen, sonst wurde er ganz schmal.
Ich bin (noch kein so CSS-Guru) Ich würds ungefähr so machen:
<pre> <html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style><!--
.balken {
height: 30px;
background: #CB6363;
position: relative;
}
.naviliste {
position: absolute;
bottom: 0px;
left: 200px;
height: 18px;
}
.naviliste a {
width: 150px;
border-left: 1px solid #970000;
border-right: 1px solid #970000;
font: bold 8pt verdana;
text-decoration: none;
color: #000000;
text-align: center;
vertical-align: middle;
margin-right: 5px;
padding: 2px;
}
.naviliste a:hover {
background: #F0F0F0;
color: #970000;
}
//-->
</style>
</head><body>
<div class="balken">
<span class="naviliste">
<a href="unternehmen.html" title="Firmenprofil" target="inhalt">Unternehmen</a>
<a href="produkte.html" title="Produkte" target="inhalt">Produkte</a>
<a href="kontakt.php" title="Kontakt" target="inhalt">Kontakt</a>
</span>
</div>
</body></html> </pre>
Obwohl das mit der Liste auch ganz nett ist. Damit gibt man dem Menü mehr Bedeutung. Für (Suchmaschinen-)Bots z.B.
Zitat: When an element is positioned absolutely, it is removed from the normal flow, and has no effect on other elements in the normal flow. The element is portioned according to its container block using the offset positions left, right, top, and bottom. A containing block is an element with the position property set to relative or fixed. If the element isn't inside a containing block, the browser window will be the containing block.Aus: http://www.juicystudio.com/tutorial/css/fixed.asp#abs
wichtig ist: " A containing block is an element with the position property set to relative or fixed." Bei mir ging's mit "absolute" übrigens auch. Allerdings musste ich dann beim Balken width="100%" machen, sonst wurde er ganz schmal.
Ich bin (noch kein so CSS-Guru) Ich würds ungefähr so machen:
<pre> <html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style><!--
.balken {
height: 30px;
background: #CB6363;
position: relative;
}
.naviliste {
position: absolute;
bottom: 0px;
left: 200px;
height: 18px;
}
.naviliste a {
width: 150px;
border-left: 1px solid #970000;
border-right: 1px solid #970000;
font: bold 8pt verdana;
text-decoration: none;
color: #000000;
text-align: center;
vertical-align: middle;
margin-right: 5px;
padding: 2px;
}
.naviliste a:hover {
background: #F0F0F0;
color: #970000;
}
//-->
</style>
</head><body>
<div class="balken">
<span class="naviliste">
<a href="unternehmen.html" title="Firmenprofil" target="inhalt">Unternehmen</a>
<a href="produkte.html" title="Produkte" target="inhalt">Produkte</a>
<a href="kontakt.php" title="Kontakt" target="inhalt">Kontakt</a>
</span>
</div>
</body></html> </pre>
Obwohl das mit der Liste auch ganz nett ist. Damit gibt man dem Menü mehr Bedeutung. Für (Suchmaschinen-)Bots z.B.