Fehler an einem Css Stylesheet! Die Navigationsleiste ist verschobe
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anordnung
attribut
auflsung
auto
beispiel
beitrag
body
elemente
gemeint hast
hofnarr
inhalt
leerraum
login
main
margin
mitte
mglichkeit
navigation
page
quelltext
-
Wie der Titel schon sagt ist in Css meine Navigationsleiste verschoben und ich kann mir nicht erklären wieso weil ich die Pixelstandorte eh gesetzt habe. Bitte helft mir.
<? <html> <head> <title>layout</title> <style type="text/css"> html{height:100%; width:100%; } body { height:100%;; width:98%; background-color:#FFCCFF; color:white; } /*Positionierung der Werbung*/ div#werbung{ margin-right:80px; margin-top:10px; height:100px; width:590px; border:1px solid #eee; border-color:black; background-image:url(Images/Banner.jpg); float:right; background-color:#FFCCFF; } /*Überschriftengrößen bestimmen*/ #menu, #login, #news{ border:1px solid #eee; border-color:black; background-color:#FFCCFF; width:150px; height:20px; float:left; margin-right:10px; margin-left:20px; } /*Größe der Felder bestimmem*/ #menu2, #news2,#login2{ border:1px solid #eee; border-color:black; background-color:#FFCCFF; width:150px; height:200px; margin-top:1px; float:left; margin-right:10px; background-image:url(); text-align:center; text-align:left; margin-left:20px; } #news{ margin-top:50px; } #login{ margin-top:50px; } /*Positionierung des Innenraumes*/ #menu3, #news3, #login3{ width:108px; height:109px; margin-left:20px; margin-top:20px; float:left; font-size:15px; font:white; color:white; } /*Positionierung des Inhaltes (Außen)*/ #inhalt2{ margin-left:10px; margin-right: 80px; border:1px solid #eee; border-color:black; background-color:#BDC3CD; width:590px; height:700px; float:right; margin-top:20px; background-image:url(); } /*Positionierung des Inhaltes (Innen)*/ #inhalt3{ margin-left:100px; margin-top:30px; width:400px; } /*Mouseover bei Navigationsleiste*/ A:link{color:white;} A:visited{color:white;} A:active{color:white;} A:hover{color:black;text-decoration:overline;} </style> </head> <body> <div id="werbung">Werbung</div> <div id="inhalt2"><div id="inhalt3">Hier wird später der Inhalt angezeigt.Hier wird später der Inhalt angezeigt.Hier wird später der Inhalt angezeigt.Hier wird später der Inhalt angezeigt.Hier wird später der Inhalt angezeigt.Hier wird später der Inhalt angezeigt.Hier wird später der Inhalt angezeigt.Hier wird später der Inhalt angezeigt.Hier wird später der Inhalt angezeigt.Hier wird später der Inhalt angezeigt.</div></div> <div id="menu">Navigation</div> <div id="menu2"><div id="menu3"> <a href="#">Beispiel</a><br> <a href="#">Beispiel</a><br> <a href="#">Beispiel</a><br> <a href="#">Beispiel</a><br> <a href="#">Beispiel</a><br> <a href="#">Beispiel</a><br> <a href="#">Beispiel</a><br> <a href="#">Beispiel</a><br> <a href="#">Beispiel</a><br> </div> </div> <div id="news">News</div> <div id="news2"><div id="news3"> </div></div> <div id="login">Login</div> <div id="login2"><div id="login3"> </div></div> </body> </html> ?>
Wäre cool wenn mir da einer helfen könnte -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
ja aber die navigationsleiste ist trotzdem verrutscht.
-
Wohin ist die Navi denn verschoben? Oben, unten, links, rechts?
Ich hab zwar versucht mir die Page anzusehen (auf deinem Space), aber da wird das Stylesheet gar nicht geladen. -
Ja dann is doch alles klar:
#menu3 hat einen margin-top (Außenabstand) von 20px, sowie einen margin-left von auch 20px. Daher kommt die Verschiebung.
Beitrag geändert: 29.7.2007 16:08:47 von tct -
Sry ich versteh ned was da so klar ist. Bitte erkläre mir das wenns geht :(
-
Also.
In deinem Stylesheet ist definiert:
/*Positionierung des Innenraumes*/ [...] margin-left:20px; margin-top:20px; [...]
Diese beiden Werte geben den Außenabstand (bei dir der Elemente #menu3, #login3 und #news3) zu dem Übergeordneten Element an (in deinem Fall #menu2, #login2 und #news2). Es wird also ein "Leerraum" um die Elemente mit der Nummer 3 erzeugt. Wenn du diese beiden Werte löscht, bzw. verkleinerst, sollte dieser "Leerraum" verschwinden.
Siehe auch http://www.css4you.de/margin.html -
Das Problem sind ja nicht die leerräume in den elementen sondern das die Navigationsleiste ja nicht untereinander steht.
-
Dann versteh ich dein leider Problem nicht, denn bei mir sieht die Seite im IE, im FF und im Opera eigentlich immer gleich aus.
Die Links, die momentan nur "Beispiel" heißen, stehen bei mir alle untereinander. Die Felder, die Navigation, Login und News heißen, haben alle einen gewissen Abstand zu einander. Willst du den weghaben? Oder willst du, dass die Überschriften "Navigation", "Login" und "News" mehr in die Mitte rücken um über den Links "Beispiel" zu stehen? Was möchtest du denn erreichen? Kannst du das ein wenig genauer beschreiben? Dann kann ich dir vll helfen.
Edit:
Hier mal deine Seite, wie sie bei mir aussieht: http://tct.lima-city.de/hofnarr.jpg
Beitrag geändert: 29.7.2007 16:41:08 von tct -
Hallo,
meinst du evtl. dass sich das Layout verschiebt, wenn man die
Fenstergröße ändert?
Da könntest du mit absoluten Positionen arbeiten. Die Sache mit Margin geht offenbar schief.
Gruß
Manni
-
Ja genau so soll sie ausschauen und bei mir schaut sie so aus.
http://hofnarr.lima-city.de/Bilder/anordnung.JPG
Liegt das vl an der auflösung?
PS: Der Strich unter Navigation ist schon vorhanden beim verschoben verloren gegangen ;) -
Hallo nochmal,
bevor alle über die absolute Positionierung herziehen, es geht
auch mit float.
Vielleicht hilft dir ja das:
http://www.css4you.de/wslayout1/ex0009.html
Gruß
Manni -
Ja genau so soll sie ausschauen und bei mir schaut sie so aus.
http://hofnarr.lima-city.de/Bilder/anordnung.JPG
Liegt das vl an der auflösung?
PS: Der Strich unter Navigation ist schon vorhanden beim verschoben verloren gegangen ;)
Na kein Wunder, dass ich keinen Fehler gesehen hab ;)
Könnte sein, dass deine Auflösung größer ist. Ich selbst hab 1024x768 und wie man sieht keine Probleme.
Versuch mal den Tipp von bandi999 umzusetzen, indem du als Attribut für alles, was links sein soll, ein 'float: left;' hinzufügst.
Edit:
Hm, hab gesehen, dass du das ja eigentlich schon hast. Vll hilft es, wenn du die komplette Seite nochmal in einen div setzt, der die Attribute margin: auto; padding: 0; width: 99%; text-align: center; hat.
Beitrag geändert: 29.7.2007 19:23:59 von tct -
Wie mach ich das sry? bzw. hast du mal zeit bissl im chat zu arbeiten? Sollte ned Css für jede auflösung verwendbar sein?
-
Diskutiert mal im zugehörigen Board weiter ;)
Verschoben nach HTML & JavaScript.
MfG,
thw -
Wie mach ich das sry? bzw. hast du mal zeit bissl im chat zu arbeiten? Sollte ned Css für jede auflösung verwendbar sein?
Ich hab mir den Quelltext mal kopiert und ein bissel was probiert.
Das "Problem" bei divs ist, dass sie sich dynamisch anordnen, wenn sie nicht an einer Position festnagelt. Manchmal ist das sicherlich erwünscht nur in deinem Fall ist das recht blöd, da die Navi sich sonst verschiebt.
Für die beste Möglichkeit halte ich es deshalb, wenn du eine feste Breite für die gesamte Page festlegst. Ich hab einfach mal 1000px genommen und den ganzen Quelltext um einen umfassenden div erweitert. Also noch ein <div id=main> direkt nach <body> einfügt und ein </div> vor </body>.
#main hat dann die Attribute
#main{ width: 1000px; margin: 0px auto; }
Das sorgt dafür, das deine ganze Page immer eine Breite von 1000px hat, egal wie groß das Browserfenster ist, bzw. welche Auflösung man verwendet. Das hat allerdings auch den Nachteil, dass man bei Fentergrößen unter 1000px seitlich scrollen muss. Allerdings verschiebt sich so nichts mehr. margin: 0px auto; gibt an, dass der <div id=main> ganz oben beginnen soll (0px Abstand zum oberen rand) und die restlichen Abstände automatisch sein sollen. Die meisten Websites, die ich kenne und mit divs arbeiten, machen das so, da das wohl die einfachste und gleichzeitig annehmbarste Lösung ist. -
also ich sehe auch keine andere möglichkeit wie tct nur das ich es ein bisschen anders gelöst hätte
ich hätte einfach in der css datei es wie folgt geändert
body {
height:100%;;
width:880px;
background-color:#FFCCFF;
color:white;
}
aus meiner sicht ist kein weiteres div nötig -
Aber divs sind schöner.
An den Standardtags wie body ändere ich fast nie was, mit divs hab ich da mehr Möglichkeiten. Aber sicher, es geht auch so wie du das vorgeschlagen hast. -
Der div funktioniert nicht was du gemeint hast tct. Aber das bodyschon nur so zusammen gequetsch :D naja mal herumtüfteln danke dir isw-azubi vl hast du ja noch was dazu zu sagen tct
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
