Blocks sollen sich nicht überschneiden
Verfasst: 12.12.2009 13:30
Hallo,
Habe ein kleines Problemchen und weiß nicht ob das überhaupt so geht wie ich mir das vorstelle.
Habe zwei Block-Elemente (fest1 und fest2) die links fest sind (absolute), und in der Mitte einen Block (page) der variabel ist (relative).
Soweit alles ok. Nur wen ich das Browserfenster kleiner mache dann geht natürlich der Block aus der Mitte in die festen linken Blocks hinein.
Wie bekomme ich das hin das der Mittlere Block beim verkleinern des Browserfensters nur bis an die linken Blocks geht so das die sich nicht überschneiden.
Geht das überhaupt ?
Ich hoffe das ich mich verständlich ausgedrückt habe.
Gruß Ralf
Habe ein kleines Problemchen und weiß nicht ob das überhaupt so geht wie ich mir das vorstelle.
Habe zwei Block-Elemente (fest1 und fest2) die links fest sind (absolute), und in der Mitte einen Block (page) der variabel ist (relative).
Soweit alles ok. Nur wen ich das Browserfenster kleiner mache dann geht natürlich der Block aus der Mitte in die festen linken Blocks hinein.
Wie bekomme ich das hin das der Mittlere Block beim verkleinern des Browserfensters nur bis an die linken Blocks geht so das die sich nicht überschneiden.
Geht das überhaupt ?
Ich hoffe das ich mich verständlich ausgedrückt habe.
Code: Alles auswählen
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test DEMO</title>
<style type="text/css">
BODY {
background: #FFFFFF;
}
#page {
z-index: 2;
position: relative;
margin: auto;
top:2px;
width: 600px;
padding: 5px;
background: #000000;
font-size: 12px;
color: #AAAAAA;
opacity: 0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);
}
P.larger-size { font-size: 16px; }
#page STRONG { color: #FFFFFF; }
</style>
<style type="text/css">
#fest1 {
z-index: 3;
position: absolute;
margin: auto;
top:10px;
left:20px;
width:180px;
padding: 5px;
background: #000000;
font-size: 12px;
color: #AAAAAA;
opacity: 0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);
}
</style>
<style type="text/css">
#fest2 {
z-index: 4;
position: absolute;
margin: auto;
top:200px;
left:20px;
width:180px;
padding: 5px;
background: #000000;
font-size: 12px;
color: #AAAAAA;
opacity: 0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);
}
</style>
</head>
<body>
<div id="fest1"> <p>Diese linke Spalte 1 hier ist fest(fixed)</p></div>
<div id="fest2"> <p>Diese linke Spalte 1 hier ist fest(fixed)</p></div>
<div id="page">
<h1>Diese Spalte ist in der Mitte und variable(relative)</h1>
<p class="larger-size">
<strong>XXXXXXX XXXXXXXX XXXXXXXXXXXXX XXXXXXX XXX.</strong><br/>
<a href="http://Bla Bla Bla.com/">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXx</a>
</p>
<p><hr /></p>
<p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </p>
<p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </p>
<p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </p>
<p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </p>
<p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </p>
<p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </p>
<p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </p>
</div>
</body>
</html>