Keine zentrierte Darstellung mit CSS

  1. Mister Knister

    Mister Knister Thread StarterMacUser Mitglied

    Mitglied seit:
    27.04.2005
    Beiträge:
    563
    Zustimmungen:
    2
    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
     
    Mister Knister, 29.04.2006
  2. red_flag666

    red_flag666MacUser Mitglied

    Mitglied seit:
    26.01.2004
    Beiträge:
    33
    Zustimmungen:
    0
    Du musst auch sagen das da was zentriert werden soll:
    body { text-align:center;}
     
    red_flag666, 29.04.2006
  3. kannstemal

    kannstemal

    nimm mal left und right = 50%

    ... und nicht auto oder fahrrad :D
     
    kannstemal, 29.04.2006
  4. autoexec.bat

    autoexec.batMacUser Mitglied

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

    Mister Knister Thread StarterMacUser Mitglied

    Mitglied seit:
    27.04.2005
    Beiträge:
    563
    Zustimmungen:
    2
    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
     
    Mister Knister, 29.04.2006
  6. beebop69

    beebop69MacUser Mitglied

    Mitglied seit:
    23.08.2004
    Beiträge:
    457
    Zustimmungen:
    0
    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.
     
    beebop69, 30.04.2006
  7. Mister Knister

    Mister Knister Thread StarterMacUser Mitglied

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

    Der Mister Knister
     
    Mister Knister, 30.04.2006
  8. liquid

    liquidMacUser Mitglied

    Mitglied seit:
    21.07.2004
    Beiträge:
    3.142
    Medien:
    2
    Zustimmungen:
    111
    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,…
     
    liquid, 30.04.2006
  9. beebop69

    beebop69MacUser Mitglied

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

    Mister Knister Thread StarterMacUser Mitglied

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

    Der Mister Knister
     
    Mister Knister, 02.05.2006
Die Seite wird geladen...
Ähnliche Themen - zentrierte Darstellung CSS
  1. rockyV
    Antworten:
    5
    Aufrufe:
    564
    MacMaitre
    02.04.2017
  2. Leviathan64
    Antworten:
    6
    Aufrufe:
    1.378
    Leviathan64
    04.04.2013
  3. freelens
    Antworten:
    2
    Aufrufe:
    750
    falkgottschalk
    30.03.2013
  4. macrol
    Antworten:
    4
    Aufrufe:
    543
  5. solaris-info
    Antworten:
    3
    Aufrufe:
    549
    orgonaut
    27.06.2006