1. Lieber Benutzer,

    Du musst bei uns registriert sein, um an den Diskussionen teilzunehmen. Melde dich jetzt an - kostenfrei und unverbindlich. Und stelle Deine eigenen Fragen oder gib uns hilfreiche Antworten

div mittig zentrieren

Dieses Thema im Forum "CSS" wurde erstellt von handymanjack, 4 Mai 2007.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. handymanjack

    handymanjack Neues Mitglied

    Registriert seit:
    8 März 2007
    Beiträge:
    64
    Punkte für Erfolge:
    0
    HI!

    Ich möchte meine seite zentrieren...

    Da ich ausschließlich mit Containern arbeite, wollte ich die Standardlösung: margin:auto 0px; und IE: text-align:center; benutzen, aber es funktioniert nur im IE....

    Habs auch schon mit der Variante 50% und - halbe breite usw. versucht aber dann zerlegt der IE die seite...

    Hier nen link: Be welcomed to my page
    hier der code:
    styles.css:
    Code (text):
    1.  
    2. body {
    3.     text-align:left;
    4.     font-size:12px;
    5.     font-family: Arial, Helvetica, sans-serif;
    6. }
    7.  
    8. a.inhalt:link {
    9.     color: rgb(125, 125, 125);
    10.     text-decoration:none;
    11. }
    12.  
    13. a.inhalt:visited {
    14.     color: rgb(100, 100, 100);
    15.     text-decoration:none
    16. }
    17.  
    18. a.inhalt:hover {
    19.     color: rgb(0, 125, 0);
    20.     font-weight:bold;
    21. }
    22.  
    23. a.inhalt:active {
    24.     color: rgb(150, 150, 150);
    25. }
    26.  
    27. .clearer {
    28.     clear:both;
    29. }
    30.  
    31. div#mittig {
    32.     margin:auto 0px;
    33.     width:1000px;
    34. }
    35.  
    36. div#design {
    37.     width: 1000px;
    38.     height:700px;
    39.     float:left;
    40.     background-image:url('../images/design.jpg');
    41.     background-repeat:no-repeat;
    42. }
    43.  
    44. div#links {
    45.     float:left;
    46.     width:200px;
    47.     height:700px;
    48. }
    49.  
    50. div#mitte {
    51.     float:left;
    52.     width:600px;
    53.     height:700px;
    54. }
    55.  
    56. div#rechts {
    57.     float:left;
    58.     width:200px;
    59.     height:700px;
    60. }
    61.  
    62. div#welcome {
    63.     width:200px;
    64.     height:200px;
    65.     background-image:url('../images/welcome.jpg');
    66.     background-repeat: no-repeat;
    67. }
    68.  
    69. div#menue {
    70.     margin-top:0px;
    71.     width:200px;
    72.     height:500px;
    73.     background-image:url('../images/menue.jpg')
    74. }
    75.  
    76. div#header {
    77.     width:600px;
    78.     height:70px;
    79.     background-image:url('../images/navleisteoben.jpg');
    80. }
    81.  
    82. div#inhalt {
    83.     width:600px;
    84.     height:580px;
    85.     background-image:url('../images/inhalt.jpg');
    86.     background-repeat: no-repeat;
    87. }
    88.  
    89. div#footer {
    90.     width:600px;
    91.     height: 50px;
    92.     background-image:url('../images/footer.jpg');
    93.     background-repeat:no-repeat;
    94. }
    95.  
    96. div#logo {
    97.     width:200px;
    98.     height:200px;
    99.     background-image: url('../images/logo.jpg');
    100.     background-repeat:no-repeat;
    101. }
    102.  
    103. div#news {
    104.     width:200px;
    105.     height:500px;
    106.     background-image:url('../images/news.jpg');
    107.     background-repeat:no-repeat;
    108. }
    109.  
    110. div#content {
    111.     overflow:auto;
    112.     overflow-x:hidden;
    113.     color:rgb(0, 255, 0);
    114.     width:590px;
    115.     height:570px;
    116.     margin-left: 5px;
    117.     padding-top:5px;
    118. }
    119.  
    menue.css:
    Code (text):
    1.  
    2. body {
    3.     text-align:left;
    4.     font-size:12px;
    5.     font-family: Arial, Helvetica, sans-serif;
    6. }
    7.  
    8. a.menue:link {
    9.     color: rgb(0, 125, 0);
    10.     text-decoration:none;
    11. }
    12.  
    13. a.menue:visited {
    14.     color: rgb(50, 50, 50);
    15.     text-decoration:none
    16. }
    17.  
    18. a.menue:hover {
    19.     color: rgb(0, 125, 0);
    20.     font-weight:bold;
    21. }
    22.  
    23. a.menue:active {
    24.     color: rgb(150, 150, 150);
    25. }
    26.  
    27. div#buttons {
    28.     height:460px;
    29.     width:183px;
    30.     padding-top:20px;
    31.     margin-left:8px;
    32. }
    33.  
    34. div.buttonleer {
    35.     width:183px;
    36.     height:58px;
    37.     background-image:url('../images/buttonleer.jpg');
    38.     background-repeat:no-repeat;
    39. }
    40.  
    41. div#buttonhome {
    42.     width:183px;
    43.     height:58px;
    44.     background-image:url('../images/buttonhome.jpg');
    45.     background-repeat:no-repeat;
    46. }
    47.  
    48. div#buttonhomehigh {
    49.     width:183px;
    50.     height:58px;
    51.     background-image:url('../images/buttonhomehigh.jpg');
    52.     background-repeat:no-repeat;
    53. }
    54.  
    55. div#buttonfroemmer {
    56.     width:183px;
    57.     height:58px;
    58.     background-image:url('../images/buttonfroemmer.jpg');
    59.     background-repeat:no-repeat;
    60. }
    61.  
    62. div#buttonfroemmerhigh {
    63.     width:183px;
    64.     height:58px;
    65.     background-image:url('../images/buttonfroemmerhigh.jpg');
    66.     background-repeat:no-repeat;
    67. }
    68.  
    69. div#buttonprivat {
    70.     width:183px;
    71.     height:58px;
    72.     background-image:url('../images/buttonprivat.jpg');
    73.     background-repeat:no-repeat;
    74. }
    75.  
    76. div#buttonprivathigh {
    77.     width:183px;
    78.     height:58px;
    79.     background-image:url('../images/buttonprivathigh.jpg');
    80.     background-repeat:no-repeat;
    81. }
    82.  
    83. div#buttonweb {
    84.     width:183px;
    85.     height:58px;
    86.     background-image:url('../images/buttonweb.jpg');
    87.     background-repeat:no-repeat;
    88. }
    89.  
    90. div#buttonwebhigh {
    91.     width:183px;
    92.     height:58px;
    93.     background-image:url('../images/buttonwebhigh.jpg');
    94.     background-repeat:no-repeat;
    95. }
    96.  
    97. div#topbuttonhome {
    98.     float:left;
    99.     width: 200px;
    100.     height:70px;
    101.     background-image:url('../images/topbuttonhome.jpg');
    102.     background-repeat:no-repeat;
    103. }
    104.  
    105. div#topbuttonhomehigh {
    106.     float:left;
    107.     width: 200px;
    108.     height:70px;
    109.     background-image:url('../images/topbuttonhomehigh.jpg');
    110.     background-repeat:no-repeat;
    111. }
    112.  
    113. div#topbuttonprivat {
    114.     float:left;
    115.     width: 200px;
    116.     height:70px;
    117.     background-image:url('../images/topbuttonprivat.jpg');
    118.     background-repeat:no-repeat;
    119. }
    120.  
    121. div#topbuttonprivathigh {
    122.     float:left;
    123.     width: 200px;
    124.     height:70px;
    125.     background-image:url('../images/topbuttonprivathigh.jpg');
    126.     background-repeat:no-repeat;
    127. }
    128.  
    129. div#topbuttonweb {
    130.     float:left;
    131.     width: 200px;
    132.     height:70px;
    133.     background-image:url('../images/topbuttonweb.jpg');
    134.     background-repeat:no-repeat;
    135. }
    136.  
    137. div#topbuttonwebhigh {
    138.     float:left;
    139.     width: 200px;
    140.     height:70px;
    141.     background-image:url('../images/topbuttonwebhigh.jpg');
    142.     background-repeat:no-repeat;
    143. }
    144.  
    index.php:
    Code (text):
    1.  
    2. <html>
    3.     <head>
    4.         <title>Be welcomed to my page</title>
    5.         <meta name="author" content="Jens Froemmer a.k.a. handymanjack">
    6.         <meta name="generator" content="Adobe Go Live CS2">
    7.         <link rel="stylesheet" href="styles.css">
    8.         <link rel="stylesheet" href="menue.css">
    9.         <script type="text/javascript" src="script.js"></script>
    10.         <!-- ist aber alles von Hand programmiert und nicht per WYSIWYG xD -->
    11.     </head>
    12. <body bgcolor="black" align="center" style="margin:0;padding:0; height:100%; text-align:center;">
    13.     <div id="mittig">
    14.         <div id="links">
    15.             <span class="clearer"></span>
    16.             <div id="welcome"></div>
    17.             <div id="menue">
    18.                 <div id="buttons">
    19.                     <?
    20.                         if(isset($_REQUEST['seite'])){
    21.                             include "navigation.php";
    22.                         }else{
    23.                             include "menuehome.php";
    24.                         }
    25.                     ?>
    26.                 </div>
    27.             </div>
    28.         </div>
    29.         <div id="mitte">
    30.             <span class="clearer"></span>
    31.             <div id="header">
    32.                 <div id="topbuttonhome" onmouseover="this.id='topbuttonhomehigh';" onmouseout="this.id='topbuttonhome';"></div>
    33.                 <div id="topbuttonprivat" onmouseover="this.id='topbuttonprivathigh';" onmouseout="this.id='topbuttonprivat';"></div>
    34.                 <div id="topbuttonweb" onmouseover="this.id='topbuttonwebhigh';" onmouseout="this.id='topbuttonweb';"></div>
    35.                 <span class="clearer"></span>
    36.             </div>
    37.             <div id="inhalt">
    38.                 <div id="content">
    39.                     <?
    40.                         if(isset($_REQUEST['seite'])){
    41.                             include "seiten.php";
    42.                         }else{
    43.                             include "start.html";
    44.                         }
    45.                     ?>
    46.                 </div>
    47.             </div>
    48.             <div id="footer"></div>
    49.         </div>
    50.         <div id="rechts">
    51.             <span class="clearer"></span>
    52.             <div id="logo"></div>
    53.             <div id="news"></div>
    54.         </div>
    55.     </div>
    56. </body>
    57. </html>
    58.  
    mfg
    handymanjack
    Werbung: Jetzt registrieren, damit diese Werbung verschwindet
  2. da_loki

    da_loki Guest

    Code (text):
    1.  
    2. div#mittig {
    3.     margin:auto 0px;
    4.     width:1000px;
    5. }
    6.  
    Schau dir den margin genauer an ;)
    [/code]
    margin: 10px; oben / unten / links / rechts;
    margin; 10px 20px; oben / unten & rechts/links
    margin; 10px 20px 30px; oben & links/rechts & unten
    margin: 10px 20px 30px 40px; oben & rechts& unten & links

    ->
    margin: 0px auto;
    [/code]

    CSS 4 You - The Finest in Stylesheets hilft dir da weiter :)
  3. Alti

    Alti Guest

    Ich glaub margin:auto funktioniert im IE nur, wenn ein Doctype vorhanden ist.
  4. gruenspan

    gruenspan Neues Mitglied

    Registriert seit:
    23 April 2007
    Beiträge:
    882
    Punkte für Erfolge:
    0
    ...und der ist ja wohl bitteschön Pflicht. Die meisten Möchtegernprogrammierer und -webdesigner hätten wesentlich weniger Probleme, wenn Sie auf solche Grundlegenden Sachen achten würden.
  5. matibaski

    matibaski Guest

    Also ganz einfach:
    Code (text):
    1.  
    2. body {
    3. text-align:center: /* Für IE */
    4. }
    5.  
    6. div {
    7. margin-left:auto; /* Firefox, Opera und so */
    8. margin-right:auto;
    9. }
    10.  
    Also diese Variante funktioniert bei mir bei allen Browsern. Netscape, Safari, Opera, IE 5-7, FF und IE für Mac.


    MfG, matibaski
  6. gruenspan

    gruenspan Neues Mitglied

    Registriert seit:
    23 April 2007
    Beiträge:
    882
    Punkte für Erfolge:
    0
    warum dieser WorkAround, wenn es bei einer korrekten Angabe des DocType
    auch mit einer Zeile CSS für alle aktuellen Browser getan ist?
  7. matibaski

    matibaski Guest

    WorkAround?
    Was meinst du damit?


    MfG,matibaski
  8. gruenspan

    gruenspan Neues Mitglied

    Registriert seit:
    23 April 2007
    Beiträge:
    882
    Punkte für Erfolge:
    0
    Ein kleiner Workaround halt. ;)

    EDIT: Man beachte aber bitte die Vererbung bei CSS ;)
    Zuletzt bearbeitet: 4 Mai 2007
  9. handymanjack

    handymanjack Neues Mitglied

    Registriert seit:
    8 März 2007
    Beiträge:
    64
    Punkte für Erfolge:
    0
    -.- margin:auto 0px; margin:0px auto; ... kein kommentar ...

    danke für die schnelle hilfe - ach und das mit dem doctype - ehrlich gesagt ich habs einfach vergessen xDxD

    mach ich schnell noch rein.. :D

    mfg
    handymanjack
    Zuletzt bearbeitet: 4 Mai 2007
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen