nicht angemeldet
Hi!
Ich habe hier eine Seite die Ursprünglich mal aus 3 Frames bestand. Ich wollte das ganze nun umstellen und dabei alle Tabellen und Frames loswerden. Das Grobe Layout ist so, daß alle DIVs 100% Breite haben. die oberen 3 sollen fest stehen und der vierte bei Bedarf eine vertikale Scrollbar erhalten.
<body onload="init()">
<div class="logo">
<img class="left" src="../images/wings_logo.gif"/>
<img class="right" src="../images/sun_top_logo.gif"/>
</div>
<div class="letters">
<div class="left">
<a onclick="showSection(this)" id="A">A</a>
<a onclick="showSection(this)" id="B">B</a>
:
:
<a onclick="showSection(this)" id="Z">Z</a>
</div>
<div class="right">
<a onclick="showIndex(this)" id="index">Index</a>
</div>
</div>
<div id="menu" class="menu">
</div>
<div id="content" class="content" style="clear:both">
</div>
</body>
Das CSS dazu:
body {
box-sizing:border-box;
-moz-box-sizing:border-box;
color:#35556b;
font-family:arial;
font-size:13px;
text-decoration:none;
padding:0px;
border:0px;
margin:0px;
height:100%;
}
/* the logo */
div.logo {
width:100%;
overflow: hidden;
background:url(../images/hg_top.gif) repeat-x;
}
div.logo img.left {
float: left;
vertical-align:middle;
padding: 6px 0% 0% 7%;
}
div.logo img.right {
float: right;
vertical-align:middle;
padding: 0%;
}
/* letter bar */
div.letters {
width:100%;
white-space:nowrap;
background-color:#5382a1;
overflow: hidden;
}
div.letters .left {
background-color:inherit;
float:left;
padding: 0% 0% 0% 3%;
}
div.letters .right {
background-color:inherit;
float:right;
padding: 0% 3% 0% 0%;
}
/* the background for the list of keywords */
div.menu {
width:100%;
height:5em;
background-color:#edf1f5;
overflow:auto;
padding:0px;
}
div.content {
width:100%;
overflow:auto;
}
Leider erscheint die scrollbar nicht im "content" frame sondern über die gesamte Höhe und die DIVs scrollen alle.
Kann mir jemand einen Hinweis geben?
Dankeschön!