Downhill-Board › Off Bike › Ranger's Talk Corner & Off-Topic v
div elternelement wirrwarr

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Baumstrukturmodus
div elternelement wirrwarr
georg Offline
Super Moderator
******
Beiträge: 16,580
Themen: 593
Registriert seit: 2001-06-28
Bewertung: 0
#1
2004-08-30, 13:29
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]
Suchen
Zitieren
salsa Offline
Member
***
Beiträge: 121
Themen: 5
Registriert seit: 2003-08-03
Bewertung: 0
#2
2004-08-30, 14:16
wie äussert sich das?
schick einen screenshot wie es aussehen soll.
ich habs mal kurz probiert, und es sieht so aus wie im attachment
Suchen
Zitieren
salsa Offline
Member
***
Beiträge: 121
Themen: 5
Registriert seit: 2003-08-03
Bewertung: 0
#3
2004-08-30, 14: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>
Suchen
Zitieren
georg Offline
Super Moderator
******
Beiträge: 16,580
Themen: 593
Registriert seit: 2001-06-28
Bewertung: 0
#4
2004-08-30, 15:33
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.
Suchen
Zitieren
StefanGT Offline
Posting Freak
*****
Beiträge: 1,428
Themen: 83
Registriert seit: 2002-06-09
Bewertung: 0
#5
2004-08-30, 20:29
javascript:emoticon(':plemplem:')

des is ma z'hoch...
Suchen
Zitieren
Siento Offline
Posting Freak
*****
Beiträge: 1,786
Themen: 87
Registriert seit: 2004-03-20
Bewertung: 0
#6
2004-08-30, 21:44
gratulation und respect für die die solche sachen verstehen [Bild: smile.gif]

ich tus nicht [Bild: grin.gif]
Suchen
Zitieren
noox Offline
Administrator
*******
Beiträge: 21,418
Themen: 2,680
Registriert seit: 2001-06-22
Bewertung: 0
#7
2004-08-31, 00:34
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.
Homepage Suchen
Zitieren
noox Offline
Administrator
*******
Beiträge: 21,418
Themen: 2,680
Registriert seit: 2001-06-22
Bewertung: 0
#8
2004-08-31, 00:39
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.
Homepage Suchen
Zitieren
noox Offline
Administrator
*******
Beiträge: 21,418
Themen: 2,680
Registriert seit: 2001-06-22
Bewertung: 0
#9
2004-08-31, 00:48
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.
Homepage Suchen
Zitieren
el panecillo Offline
Super Moderator
******
Beiträge: 5,791
Themen: 224
Registriert seit: 2001-06-29
Bewertung: 0
#10
2004-08-31, 00:48
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]
Suchen
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste