SchokoBrunnen
Mitglied
Hallo,
ich hab ein sehr großes Problem ! Ich bin gerade dabei, ein Layout zu machen und habe gemerkt das sich die Boxen total umstellen wenn ich zurückzoome.
Um euch das kurz zu zeigen, so sieht es normal aus:
aber das Problem ist, wenn ich zurückzoome (Mit STRG und zurück scrollen), verschiebt sich alles! Siehe Bild:
Da habe ich 67% zurückgezoomt.
Ich habe anderen mal den Link zu meiner Seite gegeben, damit die mir ein Feedback geben können, die haben alle gesagt, das die Boxen kreuz und quer liegen ! Schaut einfach mal kurz selbst : YOLO
Ich weiß nicht woran das liegt, aber mir wurde gesagt es liegt an positionn:absolute; , kann das sein ? Wenn das wegen dem ist, was müsste ich ändern ?
CSS Datei :
Index.html :
ich hab ein sehr großes Problem ! Ich bin gerade dabei, ein Layout zu machen und habe gemerkt das sich die Boxen total umstellen wenn ich zurückzoome.
Um euch das kurz zu zeigen, so sieht es normal aus:
aber das Problem ist, wenn ich zurückzoome (Mit STRG und zurück scrollen), verschiebt sich alles! Siehe Bild:
Da habe ich 67% zurückgezoomt.
Ich habe anderen mal den Link zu meiner Seite gegeben, damit die mir ein Feedback geben können, die haben alle gesagt, das die Boxen kreuz und quer liegen ! Schaut einfach mal kurz selbst : YOLO
Ich weiß nicht woran das liegt, aber mir wurde gesagt es liegt an positionn:absolute; , kann das sein ? Wenn das wegen dem ist, was müsste ich ändern ?
CSS Datei :
Code:
@charset "UTF-8";
/* // ---------------------------------------------------\\ */
/* // LAYOUT CODED BY || ME.AND.YOU. || HABBO.DE \\ */
/* // LAYOUT CODED BY | | SCHOKOBRUNNEN || HABBO.LC \\ */
/* // ---------------------------------------------------\\ */
/* HTML AND BODY */
html, body {
background-image: url("../images/bg.png");
}
/* DIES UND DAS */
img {
border: none;
}
#floatright {
float: right;
}
/* POSITIONEN */
#bbx {
position:absolute;
top:400px;
padding-left:200px;
}
#left {
float:left;
}
#right {
float:right;
padding-left:10px;
}
#clear {
clear:both;
}
/* CONTENTBOX */
#content-oben {
background: url('../images/Box/c_oben.png');
width: 570px;
height: 30px;
color: white;
padding-top: 15px;
padding-left:20px;
}
#content-mitte {
background: url('../images/Box/c_mitte.png');
width: 550px;
height: auto;
padding-top: 15px;
padding-left:20px;
padding-right:20px;
}
#content-unten {
background: url('../images/Box/c_unten.png');
width: 590px;
height:21px;
}
/* SUBBOX */
#sub-oben {
background: url('../images/Box/s_oben.png');
width: 250px;
height: 34px;
color: white;
padding-top: 15px;
padding-left:20px;
}
#sub-mitte {
background: url('../images/Box/s_mitte.png');
width: 230px;
height: auto;
padding-top: 15px;
padding-left:20px;
padding-right:20px;
}
#sub-unten {
background: url('../images/Box/s_unten.png');
width: 270px;
height:21px;
}
/* Shoutbox */
#shoutbox {
clear:left;
margin-top:1px;
background: url('../images/Box/shoutbox.png');
widht:813px;
height:30px;
padding:10px;
margin-left:-8px;
margin-right:-8px;
}
/* TOPNEWS */
#tpnews {
background: url('../images/Box/newsbox.png');
widht:468px;
height:115px;
margin-left:200px;
margin-right:197px;
margin-top:265px;
text-align:center;
padding-top:10px;
}
/* Navigationsleitese */
#nav {
margin-top:0px;
background: url('../images/Box/navi.png');
widht:886px;
height:45px;
text-align:center;
margin-left:200px;
margin-right:178px;
}Index.html :
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>
<title>YOLO</title>
<link icon/sharkset="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Emre" />
<meta name="description" content="Deine Habbo Fanseite. News, Infos, Badges, Möbel, Pixel, Forum und vieles mehr." />
<meta name="keywords" content="Habbo,Hotel,Habbo Hotel,Habbolc,Sulake,Fanseite,Badges,Forum,Möbel,Taler,Tauschen,Furni,News,Events,Lexikon,Fan,Pixel" />
<link type="text/css" rel="stylesheet" href="css/global.css" />
</head>
<body>
<!-- TOP NEWS ANFANG -->
<div id="tpnews">
<img src="uploads/2.png" /> <img src="uploads/2.png" /> <img src="uploads/2.png" />
</div>
<!-- TOP NEWS ENDE -->
<div id="bbx">
<!-- Rechts Anfang -->
<div id="right">
<!-- Content Box -->
<div id="content-oben">» xd
</div>
<div id="content-mitte">
<center><img src="/uploads/1.png" /></center>
<br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="content-unten">
</div>
<!-- Content Box Ende -->
</div>
<!-- Rechts Ende -->
<!-- Left Anfang -->
<div id="left">
<!-- Sub Box -->
<div id="sub-oben">» Login
</div>
<div id="sub-mitte"> <form action="index.php?page=1" method="post" name="formular"><table align="center" width="100%"><tr><td width="40%">Username:</td><td width="60%">
<input type="text" name="login_name" style="width: 95%" value="">
</td></tr><tr><td width="40%">Passwort:</td><td width="60%">
<input type="password" name="login_pass" style="width: 95%" value="">
</td></tr><tr><td colspan="2" align="center" style="padding: 5px"><input type="submit" value="Login" ></td></tr></table></form>
</div>
<div id="sub-unten">
</div>
<!-- Sub Box Ende -->
</div>
<!-- Left Ende -->
<!-- Div bbx Ende -->
</div>
<!-- Div bbx Ende-->
</body>
</html>