Probleme mit CSS

  • Probleme mit CSS

    Servus!

    Ich programmiere seit einiger Zeit meine HP. In letzter Zeit wird sie immer aufwendiger gestaltet. Dadurch kommen auch immer wieder mehr Probleme die ich nicht mehr ohne hilfe und stundenlangen suchen lösen kann. Mir wurde dieses Forum empfohlen!

    Also, hier mein Problem:
    Der Mozilla Firefox zeigt meine HP super an. Beim Windows Internet Explorer ist die Darstellung ganz schlecht... . Was soll ich machen??!!??

    Und das zweite wäre noch: Die Boxen 1, 4 und 5 sollen in die Mitte, und das bei jeder Bildschirm auflösung.

    Hier der Code:

    Quellcode

    1. <html>
    2. <head>
    3. <title>Homepage</title>
    5. <style type="text/css">
    6. #div1 { position:fixed; top:0px; width:800px; height:100px; background-image:url(design/banner.jpg); z-index:5; } /*bg - banner oben*/
    7. #div2 { position:fixed; top:0px; width:50%; height:100px; background-image:url(design/banner_leer_links.jpg); z-index:4; } /*bg - banner oben; verlängerung links*/
    8. #div3 { position:fixed; top:0px; width:50%; height:100px; left:50%; background-image:url(design/banner_leer_rechts.jpg); z-index:4; } /*bg - banner oben; verlängerung rechts*/
    9. #div4 { position:fixed; top:100px; width:50%; height:100px; background-image:url(design/textfeld_oben.jpg); z-index:5; } /*bg - textfeld oben; mit grauen kasterl*/
    10. #div5 { position:fixed; top:100px; width:800px; height:40px; background-image:url(design/links.jpg); z-index:5; } /*bg - bg für links*/
    11. #div6 { position:fixed; top:100px; width:50%; height:100px; left:50%; background-color:#ffffff; z-index:4; } /*bg - textfeld unten; nur weiss*/
    12. #div7 { position:fixed; top:200px; width:100%; height:100%; background-color:#ffffff; z-index:4; } /*bg - bg weiss*/
    13. </style>
    15. </head>
    18. <body bgcolor="#ffffff" text="#ffffff" linke="#ffffff" alink="#ffffff" vlink="#ffffff">
    20. <div id="div1"> </div>
    21. <div id="div2"> </div>
    22. <div id="div3"> </div>
    23. <div id="div4"> </div>
    24. <div id="div5"> </div>
    25. <div id="div6"> </div>
    26. <div id="div7"> </div>
    28. </body>
    29. </html>
    Alles anzeigen


    Auch genau: Ich sage als Neuling in diesem Forum auch mal "HALLO"!!!! :D

    MfG, herbw
    Schöne Grüsse aus Brunn! ;)

  • Hallo Neuling ;)

    fürs erste korrigier mal den Rechtschreibfehler beim body "link"-Attribut
    Dann würde ich dirs fürs Entwickeln empfehlen Rahmen um alle DIVs anzuzeigen

    Quellcode

    1. div { border:1px solid #afafaf; }


    Zum Internet Explorer:
    Die Angabe fixed wird vom Internet Explorer für Windows bis Version 6 gar nicht und von Version 7 nur im Beispiel-Seite standardkonformen Modus unterstützt, Netscape unterstützt sie seit Version 6.1.
    Soll denn wirklich alles fixed sein, oder reicht ein absolute?

    Zur Zentrierung:
    Das position:fixed entfernen und margin-right:auto; margin-left:auto; übernehmen.

    Ansonsten gibts hier noch ein paar gute Beispiele, die dir vielleicht weiterhelfen http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

  • Servus!

    "d0nUt" schrieb:


    Zur Zentrierung:
    Das position:fixed entfernen und margin-right:auto; margin-left:auto; übernehmen.

    Wenn ich "position:fixed" auf "position:absolute" änder, dann funktionierts mit dem Windows Internet Explorer und dem Mozilla Firefox. Nur wenn ich dann das "position:absolute" wegnehme und "margin-right:auto; margin-left:auto;" einfüge, sehe ich die Box nicht mehr?!?
    Und wenn ich beides hinschreibe, ist die Box wieder links. :?

    MfG, herbw
    Schöne Grüsse aus Brunn! ;)

  • Ich möchte dir mal folgende Seite empfehlen: http://www.css4you.de/wslayout1/index.html

    Hier findest du mehrere Beispiele zu ähnlichen Problemstellungen. Außerdem aber auch wichtige Informationen über fast alle CSS-Eigenschaften, zum Beispiel auch position.

    Zu deinem Problem. Das wird so nichts. Du kannst nicht mit position:absolute arbeiten und gleichzeitig margin: 0px auto; verwenden. Am besten du erstellst einen Layer um alle kleineren Layer. Gibst diesem position: relative;, margin: 0px auto; und wenn nötig eine feste breite. Dann kannst du alle kleineren Layer in diesem mit absolut an diesem ausrichten.

  • Servus!

    Ok, habe mir die Seite mal angeschaut. Sehr hilfsreich. Da wird viel super beschrieben. Danke!
    Nur bleibt bei mir noch die Frage offen, welche Position ich eingeben muss, wenn ich margin-left und margin-right mit eingebe!?!

    static -> da sehe ich die Box nicht
    relative -> da ist jede Box unter ein ander und nicht teilweise überlappend
    absolute -> sind alle Boxen linksbündig
    fixed -> funktioniert im Windows Internet Explorer nicht.
    gar keine Position -> sehe ich die Box(en) nicht.

    MfG, herbw
    Schöne Grüsse aus Brunn! ;)

  • Hallo!

    "Baby Herman" schrieb:


    Zu deinem Problem. Das wird so nichts. Du kannst nicht mit position:absolute arbeiten und gleichzeitig margin: 0px auto; verwenden. Am besten du erstellst einen Layer um alle kleineren Layer. Gibst diesem position: relative;, margin: 0px auto; und wenn nötig eine feste breite. Dann kannst du alle kleineren Layer in diesem mit absolut an diesem ausrichten.

    Habe das vorher überlesen. :oops:

    Jetzt schauts so aus. Und die Box ist nicht zu sehen!?!

    Quellcode

    1. #div1 { position:relative; margin:0px auto; width:800px; background-image:url(design/banner.jpg); z-index:5; }


    MfG, herbw
    Schöne Grüsse aus Brunn! ;)