✔ Divs verschieben sich? (Layout Problem)

C

Cantara

Grünschnabel
Einen schönen guten Abend,

ich habe ein Problem und zwar folgendes:
Auf Vollbild ist das Design einwandfrei zu betrachten. Wenn nun jemand aber eine größere Bildschirmauflösung hat (also einen zu kleinen Bildschirm) oder das Design halt sonst irgendwie gescrollt werden muss, dann bricht alles auseinander!

Hier ein Screenshot wenn es verschoben ist.

Und so sollte der Hof aussehen: Screen zeigen

Und für alle, die sich gleich drauf stürzen wollen, mein etwas komischer Code ;)

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link type="text/css" href="1.css" rel="stylesheet" media="screen" />
<title>Reitstall Moorwiesen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#82A68E" >


<?
echo "
<div style='height: 30px; width: 140px; position: absolute; top: 570px; left: 665px; border: 0px solid; overflow: auto;'>
<a href='/mineklein/' target='_parent'>C l e a r</a></div>



<div style='height: 160px; width: 140px; position: absolute; top: 425px; left: 430px; border: 0px solid; overflow: auto;'>
Hier die Navigation
</div>


<div style='height: 20px; width: 400px; position: absolute; top: 570px; left: 40px; border: 0px solid; overflow: auto;'>
Hier ist wer online ist
</div>


<div style='height: 400px; width: 370px; position: absolute; top: 25px; left: 416px; border: 0px solid; overflow: auto;'>
Hier ist der Pfad zu der Karte (habe ich jetzt rausgenommen)
</div>";


$name = $_SESSION[name];
if ($name == '')
{
echo "<div style='position: absolute; left: 435px; top: 25px; background: url(bilder/transpa.png); height: 19px; border: 1px solid; padding: 2px;'> <form action='logged.php?seite=$_GET[seite]' method='post'>Name: <input type='text' name='name' style='width: 80px;'> &nbsp; Passwort: <input type='password' name='passwort' style='width: 80px;'> &nbsp; <input type='submit' value='Login'></form></div>";
}
else
{
echo "<div style='position: absolute; left: 717px; top: 25px; background: url(bilder/transpa.png); height: 19px; border: 1px solid; padding: 2px;'> <form action='logout.php' method='post'><input type='submit' value='Logout'></form></div>";
}
?>

</body>
</html>


Und für alle dies auch wissen wollen, hier mein CSS Code 1.css
PHP: 
body {
background-color: #;
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#688672;
padding:0px;
margin:2px;
background-image:url(hintergrund.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
}

table {
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#688672;
}

a {color: #688672;}
a:visited {color:#688672;}
a:hover {color: #000000;}
a:active { color:#688672;}


h1 {
font-size: 12px;
color: #688672;
text-transform:uppercase;
border-top:1px solid #82A68E;
border-bottom:1px solid #82A68E;
padding:5px 15px;
margin:0px;
letter-spacing: 5px;
}

h2 {
font-size:20px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}

h4 {
font-size: 12px;
color: #688672;
text-transform:uppercase;
padding:5px 15px;
margin:0px;
letter-spacing: 5px;
}

select {
font-size: 12px;
color:#000;
background-color: #9BBCA6;
border:1px dotted #000;
margin:0px;
}

textarea {
font-size: 12px;
color:#000;
background-color: #9BBCA6;
border:1px dotted #000;
margin:0px;
}

input {
font-size: 12px;
color:#000;
background-color: #9BBCA6;
border:1px dotted #000;
margin:0px;
}
 
Hi,

ich empfehle hier, das bestehende Layout in ein übergeordnetes DIV einzubetten, und dieses mit einer Mindestbreite min-width zu versehen - beispielsweise:

HTML: 
<body>
    <div id="wrapper">
        <!-- Hier folgt der Bestand -->
    </div>
</body>
CSS: 
#wrapper {
position:relative; /* relative Positionierung, damit sich die absoluten Positionsangaben darin relativ verhalten */
width:100%;
min-width:900px; /* min-width-Wert ist von mir hier frei gewählt */
}

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück