nicht angemeldet
Horizontale Navigation mit DIVs :-(
0 0 
Gunnar Bittersmann
0 0
Horizontale Navigation mit DIVs :-(
Möchte in eine Tabellenzelle eine horizontale Navigation einsetzen, bei der sich die Links *nahtlos* aneinander reihen. Hört sich einfach an, aber es klemmt gewaltig.
Gebe ich den Links und den DIVs ein padding von 0.5em, füllt der blaue Hintergrund das DIV horizontal nicht komplett aus - vertikal dagegen schon. Ich möchte aber, dass sich die Navigation ohne weisse Ränder nahtlos zwischend die grauen Tabellenzellen einfügt.
Irgendwie habe ich hier wohl etwas grundsätzlich nicht verstanden. Wer hilft mir auf die Sprünge?
Hier der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
font-family: verdana,arial,sans-serif;
}
.zelle {
padding: 0px;
}
div.navtop0 {
float: left;
padding: 0.5em;
margin: 0px;
border: 1px dotted #ff0000;
}
.navtop0active {
color: #ffffff;
background-color: #ec6e13;
}
div.navtop0 a {
color: #ffffff;
background-color: #6666ff;
text-decoration: none;
padding: 0.5em;
}
div.navtop0 a:hover {
color: #ffffff;
background-color: #000000;
}
</style>
</head>
<body>
<table border="0" style="width:100%;">
<tr>
<td class="zelle" style="background-color:#999999;">
<p>oben</p>
</td>
</tr>
<tr>
<td class="zelle">
<div class="navtop0"><a href="index.html">Äpfel</a></div>
<div class="navtop0"><a href="index.html">Birnen</a></div>
<div class="navtop0"><a href="index.html">Erdbeeren</a></div>
<div class="navtop0"><span class="navtop0active">Bananen<span></div>
<div class="navtop0"><a href="index.html">Kirschen</a></div>
<div style="clear: both; height: 0px"> </div>
</td>
</tr>
<tr>
<td class="zelle" style="background-color:#999999;">
<p>unten</p>
</td>
</tr>
</table>
</body>
</html>
-
Hört sich einfach an, aber es klemmt gewaltig.
Ja, schon angefangen bei deinen HTML-Code wo du statt eine semantisch vernünftigen Liste eine div-Suppe kredenzt.
Irgendwie habe ich hier wohl etwas grundsätzlich nicht verstanden. Wer hilft mir auf die Sprünge?
-
@@suit:
nuqneH
Ja, schon angefangen bei deinen HTML-Code wo du statt eine semantisch vernünftigen Liste eine div-Suppe kredenzt.
Schon vorher* angefangen, wo die Tabelle müffelt.
Qapla'
* top down oder bottom up?
--
Volumen einer Pizza mit Radius z und Dicke a: pi z z a
-
-
@@ahollmann:
nuqneH
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Die Sprachangabe "en" passt nicht zum Inhalt.
<div style="clear: both; height: 0px"> </div>
Was bitte soll das denn? Ein Dummy-Element? Pfui! Weg damit!
Du solltest _sämtliche Styleangeben im Stylesheet angeben; nicht inline in @style-Attributen.
Qapla'
--
Volumen einer Pizza mit Radius z und Dicke a: pi z z a -
Hi!
Irgendwie habe ich hier wohl etwas grundsätzlich nicht verstanden.
Kann man so sagen.
1: Du benutzt eine Tabelle fuer Layoutzwecke.
2: Du verschachtelst Links sinnlos in Divs.
3: Du verschachtels inline Elemente in Blockelemente um diese dann inline darzustellen... *schwindelig werd*
4: Du hast eine wunderschoene Aufzaehlung von Links. Dann mach doch auch auf HTML Seite eine daraus.Irgendein Problem hattest Du doch noch: Dein Padding wirkt vertikal nicht? Sehe ich das richtig?
--
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett -
Um mal auf den Punkt zu bringen was an deinem bisherigen Ansatz nicht so gut ist und ich zur Zeit sehr viel Freizeit habe und mich infolge dessen auch entsprechend langweile, habe ich mir mal die Mühe gemacht dir ein fertiges HTML als Antwort zu schreiben, in dem auch die Bemerkungen meiner Vorredner miteingeflossen sind:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"><head> <title>Untitled</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <style type="text/css"> [code lang=css]* {margin:0;padding:0;} body { font-family:verdana,arial,sans-serif; } #wrapper { width:100%; background:#999; } #navigation { width:100%; list-style:none; } #navigation li { float:left; border:1px dotted #f00; } #navigation li a { color:#fff; background:#66f; text-decoration:none; padding:.5em 1em; display:block; } #navigation li a:hover { background:#000; } #navigation li a.active, #navigation li a.active:hover { background:#ec6e13; } #navigation:after { content:"."; display:block; width:100%; clear:both; height:0; visibility:hidden; }</style>
</head>
<body>
<div id="wrapper">
<!-- hier kannst du alles oben hinmachen... -->
<p>oben</p>
<ul id="navigation">
<li><a href="">Äpfel</a></li>
<li><a href="">Birnen</a></li>
<li><a href="">Erdbeeren</a></li>
<li><a href="" class="active">Bananen</a></li>
<li><a href="">Kirschen</a></li>
</ul>
<!-- hier kann dann alles unten hin -->
<p>unten</p>
</div>
</body>
</html>[/code]mfG Felix Nehrke
P.S.: Besuche unseren Blog: http://www.pommes-blog.de
--
Manchmal gibs was neues :)
fo:| ch:| rl:( br:> n4:? ie:( va:) de:> zu:) fl:( ss:| ls:[ js:)-
@@nemoinho:
nuqneH
[…] in dem auch die Bemerkungen meiner Vorredner miteingeflossen sind: […]
<ul id="navigation">
<li><a href="">Äpfel</a></li>
<li><a href="">Birnen</a></li>
<li><a href="">Erdbeeren</a></li>
<li><a href="" class="active">Bananen</a></li>
<li><a href="">Kirschen</a></li>
</ul>Da hatte ich doch glatt eine Bemerkung vergessen, die hätte mit einfließen müssen: „Verlinke niemals auf die aktuelle Seite.“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])
Qapla'
--
Volumen einer Pizza mit Radius z und Dicke a: pi z z a-
Da hatte ich doch glatt eine Bemerkung vergessen, die hätte mit einfließen müssen: „Verlinke niemals auf die aktuelle Seite.“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])
Das weiß ich auch, nur habe ich es außer acht gelassen, weil ich da nicht den Zusammenhang gesehen habe der es notwendig macht sich daran zu halten, da er ja offensichtlich nur Probleme mit der Navigation an sich hatte, nicht jedoch mit den Links, welche er einfügen wollte.
mfG Felix Nehrke
P.S.: Besuche unseren Blog: http://www.pommes-blog.de
--
Manchmal gibs was neues :)
fo:| ch:| rl:( br:> n4:? ie:( va:) de:> zu:) fl:( ss:| ls:[ js:)
-
-
<div id="wrapper">
</div>Zitat 1278. Was soll der "wrapper" da, ist html und body nicht schon genug? :)
-