|
|||
horizontale Navigationsleiste
guten morgen
ich hab ein paar probleme mit meiner website... irgendwie bekomm ich meine div-container nicht positioniert! Außerdem verrutscht meine Navigationsleiste auch ständig. Ich möchte das bild "print_pic4.png" als hintergrund, oben links auf dem bild sitzt (sollte) meine navigationsleiste. rechts unten auf dem bild soll eine reihe von links stehen und links daneben text. Nun habe ich das Problem, dass alles verschoben ist, der Text plötzlich hinter dem Bild liegt, die Links rechts unten auf einmal jeweils 2-zeilig sind (der pdf link soll eigentlich direkt nach "link1", "link2" usw. stehen). Irgendwie ist da mittlerweile der wurm drin ich bin etwas verzweifelt. Es wäre super, wenn mir einer von euch beim auseinanderklabüstern helfen könnte oder ein paar tipps hat, denn irgendwie ist hier einiges schief gelaufen. VIELEN DANK! lg kaykay <!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"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>name</title> <link href="name.css" rel="stylesheet" type="text/css" /> <style> #box1 { background-image: url(print_pic4.png); text-align: left; width: 1024px; clip: rect(auto,auto,auto,auto); background-repeat: no-repeat; height: 450px; position: relative; float: left; z-index: 0; bottom: 30px; text-decoration: none; } .Target { color: #9acd32; padding-left: 50px; } a { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 600; color: #999999; word-spacing: 100px; text-align: left; textdecoration: none; width: 500px; display: block; } a:hover { color:#9acd32; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 16px; } a:link { text-decoration:none; } .Navi_class { clip: rect(auto,auto,auto,auto); text-decoration: none; display: block; float: left; height: 35px; width: 35px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; list-style-position: outside; clear: none; padding-top: 9px; padding-right: 5px; padding-left: 45px; margin: 0px; } #gesamt #Hinweis { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 600; text-decoration: none; display: inline; word-spacing: 10px; position: relative; top: 20px; left: 60px; color: #999999; text-align: left; } .links { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 500; color: #9acd32; text-decoration: none; letter-spacing: normal; word-spacing: normal; } #Navi { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 600; text-align: left; position: relative; height: 60px; width: 600px; text-decoration: none; top: 90px; z-index: 10; margin-right: 50px; float: left; padding-top: 20px; right: 20px; list-style-position: inside; list-style-type: none; } #Logo { position: relative; clear: right; float: right; height: 80px; width: 380px; top: 30px; visibility: visible; z-index: 25; right: 20px; } #gesamt #links { clear: right; float: right; width: 210px; position: relative; height: 110px; font-family: Arial, Helvetica, sans-serif; line-height: 16px; text-align: left; text-decoration: none; bottom: 210px; right: 100px; } #gesamt #text { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #999999; text-decoration: none; width: 500px; top: 375px; position: relative; z-index: 80; right: 610px; visibility: visible; } span { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px; font-weight: 500; color: #999999; text-decoration: none; text-align: left; list-style-position: inside; list-style-type: none; } #gesamt { height: 768px; width: 1024px; clear: left; float: left; position: relative; left: -20px; top: -20px; z-index: 10; } #gesamt #contact { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 600; color: #999999; text-align: left; height: 20px; width: 500px; position: relative; top: 550px; left: 150px; text-decoration: none; float: left; visibility: visible; clear: left; white-space: nowrap; } .img_navi { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 600; color: #999999; float: left; width: 80px; position: relative; visibility: visible; left: 60px; top: 40px; text-decoration: none; z-index: 26; white-space: nowrap; } .Link_class { float: left; padding-top: 20px; list-style-position: inside; list-style-type: none; display: block; } #gesamt #Navi li { text-decoration: none; list-style-type: none; list-style-position: inside; display: inline; position: relative; word-spacing: 10em; white-space: nowrap; } ul { list-style-position: inside; list-style-type: none; display: inline; } </style> </head> <body> <div id="gesamt"> <div id="Logo"> <img src="logo.png" /> </div> <div id="Hinweis"> Name blabla </div> <div id="Navi"> <ul> <li><a href="#"><img src="bild1.png" width="46" height="46" align="absbottom" class="Navi_class" /><span class="Link_class">Punkt1</span> </a></li> <li><a href="#"><img src="bild2.png" width="47" height="47" align="absbottom" class="Navi_class" /><span class="Link_class">Punkt2 </span></a> </li> <li><a href="#"><img src="bild3_grau.png" width="43" height="43" align="absbottom" class="Navi_class" /><span class="Link_class">Punkt3</span> </a> </li> <li><a href="#"><img src="bild4_grau.png" width="41" height="41" align="absbottom" class="Navi_class" /><span class="Link_class">Punkt4 </span></a></li> </ul></div> <div id="text"> <span class="Target">> Punkt1</span> Hier steht Text<br /> <br /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <br /><br /> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div> <div id="box1" style="float: center; background"> </div> <div id="links"> <span> more details: </span> <br /> <span> > link1<a href="#" class="links"> > pdf </a><br /> > link2<a href="#" class="links"> > pdf</a> <br /> > link3<a href="#" class="links"> > pdf </a> <br /> > link4<a href="#" class="links"> > pdf </a> <br /> > link5<a href="#" class="links"> > pdf</a> <br /> </span> </div> <div id="contact"> <a href="#"> Kontakt </a> <a href="#">Linklink</a> <a href="#">nochnLink</a> </div> </div> </body> </html> |
Sponsored Links |
|
|||
Für solche Fälle gibt es die Code Tags bei der Text eingabe....
__________________
http://peegee84.deviantart.com |
Sponsored Links |
|
||||
Hi,
oder noch besser ist da immer ein Link zur Seite.
__________________
Der höchste Lohn für unsere Bemühungen ist nicht das, was wir dafür bekommen, sondern das, was wir dadurch werden. Mein aktuelles Projekt bei idealseiten.de |
|
||||
Bitte um Link!
__________________
Gruß Roman // ngkreativ.de - Webdesign & Motorradumbau |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Dynamische Navigationsleiste horizontal, vertikal | Faven | CSS | 6 | 28.06.2010 16:06 |
horizontale Navigationsleiste | Tobe | CSS | 0 | 20.07.2008 11:34 |
Horizontale Navigationsleiste | Marco D. | CSS | 10 | 19.08.2007 11:55 |
Mitwachsende horizontale Navigationsleiste und Schriftarten | boxi | CSS | 1 | 17.04.2006 18:24 |
mit <li> horizontale navigationsleiste | oimelchen | CSS | 17 | 26.10.2005 20:29 |