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

Divs verschieben sich?

Cantara

Neues Mitglied
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;
}
 
Du hast 2 Denkfehler:

a) Eine Webseite passt sich nicht an eine Bildschirmauflösung sondern an den Viewport an. Das ist der Bereich den ein Browser-Nutzer dem Browser auf einem Bildschirm zugesteht. Nutzer mit einer großen Auflösung wie in deinem Beispiel könnten auch durchaus mit einem kleineren Browserfenster unterwegs sein. D.h. für Dich: deine Webseite sollte nicht an bestimmte Auflösungen angepasst sein.

b) Du verwendest absolute Positionierung um die einzelnen Bestandteile deiner Seite zusammen zu setzen. Das ist ebenfalls der falsche Weg und führt - wie Du jetzt merkst - leicht zu Problemen. Ersetze die absolute Positionierung durch nochmale Positionierungen im Textfluss. Elemente kann man mit float auch nebeneinander setzen.
 
Zurück
Oben