Downhill-Board
div elternelement wirrwarr - Druckversion

+- Downhill-Board (https://downhill-board.com)
+-- Forum: Off Bike (https://downhill-board.com/forumdisplay.php?fid=7)
+--- Forum: Ranger's Talk Corner & Off-Topic (https://downhill-board.com/forumdisplay.php?fid=66)
+--- Thema: div elternelement wirrwarr (/showthread.php?tid=21281)

div elternelement wirrwarr - georg - 2004-08-30

Hallo..

WArum ist hier das Elternelement des divs "naviliste" mit der Liste der body und nicht das div "balken" ??

<pre> <div id="balken">
<div id="naviliste">
<ol>
<li><a href="unternehmen.html" title="Firmenprofil" target="inhalt">Unternehmen</a></li>
<li><a href="produkte.html" title="Produkte" target="inhalt">Produkte</a></li>
<li><a href="kontakt.php" title="Kontakt" target="inhalt">Kontakt</a></li>
</ol>
</div>
</div>
</pre>

css:

<pre> #balken {
margin: 3px 0 0 0;
padding: 0;
height: 30px;
background: #CB6363;
}
#naviliste {
position: absolute;
bottom: 0px;
left: 200px;
margin: 0;
padding: 0;
height: 30px;
border: 1px solid #000; /* nur für test */
}
#naviliste ol {
padding: 0;
margin: 0;
float: left;
list-style: none;
font-size: 0.7em
}
#naviliste li {
display: inline;
}
#naviliste a {
height: 18px;
width: 150px;
float: left;
background: transparent;
border-left: 1px solid #970000;
border-right: 1px solid #970000;
border-top: 1px solid #CB6363;
font: bold 8pt verdana;
text-decoration: none;
color: #000;
text-align: center;
vertical-align: middle;
margin-right: 5px;
padding: 0;
}
#naviliste a:hover {
background: #F0F0F0;
color: #970000;
border-left: 1px solid #970000;
border-right: 1px solid #970000;
border-top: 1px solid #970000;
}
</pre>

Kapier ich nicht.. [Bild: confused.gif]

div elternelement wirrwarr - salsa - 2004-08-30

wie äussert sich das?
schick einen screenshot wie es aussehen soll.
ich habs mal kurz probiert, und es sieht so aus wie im attachment

div elternelement wirrwarr - salsa - 2004-08-30

machs so, dann siehts richtig aus:
<pre>
#balken {
position: relative;
top: 0px;
margin: 3px 0 0 0;
padding: 0;
height: 30px;
background: #CB6363;
}
#naviliste {
position: absolute;
bottom: 0px;
left: 200px;
margin: 0;
padding: 0;
height: 30px;
}
#naviliste ol {
padding: 0;
margin: 0;
float: left;
list-style: none;
font-size: 0.7em
}
#naviliste li {
display: inline;
}
#naviliste a {
height: 18px;
width: 150px;
float: left;
background: transparent;
border-left: 1px solid #970000;
border-right: 1px solid #970000;
border-top: 1px solid #CB6363;
font: bold 8pt verdana;
text-decoration: none;
color: #000;
text-align: center;
vertical-align: middle;
margin-right: 5px;
padding: 0;
}
#naviliste a:hover {
background: #F0F0F0;
color: #970000;
border-left: 1px solid #970000;
border-right: 1px solid #970000;
border-top: 1px solid #970000;
}
</pre>

div elternelement wirrwarr - georg - 2004-08-30

Ach so, sorry, vergessen zu sagen wie aussehen soll.. [Bild: icon_redface.gif] [Bild: icon_confused.gif]

-> Anhang: Das ist so wie von dir geschrieben.. aber ich hätte die Geschichte gerne bündig mit der unteren Kante.

Mein problem ist: Wieso wird die naviliste nicht am Balken positioniert, sondern am body? eigentlich müßte doch der Balken als übergeordnetes div das Elternelement sein, an dem die naviliste positioniert wird.

div elternelement wirrwarr - StefanGT - 2004-08-30

javascript:emoticon(':plemplem:')

des is ma z'hoch...

div elternelement wirrwarr - Siento - 2004-08-30

gratulation und respect für die die solche sachen verstehen [Bild: smile.gif]

ich tus nicht [Bild: grin.gif]

div elternelement wirrwarr - noox - 2004-08-31

ich glaub ich habs:

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.

div elternelement wirrwarr - noox - 2004-08-31

Die Lösung von Salsa würde es auch unten bündig anzeigen, nur ist die Höhe von der Navileiste genauso hoch wie die Höhe des Balkens gesetzt.

div elternelement wirrwarr - noox - 2004-08-31

ganz richtig können unsere Lösungen aber noch nicht sein: Sowohl meine, als auch die vom Salsa werdem im Firefox anders angezeigt. Navi ist ein paar Pixeln zu weit unten. Vielleicht ein Margin-Problem.

div elternelement wirrwarr - el panecillo - 2004-08-31

aja des mit den übergeordneten ebenen is a bessere möglichkeit, bei zentrierten pages etwas 'absolut' zu positionieren...

für www.n00kpage.com/webwork.htm hab ich mich damals ziemlich geplagt [Bild: icon_lol.gif]