Hi,
habe soeben ein Layout fertig gestellt. Nur leider habe ich einen Fehler drin.
Wenn der Text bzw. content im
HTML-Code:
<div class="content-textarea">
länger wird als der Browser hoch ist, sodass scrollbars entstehen, dann wird mir mein container etwas nach links versetzt.
So siehts bei wenig content aus:
So siehts mit viel content aus:
Der gesamte Quelltext (css in html) befindet sich hier:
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>test</title>
<style type="text/css">
* {
border:0px solid #eee;
list-style:none;
}html, body {
//background: url(bg.jpg) no-repeat;
//background-position: center center;
//background-attachment: fixed;
//background-color: grey;
top: 0px;
margin: 0px;
paddin: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
#bg-trans {
background: url(img/w55.png) repeat;
//background-color: white;
width: 100%;
min-height: 100%;
height: auto;
top: 0px;
left: 0px;
margin-top: 0px;
margin-left: 0px;
position: absolute;
}
#main {
background-color: green;
width: 900px;
//height: auto;
//min-height: 500px;
//margin-top: 0px;
//position:absolute;
//left: 50%;
//margin-left:-450px;
position: relative;
margin: 0 auto;
//margin-left: auto;
//margin-right: auto;
font-family: "Arial Narrow", Arial, sans-serif;
//overflow:hidden;
}
#logo {
background: url(img/logo.png) no-repeat;
margin-top: 15px;
margin-left: 15px;
margin-right: 30px;
width: 196px;
height: 60px;
display: block;
float: left;
}
#header {
background-color: white;
width: 900px;
height: 90px;
top: 0px;
left: 50%;
margin-top: 0px;
margin-left: -450px;
position: fixed;
}
#nav {
//background-color: white;
width: 100%;
height: 100%;
text-transform: uppercase;
}
.nav-item {
margin-top: 25px;
margin-right: 25px;
float: left;
}
#header-flow {
background: url(img/h2.png) repeat-x;
width: 100%;
height: 25px;
}
#main-content {
background: url(img/w85.png) repeat;
//background-color: blue;
width: 900px;
height: auto;
min-height: 380px;
padding: 0px;
margin-top: 90px;
}
.content-textarea {
width: auto;
height: auto;
min-height: 380px;
padding: 10px;
}
#footer {
width: auto;
height: 25px;
padding: 25px;
text-align: center;
}
/*bg-size*/
#bg,#bg table,#bgtd,#content {
width:100%;
height:100%;
overflow:hidden;
display: block;
}
#bg div {
position:absolute;
width:200%;
height:200%;
top:-50%;
left:-50%;
}
#bg img {
min-height:50%;
min-width:50%;
margin:0 auto;
display:block;
}
#content {
position:absolute;
top:0;
left:0;
z-index: 100;
overflow:auto;
}
/*bg-size*/
</style>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="style_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="content">
<!-- <div id="bg-trans"> -->
<div id="main">
<div id="main-content">
<div class="content-textarea">
<p>Hello<br />
<img alt="background" src="img/bg.jpg" height="250px" width="400px" style="padding: 0px 25px 10px 0px; float: left" />
Wir sind bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</p>
<p><strong>TEST & TEST:</strong> Sie haben eine Idee?</p>
<p><strong>TEST & TEST:</strong> Sie haben eine Idee?</p>
</div>
</div>
<div id="footer">Impressum
</div>
</div>
<!-- </div> -->
<div id="header">
<a id="logo" href="www.google.de" target="_self"></a>
<div id="nav">
<div class="nav-item">
<a href="http://www.google.de" target="_self">Link</a>
</div>
<div class="nav-item">
<a href="http://www.google.de" target="_self">Link</a>
</div>
<div class="nav-item">
<a href="http://www.google.de" target="_self">Link</a>
</div>
<div class="nav-item">
<a href="http://www.google.de" target="_self">Link</a>
</div>
<div class="nav-item">
<a href="http://www.google.de" target="_self">Link</a>
</div>
</div>
<div id="header-flow">
</div>
</div>
</div>
<div id="bg">
<div>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="background" src="img/bg.jpg" />
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Mittels google bin ich hierauf gestoßen, was mir allerdings auch nicht viel weiter hilft. Weiß jmd von euch wie ich das lösen kann?
Liebe Grüße