hi
da ich viele viel inhalt für meine website plane wollte ich 2 Navigationen eine horizontale und eine vertikale.
nachdem ich jetzt die horizontale mit CSS einstellte ist die vertikale da wo der margin der horizontalen ist.was kann ich da tuen?
2 Navigationen *Problem*
-
-
einfach zwei divs o.Ä. nehmen und platzieren, dann die Größe einstellen und fertig. Zeig doch mal deinen Code her.
-
-
margin: auto;
-
Zitat von "maulepan"
margin: auto;
wohin soll der befehl? wenn ich ihn nach #navi1 tue habt es denn margin-bottom auf und die navigation ist nicht in der mitte -
body {
margin: auto;
}in den body-Bereich.
-
und wenn du nur die Navi zentrieren willst, dann kannst das entweder mit HTML wie folgt tun
oder über css
und dann im HTML
-
-
bei mir klappt das alles nicht keine ahnung woran das liegen könnte
mein CSS-code:Code
Alles anzeigenbody { margin:auto; } #navi1 { margin:auto; } #navi1 ul { list-style:none; } #navi1 li { float:left; margin-left:5px; margin-right:5px; } #navi2 { margin-top:7em; float:left; } #navi2 ul { list-style:none; border-top:none; border-right:3px yellow; border-bottom:2px red; border-left:3px yellow } #navi li { margin-top:2px; margin-bottom:2px; } #inhalt { text-align:center } #werbung { float:right } h4 { margin-top:7em; margin-bottom:3em; }
und hier mein html-code:
HTML
Alles anzeigen<!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> <link rel="stylesheet" href="design.css" type="text/css"> </head> <body> <div id="header"> <img src="pics/beispiel.jpg"/> </div> <div id="navi1"> <ul> <li><a href="index.html">Home</a></li> <li>Freebie</li> <li>Sonstiges</li> </ul> </div> <div id="navi2"> <h4>Navigation</h4> <ul> <li>Platzhalter</li> <li>Platzhalter</li> <li>Platzhalter</li> </ul> </div> <div id="inhalt"> <h4>Info</h4> </div> <div id="werbung"> <h4>Werbung</h4> </div> </body> </html>
und so sieht es bei mir aus
[Blockierte Grafik: http://www.bilder-hochladen-kostenlos.de/files/imagecache/100x100/Unbenannt.gif] -
Hey,
ich hab mal alles, was nicht smit der Position der drei divs zu tun hat rausgenommen.
Guck dir den Code mal an und versuch ihn zu verstehen, wenn du Fragen hast oder das nicht so ähnlich ist, wie dus haben wolltest, sag bescheid.
Greetz.
HTML
Alles anzeigen<!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> <link rel="stylesheet" href="design.css" type="text/css"> <style type="text/css"> #navi1 { background-color: blue; height: 5%; width: 50%; margin-left: 25%; position: absolute; } #navi2 { margin-top:7%; float:left; background-color: red; height: 75%; width: 10%; position: absolute; } #inhalt { text-align:center; background-color: yellow; width: 50%; margin-top: 8%; margin-left: 25%; position: absolute; } </style> </head> <body> <div id="navi1"> <ul> <li><a href="index.html">Home</a></li> <li>Freebie</li> <li>Sonstiges</li> </ul> </div> <div id="navi2"> <h4>Navigation</h4> <ul> <li>Platzhalter</li> <li>Platzhalter</li> <li>Platzhalter</li> </ul> </div> <div id="inhalt"> <h4>Info</h4> </div> </body> </html>
-
Danke ist genauso wie ich es haben wollte.Könntest du aber noch die einzelnen befehele erklären damit ich es verstähe und später selbst nach machen kann?
ich hab jetzt einen border hinzugefügt der wird alerdings auch nicht angezeigt quelcode ist oben bei meinem letzten post
-
welche verstehst du denn nicht?
beim border brauchst du DREI Angaben:
border-style, border-width und border-color.
Bsp:
border-style: solid;
border-width: 1px;
border-color: black;oder
border-style: dotted;
border-width: 5px;
border-color: red;in Kurzform einfach border: solid 1px black;
alles hintereinander.
Greetz.
-
Die Lösung von lauras ist etwas sehr minimal gehalten. Hier eine Lösung um eine Navigation mit CSS zu machen, diese bewährt sich vor allem in der Browserkompatibilität!
XHTML-Code:
HTML
Alles anzeigen<!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>Titel</title> <link rel="stylesheet" href="design.css" type="text/css"> </head> <body> <div id="wrap"> <div id="head"> <img src="pics/beispiel.jpg" alt="head" /> </div> <div id="navigation1"> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div> <div id="navigation2"> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div> <div id="inhalt"> <h4>inhalt</h4> </div> </div> </body> </html>
CSS-Code
Code
Alles anzeigen* { margin: 0; padding: 0; } #wrap { margin: 0 auto; border-bottom: 1px solid #000; height: 432px; } #head { border-bottom: 1px solid #000; height: 50px; padding: 15px; } #navigation1 { border-bottom: 1px solid #000; height: 50px; } #navigation1 ul { list-style-image: none; white-space: nowrap; } #navigation1 ul li { float: left; margin: 15px 0 0 0; padding: 0; list-style-type: none; } #navigation1 ul a:link { float: left; display: block; height: auto; margin: 0 15px 0 0; padding: 2px 2px 3px 20px; text-decoration: none; color: #000; font-family: Arial; font-size: 15px; } #navigation1 ul a:active { float: left; display: block; height: auto; margin: 0 15px 0 0; padding: 2px 2px 3px 20px; text-decoration: none; color: #000; font-family: Arial; font-size: 15px; } #navigation1 ul a:hover { float: left; display: block; height: auto; margin: 0 15px 0 0; padding: 2px 2px 3px 20px; text-decoration: underline; color: #000; font-family: Arial; font-size: 15px; } #navigation1 ul a:visited { float: left; display: block; height: auto; margin: 0 15px 0 0; padding: 2px 2px 3px 20px; text-decoration: none; color: #000; font-family: Arial; font-size: 15px; } #navigation2 { float: left; border-right: 1px solid #000; height: 300px; } #navigation2 ul { list-style-image: none; white-space: nowrap; } #navigation2 ul li { margin: 15px 0 0 0; padding: 0; list-style-type: none; width: 100px; height: auto; } #navigation2 ul a:link { display: block; height: auto; margin: 0 15px 0 0; padding: 2px 2px 3px 20px; text-decoration: none; color: #000; font-family: Arial; font-size: 15px; } #navigation2 ul a:active { display: block; height: auto; margin: 0 15px 0 0; padding: 2px 2px 3px 20px; text-decoration: none; color: #000; font-family: Arial; font-size: 15px; } #navigation2 ul a:hover { display: block; height: auto; margin: 0 15px 0 0; padding: 2px 2px 3px 20px; text-decoration: underline; color: #000; font-family: Arial; font-size: 15px; } #navigation2 ul a:visited { display: block; height: auto; margin: 0 15px 0 0; padding: 2px 2px 3px 20px; text-decoration: none; color: #000; font-family: Arial; font-size: 15px; } #inhalt { float: left; } #inhalt h4 { padding: 15px; }
-
#navi1 {
height: 5%;
width: 50%;
margin-left: 25%;
position: absolute;
}
#navi2 {
margin-top:7%;
}und den befehl position kenn ich gar nicht was kann ich stat absolute dahinter setzen
edit:@neoarmis danke
-
-
NeoAramis: Es ging ja auch darum, die Positionierung zu erläutern und nich das Design der Seite zu machen...
#navi1 { -->spricht den div mit der id navi1 an.
height: 5%; -->bekommt damit eine höhe von 5% des fensters (maximiert) und ist damit in verschiedenen Auflösungen unterschiedlich groß, um immer die komplette Seite und nicht immer nur einen Teil im Blick zu haben
width: 50%; Breite von 50% des Fensters
margin-left: 25%; teilt den Rest von width in zwei Hälften und positioniert damit mittig
position: absolute; bewirkt, dass sich das element allein am gesamten bereich ausrichtet und ncih an anderen elementen, schau am besten mal hier: <!-- m --><a class="postlink" href="http://www.css4you.de/position.html">http://www.css4you.de/position.html</a><!-- m -->
}Hast du eig ICQ oder so?
-
ich hab skype, msn lokalisten,schüler vz wenn du nichts davon hast kann ich mir noch icq machen
thx für den link werde wohl CSS komplet neu lernen -
hast pn.
-
Ich habe überhaupt kein Design gemacht? Du hast ihm gar nicht geholfen, er hatte sogar den besseren Ansatz. Wo zum Beispiel hast du die Listen mit CSS definiert?
Mit * kannst du bewirken, dass die ganze Breite genutzt wird. In XHTML ist wichtig, dass du alles in einen Container (hier: id="wrap") packst, damit hast du das ganze Gebilde besser unter Kontrolle!
-
NeoAramis: Ich habe ihm nur das hingeschrieben, was ich verändert hab. Und in seiner ursprünglichen Fragestellung ging es darum, die drei Container zu positionieren. Alles andere kann er ja selber noch hinzufügen. Was ich nicht verändert hab bleibt halt so wie es ist, das kann er ja selber noch dazu schreiben.
Alles was mit Listendefinitionen zu tun hat, ist sehr wohl Design - was denn sonst?
Und das ich ihm nicht geholfen habe ist mir auch neu...
ZitatIn XHTML ist wichtig, dass du alles in einen Container packst, damit hast du das ganze Gebilde besser unter Kontrolle!
Kann man machen, muss man aber nicht. Wenn man damit nur mehrere <div>s gruppiert ist es z.B. überflüssig und wird sogar von manchen Browsern falsch interpretiert.
Greetz
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!