2 x Div's überlappend browserzentriert, 1x scrollbar 1x fixed top

ringelwürmsche · 04.08.2007, 19:19

Hallöle,

Vielleicht kann Jemand mir bei meinem Problem weiterhelfen.
Ich möchte zwei Div’s die genau übereinander liegen browserzentriert positionieren.
Das untere Div soll dabei scrollbar (Content) und das obere static (Navigation/Logo) sein.

Ich habe bereits die verschiedensten Reihenfolgen der Div’s sowie backround: static/fixed/relative und background-attachement:fixed ... ausprobiert.
Vielleicht mache ich bei der Strukturierung der CSS .. generell etwas falsch.

Weiter unten der letzte Stand des Quellcodings.
Im Anhang der Versuch dieses Problem grafisch darzustellen.

Ich danke schon hier an dieser Stelle für die Bemühungen mir zu helfen

Ringelwürmsche

CSS:

<style type="text/css"></style>

HTML:
<body>
<div id="layer2"><span style="font-weight:bold;"></span><img src="verticalcontent.jpg" width="122" height="624"></div>
<div id="layer1"><span style="font-weight:bold;"></span><img src="header2_1.gif" width="600" height="326"></div>
</body>

ringelwürmsche · 04.08.2007, 20:48

uuuuuuuuuups...

habe einer der falschen Codes reingepostet ...

hier der letze Versuch:

CSS:

<style type="text/css"></style>

HTML:
<body>
<div id="layer2"><span style="font-weight:bold;"></span><img src="/verticalcontent.jpg" width="122" height="624"></div>
<div id="layer1"><span style="font-weight:bold;"></span><img src="header2_1.gif" width="600" height="326"></div>
</body>

Mich@el · 05.08.2007, 00:29

n´Abend ringelwürmsche.
Der IE interpretiert grds. kein position:fixed;

Und um das "grds." zu relativieren gibt´s einen Workaround.

Grüße
Michael

Sand*mann · 05.08.2007, 11:38

Zitat:

Zitat von Mich@el

n´Abend ringelwürmsche.
Der IE interpretiert grds. kein position:fixed;

Und um das "grds." zu relativieren gibt´s einen Workaround.

Grüße
Michael

Schreib's dir doch einfach in deine Signatur, das spart bestimmt Zeit.

Mich@el · 05.08.2007, 23:12

Zitat:

Zitat von Sand*mann

Schreib's dir doch einfach in deine Signatur, das spart bestimmt Zeit.

Ja echt! Das war an diesem Tag 3x, dass ich auf diesen Workaround hingewiesen habe. Dachte schon, dass ein position: fixed; Virus ausgebrochen ist.

ringelwürmsche · 05.08.2007, 23:53

Hallöle Ihr Zwei,

danke für den Link, den hätte ich wahrscheinlich nie gefunden, da ich bereits beim Münz auf seiner Selfhtml-Seite war wegen diesem Problem

Ich werde es morgen gleich ausprobieren, ob dies auch für überlappende browserzentrierte Bereiche geht.

Vielen Dank aber ersteinmal an dieser Stelle. Ich werde das Ergebnis dann hier posten, damit die künftigen Leute gleich eine Lösung haben

Grüsse

Ringelwürmsche

kadees · 06.08.2007, 08:23

@ Mich@el:

Zitat:

Der IE interpretiert grds. kein position:fixed;

Diese Aussage stimmt nicht ganz, der IE bis Version 6 kann schon position: fixed;, allerdings beschränkt sich diese Fähigkeit ausschließlich auf den body-Tag. Beispiel

Sand*mann · 06.08.2007, 15:54

Background-attachment hat aber nichts mit position:fixed zu tun.
Den das eine bezieht sich halt nur auf eine Hintergrundgrafik, das andere auf jedes x-beliebige Element. Und letzteres kann der IE ohne Tricks defakto nicht.

ringelwürmsche · 10.08.2007, 18:55

Hallöle,

habe hier nun ein vorläufiges Ergebnis. Vielleicht könnt Ihr mal drüber schaun, ob man dies nicht eleganter machen kann und das CSS so OK ist. (Ich finde das CSS zu lang, weis aber nicht wo ich kürzen könnte

)

Vielen Dank im voraus

Ringelwürmsche

CSS:

<style type="text/css">

* {
margin:0; padding:0;
}

img {
border:0;
}

body {
font:normal 12px Verdana, Arial, Helvetica, sans-serif;
color: black;
text-decoration: none;
background-color: white;
/* Mindestbreite verhindert Anzeigefehler in modernen Browsern */
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#fixiert {
width: 122px;
height: 624px;
top: 0;
left:50%;
vertical-align: middle;
margin-left: -60px;
background-color:#ccc;
border: 0;
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
html>body #fixiert{ /* nur fuer moderne Browser! */
position: fixed;
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#Inhalt {
min-height:244px;
width: 600px;
margin: 0 auto;
}

#header {
width: 600px;
height: 326px;
margin: 0 auto;
background-color:#999;

}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#spalte1{
width: 236px;
height: 224px;
margin-bottom: 10px;
margin-right: 4px;
margin-top: 0;
margin-left: 0;
float: left;
overflow: hidden;
background-color:#666;

}

#text1 {
text-align:center;
list-style-type:none;
padding:20px 10px 20px 10px;
border:0;
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#spalte2{
width:122px;
height: 224px;
margin-bottom: 10px;
margin-right: 4px;
margin-top:0;
margin-left:0;
float:left;
overflow: hidden;
}

#text2 {
text-align:center;
list-style-type:none;
padding:0;
border:0;
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#spalte3{
width:234px;
height: 224px;
margin-bottom: 10px;
margin-right: 0;
margin-top:0;
margin-left:0;
float:left;
overflow: hidden;
background-color:#666;
}

#text3 {
font: normal 12px Verdana, Arial, Helvetica, sans-serif;
text-align: left;
list-style-type: none;
text-decoration: none;
padding: 20px 10px 20px 10px;
border: 0;
}

#text3 li {
padding-bottom:5px;
margin:0;
}

ul#text3 a {
font-weight: bolder;
text-decoration: none;
letter-spacing: 2px;
color: #000;
display: block;
padding: 2px;
background: #fff;
border: 1px solid #fff;
}

ul#text3 a:link {
color: black; background-color: #666;
border: 1px dotted #666;
}

ul#text3 a:visited {
color: black; background-color: #666;
border: 1px solid #666;
}

ul#text3 a:hover {
color: #8e0000; background-color: #ffbe00;
border: 1px solid #666;
}

ul#text3 a:active {
color: black; background-color: #666;
border: 1px solid #000;
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

h1 {
font-size: 14px;
text-align: left;
background-color: #fff;
color: #8e0000;
height:54px;
width: 600px;
margin: 0 auto 0 auto;
border: 0;
}

h2 {
font-size: 12px;
text-align: left;
background-color: #666;
color: #8e0000;
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#footer {
font: 9px Verdana, Arial, Helvetica, sans-serif;
color: #ccc;
width: 600px;
height: 25px;
margin: 0 auto 0 auto;
background-color: #fff;
border: none;
text-align: right;
padding-top: 8px;
padding-right: 10px;
clear: both;
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#Navigation {
padding: 0;
background-attachment: fixed;
background-repeat: no-repeat;
list-style-type: none;
}

li#release {
padding-left: 0;
padding-top: 30px;
top: 0;
left: 0;
}

li#tour_dates {
padding-left: 0;
position: absolute;
padding-bottom: 30px;
left: 0px;
bottom: 0px;
}

</style>

Html:
<body>
<div id="content">

<h1>Header 1</h1>
<div id="header">Header </div>
<div id="Inhalt">
<div id="spalte1">
<ul id="text1">

<li><a href="#" target="_blank">Content 1</a></li>


<li></li>


<li></li>

</ul>
</div>
<div id="spalte2">
<ul id="text2">
<li></li>
</ul>
</div>
<div id="spalte3">
<ul id="text3">
<h2>Content 2</h2>

<li><a href="#" target="_blank">button 1</a></li>


<li><a href="#" target="_blank">button 2</a></li>


<li><a href="#" target="_blank">button 3</a></li>


<li><a href="#" target="_blank">button 4</a></li>


<li></li>


<li></li>

</ul>
</div>
</div>
</div>
<div id="footer">© 2007 Ringelwurm</div>

<div id="fixiert">
<ul id="Navigation">
<li id="release"><a href="#" target="_blank">release</a></li>
<li id="tour_dates"><a href="#" target="_blank">tour dates</a></li>
</ul>
</div>
</body>