• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[HTML/CSS] Content mittig ausrichten?

P

paddelx3

Neues Mitglied
Hallo ;)

Ich denke mal das ist eine Standart Frage, jedoch schaffe ich es einfach nicht mein Content mittig zu zentrieren !
Deswegen bitte ich hier einfach mal um hilfe! :)

Code(s) meiner Seite

index.php
Code: 
<?php include('inc/header.php'); ?>

Meine header.php:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" type="text/css" href="./css/headnav.css" />
        <link rel="stylesheet" type="text/css" href="./css/main.css" />
        <link rel="stylesheet" type="text/css" href="./fbox/lightbox.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');</script>
        <script type="text/javascript" src="./fbox/jquery.mousewheel-3.0.4.pack.js"></script>
        <script type="text/javascript" src="./fbox/jquery.fancybox-1.3.4.pack.js"></script>
        <script type="text/javascript" src="./fbox/lifunc.js"></script>
    </head>
    <body>
        <div class="cont">
        <div class="content">
        <div class="navigation">
            <a class="logo" href="index.php"><div class="logo"><img src="img/logo.png" /></div></a>
                    <ul>
                        <li><a href="index.php" >Home</a></li>
                        <li><a href="http://intensionforum.pytalhost.de/">Forum</a></li>
                        <li><a href="staff.php" id="various1" >Register</a></li>
                        <li><a href="staff.php" id="various2" >Download</a></li>
                        <li><a href="staff.php" id="various3" >Ranking</a></li>
                        <li><a href="staff.php" id="various3" >Shop</a></li>
                        <li><a href="staff.php" id="various4" >Donate</a></li>
                        <li><a href="staff.php" id="various5" >Staff</a></li>
                    </ul>
        </div>
        <div class="startda">
            <a href="#register.php"><img src="startda.png" onmouseover="this.src='startda.gif'" onmouseout="this.src='startda.png'"/></a>
        </div>
        </div>
        </div>

    </body>

Meine main.css:
Code: 
@charset "utf-8";
/* CSS Document */
body {
    margin:0 auto;
    width: 100%;
}
.content {   
    background:url('../img/head.png') no-repeat ;
    height:390px;
    width:100%;
   }
.startda {
    padding-top:190px;
}
.logo {
    padding-left:7%;
    float:left;
}

Meine headnav.css:
Code: 
@charset "utf-8";
/* CSS Document */

.navigation {
    background: url('../img/navigation.png') repeat-x;
    width: 100%;
    height:51px;
    float:left;
    text-decoration:none;
    color:#FFFFFF;
    
}
.navigation li {
    background: url('../img/menuBg.png') no-repeat center bottom;
    width: 80px;
    height: 15px;
    text-align: center;
    float:left;
}
.navigation ul {
    padding-bottom:20px;
    margin-bottom:20px;
}
.navigation ul li {
    text-align:center;
    list-style:none;
    float:left;
    font-family:Verdana;
    font-size:10px;
    color:#999;
    text-decoration:none;
    padding-left:0px;
}
.navigation ul li a:hover {
    color:#FFF;
    text-decoration:none;
}
.navigation ul li a {
    color:#999;
    text-decoration:none;
}


Soweit so gut, der gesamte Inhalt soll erstmal in die Mitte verschoben werden, damit die Seite auch auf anderen Bildschirm Dimensionen richtig angezeigt wird.
Hier noch einmal ein Screen der HP, wie sie aussehen solle und wie sie momentan aussieht !

hplol.png


Und so siehts halt mit den obigen Code aus !:

hplol2.png
 
Werbung:
Hallo,
du musst dem Body eine absolute Breite, also eine Pixelangabe, zuweisen. Z.B. 900px. Am besten nimmst du aber die Breite der Header-Grafik.

Code: 
body {     
    margin:0 auto;     
    width: 900px; 
}

Dann noch absolut positionieren und left: 50%. Dann noch die Hälfte der Breite mit margin von Link subtrahieren:


Code: 
body {     
   margin:0 auto;     
   width: [COLOR=#ff0000][B]900px[/B]; [/COLOR]
   left: 50%; 
   margin-left: [COLOR=#ff0000][B]-450px[/B]; [/COLOR]
}
 
Beim letzten Beispiel von momo95 fehlt die CSS-Eigenschaft

Code: 
position: absolute;

ohne die das nicht funktionieren würde. In dem Fall kannst Du aber auch auf "margin" verzichten. Also entweder schreibst Du

Code: 
body {          margin:0 auto;          width: 900px;  }

oder

Code: 
body {     
   width: 900px; 
   left: 50%; 
   margin-left: -450px; 
   position: absolute;
}

Ich würde zu ersterem Raten.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben