CSS Problem: position: absolut

T

Thomas Weil

Mitglied
Guten Abend,

ich habe eine Frage zu CSS und hoffe das ihr mir dabei helfen könnt. Ich habe eine komplette seite in ein div-tag eingebunden und sie ist soweit fertig. Jetzt wollte ich eine art Notizzettel halb über den div-tag und halb außerhalb positionieren (siehe Screenshot).
Sieht soweit auch gut aus, aber wenn ich das Browserfenster kleiner machen, verschiebt sich die Notiz nicht mit. Sie bleibt fixiert.

Hoffe ihr könnt mir helfen. Bitte nicht über die Formatierung und Anordnung der CSS-Befehle meckern. Ich weiss man könnte es übersichtlicher strukturieren.


Vielen Dank

CODE
<style type="text/css">
<!--
body {
margin:20px;
padding:0px;
text-align:center;
color: 999999;
background-color: #CCCCCC;
}

#container {
width: 700px;
margin: 0px auto 0px auto;
padding: 0px;
border: 1px solid black;

color: navy;
background-color: white;

text-align:left;
}


#nav ul {border-bottom:1px dotted #666666;}
#nav li {
padding: 0 0 6px 0;
text-transform: capitalize;
display:inline;
margin-left: 30px;

}



#nav li a{
display: inline;
margin-left: 20px;
color:#364957;
text-decoration:none;
background: url(menupic3.jpg) no-repeat left;
padding-left:15px;
}

#nav li a:hover{
color:#4B728A;
text-decoration:none;

}


.Stil1 {
font-size: 18px;
color: #999999;
}


#content {
width: 660px;
height: 400px;
margin: 40px 20px 20px 20px;
padding: 0px;


color: navy;


text-align:left;
}


#footer {
background-color:#364957;
margin:0px;

}
#footer a {
display: inline;

text-decoration:none;
font-size: 14px;
color: #FFFFFF;
text-align:right;


}
#footer li {
padding: 0 0 6px 0;
text-transform: capitalize;
display:inline;
margin-left: 10px;
text-align:right;
}

#footer ul {

text-align:right;
}
#bild {
float:left;
hight: 266px;
width: 360px;
margin:30px 5px 0px 20px;
}
.Stil5 {
color: #364957;
font-size: 18px;
}

#head {
text-align:center;


}

#text {
float:left;
margin-top:30px;
width:250px;

}
.Stil7 {
color: #364957;
font-style: italic;
font-weight: bold;
}
.Stil8 {color: #4B728A}
.Stil9 {color: #4B728A; font-weight: bold; }
.Stil10 {font-weight: bold}

#urlaub {
position: absolute;
top:100px;
left:900px;

border:none;
z-index:1;

}

-->
</style>
</head>

<body>

<div id="container"><img src="passow_01.gif" width="700" height="143" />
<div id="nav">

<ul>
<li><a href="index.html" class="Stil1">Startseite</a></li>
<li><a href="sprechzeiten.html" class="Stil1">Sprechzeiten</a></li>
<li><a href="anfahrt.html" class="Stil1">Anfahrt</a></li>
<li><a href="leistungen.html" class="Stil1">Leistungen</a></li>
</ul>
</div>


<div id="content">

<div id="head" class="Stil5"></div>
<div id="bild"> <img src="doc2.jpg"/> </div>
<div id="text">
<p><span class="Stil7">Liebe Patientin, lieber Patient,</span><br />
<span class="Stil8">auf folgenden Internetseiten haben Sie die Möglichkeit sich über unsere Praxis zu informieren. </span></p>
<p class="Stil8">Bei Fragen stehen wir Ihnen während der Sprechzeiten gerne zur Verfügung.</p>
<blockquote>
<p class="Stil8">-Ihr Praxisteam</p>
</blockquote>
<p class="Stil8"> </p>
<p align="right" class="Stil9"> </p>
</div>
</div>

<div id="footer">
<ul class="Stil10">
<li><a href="kontakt.html" >Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</div>
</div>

<div id="urlaub">
<img src="urlaub.gif" width="200" height="261"/></div>






</body>

</html>



Anhang anzeigen 2

 
Hallo Thomas,


Die position:absolute des ulaub-divs hat derzeit den body als Eltern-Element. Dadurch wird dieser div immer 100 Pixel vom Browserrand oben und 900 Pixel vom Browserrand links gesetzt.

Die bessere Alternative wäre, den urlaub-div mit Eltern-Element container-div anzulegen. Sprich:

Statt:

CODE
....
</div>
</div>

<div id="urlaub">
<img src="urlaub.gif" width="200" height="261"/></div>




CODE
....
</div>


<div id="urlaub">
<img src="urlaub.gif" width="200" height="261"/></div>
</div>



und

bei

CODE
#urlaub {
position: absolute;
top:100px;
left:900px;

border:none;
z-index:1;

}


ein overflow:visible reinsetzen sowie die Werte für left und top anpassen.

Falls es Probleme gibt, einfach noch bei der CSS-Deklaration für container-div ein position:relative; mit reinsetzen.

VG, Christian

PS: Eine solche Änderung ist allein schon deshalb erforderlich, weil die derzeitige Positionierung Deines Notizettels "zufällig" bei Deiner Auflösung passt (sieht nach 1280er oder so aus). Bei anderen Auflösungen könnte es aber aufgrund des margin: 0 auto 0 auto im container div ebenso bereits nicht passen wie bei einer Verkleinerung/Vergrößerung des Fensters.
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben