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&ouml;glichkeit sich &uuml;ber unsere Praxis zu informieren. </span></p>
<p class="Stil8">Bei Fragen stehen wir Ihnen w&auml;hrend der Sprechzeiten gerne zur Verf&uuml;gung.</p>
<blockquote>
<p class="Stil8">-Ihr Praxisteam</p>
</blockquote>
<p class="Stil8">&nbsp;</p>
<p align="right" class="Stil9">&nbsp;</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
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&ouml;glichkeit sich &uuml;ber unsere Praxis zu informieren. </span></p>
<p class="Stil8">Bei Fragen stehen wir Ihnen w&auml;hrend der Sprechzeiten gerne zur Verf&uuml;gung.</p>
<blockquote>
<p class="Stil8">-Ihr Praxisteam</p>
</blockquote>
<p class="Stil8">&nbsp;</p>
<p align="right" class="Stil9">&nbsp;</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