nicht angemeldet
Heya :)
Bin grad am basteln meiner ersten Homepage und stecke verzweifelt bei folgendem Problem fest:
Vorgestellt hab ich mir ein zentriertes, für 800px breite optimiertes Layout bei dem nur der Content scrollbar ist und das natürlich in allen Browsern läuft.
Nach nächtelangem Basteln und eine Woche vor dem Abgabetermin hab ich jetzt bemerkt das der Scrollbalken bei overflow:auto anders als bei overflow:scroll selbstverständlich verschwindet sobald er unnötig wird.
Das Problem ist jetzt das ich nicht mein eigendliches Contentlayer scrollbar gemacht habe, sondern einen drüber liegenden Wrapper :S sich der Contentbereich also um 8px verschiebt sobald der Scrollbalken "verschwindet".
Ich denke die einfachste Lösung wäre das overflow:auto irgendwie in den contentlayer (#text) zu bekommen wobei ich aber immer Probleme mit der Zentrierung des selbigen bekomme...
Ihr seid meine letzte Hoffnung... Ich hoffe irgendjemand hierkann mir irgendwie weiterhelfen D:
gruss,
Joh
Quellcode:
<!--Force IE6 into quirks mode with this comment tag-->
<!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" xml:lang="en" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Johannes - Kontakt</title>
<style type="text/css">
body {
margin:0;
border:0;
padding:0;
height:100%;
max-height:100%;
overflow: hidden;
background:black;
}
/* IE Hack */
* html body {
padding:70px 0 20px 0;
text-align: center;
width: 100%;
}
#contentwraper {
position:fixed;
top:70px;
left:0;
bottom:20px;
right:0;
overflow:auto;
background:black;
padding:0;
}
* html #contentwraper{
height:100%;
width:100%;
}
#content{
width:798px;
text-align:left;
margin:0 auto;
top:0px;
bottom:1px;
}
#text{
position:relative;
left:8px; /*scrollbalkenausgleich :(*/
width:796px;
top:0px;
bottom:1px;
background:#fff;
border-left:2px solid #b3c2df;
border-right:2px solid #b3c2df;
}
* html #text{
width:800px;
}
#headerwreaper {
position:absolute;
top:0;
left:0;
width:100%;
overflow:hidden; /*leider notwendig da Pixel seltsam addiert werden*/
text-align:center;
}
* html #headerwreaper {
height:70px;
width:100%;
}
#header{
text-align:left;
margin:0 auto;
background:url(banner.jpg);
width:800px;
height:70px;
top:0;
}
* html #header{
position:absolute;
left:50%;
top:0;
margin-left:-443px;
overflow:hidden;
height:70px;
width:800px;
}
#footerwraper{
position:absolute;
bottom:0;
left:0;
width:100%;
text-align:center;
overflow:hidden;
}
* html #footerwraper {
height:20px;
width:100%;
}
#footer {
text-align:left;
margin:0 auto;
width:800px;
height:20px;
background: url("footerbackgr.GIF")
repeat-x 20px;
overflow:hidden;
bottom:0;
}
* html #footer{
position:absolute;
left:50%;
top:0;
margin-left:-400px;
overflow:hidden;
height:20px;
width:800px;
}
.icon{
margin-left: 15px;
}
#navi{
position:relative;
top:-16px; /*setzt bei ff. bei -20 und ie7 bei 0 an...GELÖST durch hack unten*/
left:0;
width: 100%;
height: 20px;
background: url("Navbackgr.GIF")
repeat-x 20px;
}
* html #navi {height:20px;
top:-4px;}
#navi a{
color: #092c6f;
text-decoration: none;
display: block;
width: 120px;
}
#navi li#aktiv, #navi a:hover {
background: url("navbackgractive.gif")
repeat-x 20px;
}
#navi ul li{
list-style-type: none;
display: block;
float: left;
font: 10px/20px "Lucida Grande", verdana, sans-serif;
text-align: center;
}
#navi #navitrenner a{
border-left: 1px solid #3b64b4;
}
</style>
</head>
<body>
<div id="contentwraper">
<div id="content">
<div id="text">
blaaaaaaaaaaa<br>blaaaaaaaaaaaaa<br>blaaaaaaaaaaaaaaa<br>
blaaaaaaaaaaa<br>blaaaaaaaaaaaaa<br>blaaaaaaaaaaaaaaa<br>
blaaaaaaaaaaa<br>blaaaaaaaaaaaaa<br>blaaaaaaaaaaaaaaa<br>
blaaaaaaaaaaa<br>blaaaaaaaaaaaaa<br>blaaaaaaaaaaaaaaa<br>
blaaaaaaaaaaa<br>blaaaaaaaaaaaaa<br>blaaaaaaaaaaaaaaa<br>
blaaaaaaaaaaa<br>blaaaaaaaaaaaaa<br>blaaaaaaaaaaaaaaa<br>
blaaaaaaaaaaa<br>blaaaaaaaaaaaaa<br>blaaaaaaaaaaaaaaa<br>
blaaaaaaaaaaa<br>blaaaaaaaaaaaaa<br>blaaaaaaaaaaaaaaa<br>
blaaaaaaaaaaa<br>blaaaaaaaaaaaaa<br>blaaaaaaaaaaaaaaa<br>
</div>
</div>
</div>
<div id="headerwraper">
<div id="header">
<img id="banner" border="0" alt="banner" src="banner.jpg" title="banner"/>
<div id="navi">
<ul id="naviliste">
<li><a href="persdat.htm">Persönliche Daten</a></li>
<div id="navitrenner">
<li><a href="schulbil.htm">Schulbildung</a></li>
<li><a href="berufsbil.htm">Berufsbildung</a></li>
<li><a href="praktika.htm">Praktika</a></li>
<li><a href="portofolio.htm">Portofolio</a></li>
<li><a href="unterlagen.htm">Unterlagen</a></li>
</div>
</ul></div>
</div>
</div>
<div id="footerwraper">
<div id="footer">
<img class="icon" border="0" alt="home" src="home-icon.gif" title="startpage"/>
<img class="icon" border="0" alt="mail" src="email-regular.gif" title="send mail"/>
</div>
</div>
</body>
</html>