nicht angemeldet
Scrollbalken dauerhaft einblenden bei Overflow:auto
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>
-
Hi!
Ihr seid meine letzte Hoffnung... Ich hoffe irgendjemand hierkann mir irgendwie weiterhelfen D:
Help me Obi Wan Kenobi. Yourmy only hope!
Zu Deinem 'Problem' frage ich dich, warum Du 'overflow:auto' benutzt, wenn du die Scrollbalken immer eingeblendet haben moechtest.
Dann frage ich dich mal so allgemein:
Warum hast'n das ganze CSS in der HTML Datei? Raus damit in eine externe Datei.Warum hastn da soviele Divs? Welchen Sinn haben denn die Wrapper? Ich sehe da immer nur ein element in jedem DIV. Wozu also der ganze Kram?
Deine Seite koennte so aussehen:
<body>
<div id='text'>
</div>
<div id='header'>
</div>
<div id='footer>
</div>
</body>Ein Header unter dem Content ist ungewoehnlich. Warum dies? Damit ein Screenreader erstmal Content liest, bevor die Navi kommt?
Und was macht ein <div> inmitten eines <ul> zwischen den <li>?