kostenloser Webspace werbefrei: lima-city


Fehler an einem Css Stylesheet! Die Navigationsleiste ist verschobe

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    hofnarr

    hofnarr hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. s**f

    Dem hier: http://jigsaw.w3.org/css-validator ist ein Fehler aufgefallen (am css):
    #menu3, #news3, #login3...Ungültige Nummer : font white ist kein font-size-Wert : white

    Beitrag geändert: 29.7.2007 14:21:57 von sddf
  4. Autor dieses Themas

    hofnarr

    hofnarr hat kostenlosen Webspace.

    ja aber die navigationsleiste ist trotzdem verrutscht.
  5. 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.
  6. Autor dieses Themas

    hofnarr

    hofnarr hat kostenlosen Webspace.

    http://hofnarr.lima-city.de/HP/

    Nun siehst es zumindest ich sehe es.
  7. 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
  8. Autor dieses Themas

    hofnarr

    hofnarr hat kostenlosen Webspace.

    Sry ich versteh ned was da so klar ist. Bitte erkläre mir das wenns geht :(
  9. 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
  10. Autor dieses Themas

    hofnarr

    hofnarr hat kostenlosen Webspace.

    Das Problem sind ja nicht die leerräume in den elementen sondern das die Navigationsleiste ja nicht untereinander steht.
  11. 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
  12. 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
  13. Autor dieses Themas

    hofnarr

    hofnarr hat kostenlosen Webspace.

    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 ;)
  14. 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

  15. 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
  16. Autor dieses Themas

    hofnarr

    hofnarr hat kostenlosen Webspace.

    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?
  17. Diskutiert mal im zugehörigen Board weiter ;)

    Verschoben nach HTML & JavaScript.

    MfG,
    thw

  18. 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.
  19. 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
  20. 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.
  21. Autor dieses Themas

    hofnarr

    hofnarr hat kostenlosen Webspace.

    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
  22. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!