hallo, ich programmiere gerade meine erste homepage... ich habe eine hintergrundbild und eine navigationsleiste mit css gemacht, beides verschiebt sich sobald ich das Fenster verkleinere. In firefox wird die navi-leiste nur im rohformat angezeigt...:'( kann mir jemand helfen?? Vielen Dank schon einmal
AW: allles verrutscht ja, klar, mach ich: <style type=text/css> body { background-image:url(bild.jpg); background-color:eeeeee; background-attachment:fixed; background-position:center; background-repeat:no-repeat; } </style> </body> <body> <div id="bl_main_nav"> <ul> <li><a id="main_nav1" href="home" target="_top">Home</a></li> <li><a id="main_nav2" href="general_person.shtml" target="_top">Gruppe</a></li> <li><a id="main_nav3" href="general_skills.shtml" target="_top">Kalender</a></li> <li><a id="main_nav4" href="general_projects.shtml" target="_top">Kontakt</a></li> <li><a id="main_nav5" href="general_contact.shtml" target="_top">Impressum</a></li> </div> <style type=text/css>{ #bl_main_nav ul { width:600px; line-height:20px; margin:0px; padding:0px; list-style-type:none; letter-spacing:1px; } #bl_main_nav li { margin:0px; padding:0px; text-align:center; float:left; border:0px solid #ffffff; } #bl_main_nav a { color:#FFFFFF; font-family:tahoma; font-weight:bold; display:block; height:30px; width:158px; padding-top:0px; background:#cccccc; text-decoration:none; border-bottom:5px solid #7f7f7f; } #bl_main_nav a:hover { color:#000000; background:#eeeeee; border-bottom:5px solid #7f7f7f; } </style> <style type=text/css> body { margin-top: 150px; margin-left: 15%; } </style>
AW: allles verrutscht vll sottest du die width der ul auch der breite von 5 nebeneinaderliegenden 158 px breiten li elementen anpassen
AW: allles verrutscht Hallo Anders rum ist es einfacher gesagt: Nur im IE wird es so angezeigt, wie du es möchtest Schau dir mal bei selfhtml an, wie das Grundgerüst einer HTML Seite aussehen muss SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Grundgerüst einer HTML-Datei
AW: allles verrutscht wie meinst du das?? Hier bei (#bl_main_nav ul) width:158px eingeben?? das hab ich versucht, leider ändert sich nichts @guin: ich brauche nicht den Grundaufbau, sonder die Lösung für das Navi-Problem...
AW: allles verrutscht Ok, toxictoon meint, dass 5 mal 158px nicht in 600px passt. Also entweder die Buttons schmaler machen, so dass sie in 600px passen oder aber die 600 erhöhen. Beispiel #bl_main_nav ul { width:800px; line-height:20px; margin:0px; padding:0px; list-style-type:none; letter-spacing:1px; }
AW: allles verrutscht #bl_main_nav ul { width:600px; line-height:20px; ... hier solltest du die breit von 5 x 158 px eingeben... 790 px wenn ich richtig gerechnet hab???
AW: allles verrutscht ok, das klingt logisch, das habe ich auch versucht, aber wenn ich das browser-fenster verkleinere, dann verrutschen die einzelnen "buttons" immernoch in die nächste Zeile...ich habe mir noch überlegt als attachement:fixed, oder so was zu nehmen. könnte es damit klappen??
AW: allles verrutscht warum arbeitest du denn eigneltich mit ul? mach doch einfach ganz nomrmale links, dann brauchste auch nicht float:left...
AW: allles verrutscht HTML: <head> <style type=text/css> body { background-image:url(bild.jpg); background-color:eeeeee; background-attachment:fixed; background-position:center; background-repeat:no-repeat; margin-top: 150px; margin-left: 15%; } #bl_main_nav ul { width:800px; line-height:20px; margin:0px; padding:0px; list-style-type:none; letter-spacing:1px; } #bl_main_nav li { margin:0px; padding:0px; text-align:center; float:left; border:0px solid #ffffff; } #bl_main_nav a { color:#FFFFFF; font-family:tahoma; font-weight:bold; display:block; height:30px; width:158px; padding-top:0px; background:#cccccc; text-decoration:none; border-bottom:5px solid #7f7f7f; } #bl_main_nav a:hover { color:#000000; background:#eeeeee; border-bottom:5px solid #7f7f7f; } </style> </head> <body> <div id="bl_main_nav"> <ul> <li><a id="main_nav1" href="home" target="_top">Home</a></li> <li><a id="main_nav2" href="general_person.shtml" target="_top">Gruppe</a></li> <li><a id="main_nav3" href="general_skills.shtml" target="_top">Kalender</a></li> <li><a id="main_nav4" href="general_projects.shtml" target="_top">Kontakt</a></li> <li><a id="main_nav5" href="general_contact.shtml" target="_top">Impressum</a></li> </ul> </div> </body> Hier stelle ich kein verrutschen mehr fest.