problem mit totaler zentrierung

A

aiquita

Mitglied
so mein problem ist folgendes auf meiner seite http://www.marvinbrieger.de habe ich den gesamten ihhalt zentriert
so wenn man nun reinzoomt oder einen bildschirm hat der vertikal eine geringe auflösung hat dann wird der ihalt oben abgeschnitten
ich find selbst einfach keine lösung für das problem

hier die quellcodes
PHP: 
<?php
$site = "home";

if (array_key_exists("site", $_GET)) {
	$site = $_GET['site'];
}

include('counter/counter.php');
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>marvinbrieger.de</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />

    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>

<body>
    <div id="content">
        <div id="nav">
            <ul>
                <li><a href="?site=fuer_freunde">F&uuml;r Freunde</a></li>
                <li><a href="?site=galerie">Galerie</a></li>
                <li><a href="?site=ueber_mich">&Uuml;ber mich</a></li>
                <li><a href="?site=home">Home</a></li>
            </ul>
        </div>

        <div id="main">
            <?PHP
			$filename = "sites/" . $site . ".php";
			if (file_exists($filename)) {
				include $filename;
			}
			else {
				include "sites/404.php";
			}
			?>
        </div>

        <div id="nav2">
            <ul>
                <li><a href="?site=links">Links</a></li>
                <li><a href="?site=kontakt">Kontakt</a></li>
                <li><a href="?site=impressum">Impressum</a></li>
                <li id="copyright">Copyright 2011 Marvin Brieger</li>
                <li id="besucher"><?php echo "BESUCHER:" . $Counter; ?></li>
            </ul>
        </div>
    </div>
</body>
</html>

Code: 
html, body {
    margin:0px;
    padding:0px;
    background:#C0C0C0;
    height:100%;
    width:100%;
}

a, p, h1, h2, h3, h4 {
    margin:0px;
    padding:0px;
    font-family:Verdana;
}

#content {
    margin: -350px 0 0 -450px;
    position:absolute;
    top:50%;
    left:50%;
    width:900px;
    height:700px;
    background:yellow url(images/header.png) no-repeat;

    -webkit-box-shadow: 10px 10px 20px black;
    -moz-box-shadow: 10px 10px 20px black;
    box-shadow: 10px 10px 20px black;
}

#nav {
    margin:0px 25px 0px 0px; /* Alter Wert Rechts war 60px */
    padding:0px;
}

#nav ul {
    margin:0px;
    padding:0px;
}

#nav li {
    list-style:none;
}

#nav li a {
    background:#F5F5F5;
    border:#E1E1E1 solid 1px;
    border-top:none;
    color:#3F3F3F;
    float:right;
    margin-left:10px;
    padding:2px;
    text-decoration:none;
    font-size:20px; letter-spacing:3px;
}

#nav li a:hover {
    background:#E1E1E1;
    border:1px solid #CDCDCD;
    border-top:none;
}

#main {
    margin:150px 10px 10px 10px;
    padding:5px;
    width:868px;
    height:503px;
    border:1px solid #787878;
    background:transparent;
    overflow:auto;
}

.input {
    width:500px;
    margin:0px 0px 10px 0px;
    padding:0px;
    height:30px;
    font-size:24px; letter-spacing:5px; color:#787878;
    background:transparent;
    border:1px solid #787878;
}

textarea {
    width:500px;
    margin:0px 0px 10px 0px;
    height:200px;
    font-size:20px; letter-spacing:3px; color:#787878;
    background:transparent;
    border:1px solid #787878;
}

#nav2 {
    margin:0px 0px 0px 0px;
    padding:0px;
}

#nav2 ul {
    margin:0px;
    padding:0px;
}

#nav2 li {
    list-style:none;
}

#nav2 li a {
    background:#F5F5F5;
    border:#E1E1E1 solid 1px;
    border-bottom:none;
    color:#3F3F3F;
    float:left;
    margin-left:10px;
    padding:2px;
    text-decoration:none;
    font-size:15px; letter-spacing:3px;
}

#nav2 li a:hover {
    background:#E1E1E1;
    border:1px solid #CDCDCD;
    border-bottom:none;
}

#besucher {
    background:orange;
    border:#787878 solid 1px;
    border-bottom:none;
    color:#3F3F3F;
    float:right;
    margin-right:10px;
    padding:2px;
    font-size:16px; letter-spacing:3px;
}

#copyright {
    margin:0px 0px 0px 40px;
    padding:2px;
    float:left;
    font-size:16px; letter-spacing:3px; font-family:Courier New;
}

danke für alle die helfen
mfg
marvin
 
Hallo,
Das ist ein Problem der absoluten Positionierung.
Wenn du dein Content-Div relativ positionierst und über margin:0 auto; zentrierst, passiert dieses nicht. Jedoch wirst du dann ein wenig Mühe haben vertikal zu zentrieren. Würde aber eher darauf verzichten, als irgendwelche Workarounds und Hacks anzuwenden, die mehr schlecht als recht funktionieren.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück