Keine zentrierte Darstellung mit CSS

Dieses Thema im Forum "Web Page Design" wurde erstellt von Mister Knister, 29.04.2006.

  1. Mister Knister

    Mister Knister Thread Starter MacUser Mitglied

    Beiträge:
    563
    Zustimmungen:
    2
    Mitglied seit:
    27.04.2005
    Hi MacUser
    Ich bastle gerade an meiner eigenen kleinen Website. Da ich nicht im Zeitdruck bin moechte ich mit diesem Zug CSS vollstaendig verwenden. Nun habe ich aber ein Problem, ich habe ein div-Container mit left:auto; und right:auto; formatiert, eigentlich sollte er ja jetzt zentriert sein. Ist er aber nicht, zumindest bei Safari 2.0.3 .
    Koenntet ihr mir helfen?

    Ich poste mal noch die beiden Quelltexte:


    index.html

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Website von Sven Michelmichel</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta name="author" content="Sven Michelmichel">
    <meta name="generator" content="Taco HTML Edit - Made on a Mac">
    <meta name="robots" content="follow">
    <link rel="stylesheet" type="text/css" href="formate.css">
    </head>
    <!--Anfang Layout Box-->
    <div class="layout">
    <!--Anfang Banner Box-->
    <div class="banner">
    <img src="images/banner.jpg" alt="www.sven-mimi.de">
    </div>
    <!--Ende Banner Box-->
    <!--Anfang Valid-Grafiken-->
    <div class="valid">
    <img src="images/valid-html401.jpg" alt="Diese Website ist HTML 4.01 Valid"> <img src="images/valid-css.jpg" alt="Diese Website ist CSS Valid">
    </div>
    <!--Ende Valid-Grafiken-->
    </div>
    <!--Ende Layout Box-->
    </body>
    </html>

    formate.css

    Code:
    <!--
    
    body { background-image:url(images/background_apple.jpg); background-attachment:fixed; }
    
    div.layout { background-color:#FFDDDD; position:absolute; top:100px; width:800px; height:1000px; }
    
    div.banner { background-image:url(images/background_alu.jpg); position:absolute; top:10px; left:10px; right:10px; width:auto; height:100px; }
    
    div.valid { position:absolute; left:20px; bottom:20px; }
    
    -->
    Der Mister Knister
     
  2. red_flag666

    red_flag666 MacUser Mitglied

    Beiträge:
    33
    Zustimmungen:
    0
    Mitglied seit:
    26.01.2004
    Du musst auch sagen das da was zentriert werden soll:
    body { text-align:center;}
     
  3. nimm mal left und right = 50%

    ... und nicht auto oder fahrrad :D
     
  4. autoexec.bat

    autoexec.bat MacUser Mitglied

    Beiträge:
    2.113
    Zustimmungen:
    20
    Mitglied seit:
    21.01.2005
    Ich hätte da jetzt einfach ein margin:auto genommen. Im Übrigen fehlt dir ein <body>. ;)
     
  5. Mister Knister

    Mister Knister Thread Starter MacUser Mitglied

    Beiträge:
    563
    Zustimmungen:
    2
    Mitglied seit:
    27.04.2005
    Also bis jetzt hat keine der Moeglichkeiten etwas genutzt.

    body { text-align:center; }
    bringt nichts weil ich ja absolut positioniert hab

    bei left und right = 50%
    bringt nichts weil dann mein Comtainer in der Mitte anfaengt aber zentriert ist er nich, ich muss dann scrollen

    margin:auto
    bringt nichts weil ich ja oben andere abstaende eingegeben habe, ausserdem ist margin ist margin glaubich nich erlaubt vom W3C

    Der Mister Knister
     
  6. beebop69

    beebop69 MacUser Mitglied

    Beiträge:
    457
    Zustimmungen:
    0
    Mitglied seit:
    23.08.2004
    alsooooo...
    du brauchst einen div um deine inhalte drumherum, quasi einen "wrapper".
    dem gibst du eine feste breite (soweit das zu deinem layout passt.) Dann richtest du den div "wrapper" mittels position:absolute aus:
    width:xxx;
    postition:absolute;
    left:50%;
    margin-left: hälfte von width;
    z-index:1

    So klappt es auf jeden Fall und ist auch W3C-Konform.
     
  7. Mister Knister

    Mister Knister Thread Starter MacUser Mitglied

    Beiträge:
    563
    Zustimmungen:
    2
    Mitglied seit:
    27.04.2005
    was bedeutet das z-index?

    Der Mister Knister
     
  8. liquid

    liquid MacUser Mitglied

    Beiträge:
    3.142
    Medien:
    2
    Zustimmungen:
    111
    Mitglied seit:
    21.07.2004
    Code:
    #container { position: absolute; top: 50%; left: 50%; height: 500px;
    width: 700px; visibility: visible; margin-top: -250px; margin-left: -350px;
    text-align: left ; }
    … so könnt's gehen,… ist zwar ein wenig geschummelt, funzt aber!! ;) :D

    Greetz,…
     
  9. beebop69

    beebop69 MacUser Mitglied

    Beiträge:
    457
    Zustimmungen:
    0
    Mitglied seit:
    23.08.2004
    z-index zeigt die stapelreihenfolge von ebenen an, und eben sind nix anderes als divs, die mittels position ausgerichetet werden.
     
  10. Mister Knister

    Mister Knister Thread Starter MacUser Mitglied

    Beiträge:
    563
    Zustimmungen:
    2
    Mitglied seit:
    27.04.2005
    Es funktioniert mit keinem eurer Vorschlaege. Ich weiss auch nich worans liegt.

    Der Mister Knister
     
Die Seite wird geladen...

Diese Seite empfehlen