Anzeige - [Hier werben / Mediadaten]
(?) Tags raten (?) (edit)
 
Reply to this topicStart new topicStart Poll
Diskussion

CSS Problem: position: absolut

Thema abonnieren | Thema versenden | Thema drucken
Thomas Weil
Geschrieben am: Mi 7.01.2009, 22:15
Report PostQuote Post

AyomRank 2
****

Gruppe: Member (aktiv)
Beiträge: 12
Mitglied seit: 10.10.2007
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>




angehängtes Bild
Angefügtes Bild
Top
PMEmail Poster
Top
 
 
Christian_
#2 Geschrieben am: Mi 7.01.2009, 22:38 (+00:22)
Report PostQuote Post

AyomRank 4
********

Gruppe: Member (aktiv)
Beiträge: 168
Mitglied seit: 9.12.2005
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.
Top
PM
Top
 
Thomas Weil
#3 Geschrieben am: Mi 7.01.2009, 22:58 (+00:20)
Report PostQuote Post

AyomRank 2
****

Gruppe: Member (aktiv)
Beiträge: 12
Mitglied seit: 10.10.2007
Hallo Christian,

vielen Dank es hat funktioniert...
Top
PMEmail Poster
Top
 
Thema wird von 0 Benutzer(n) gelesen (0 Gäste und 0 anonyme Benutzer)
0 Mitglieder:
« Sprungmenü ? | Design, Content & Usability | Diskussion: RSS-Verzeichnisse »
Trackback-Url: http://www.ayom.com/track/t/27750
Dieses Thema abonnieren

Topic Options Reply to this topicStart new topicStart Poll

 


> Ähnliche Themen
Themen Titel Autor Views Antworten Letzte Aktion
Umlaut Problem mit php Felix Weber 392 13 Mo 1.03.2010, 08:59
Weniger Besucher trotz besserer Position Sebastian E 499 8 Mo 15.02.2010, 23:52
Problem mit Adwords romeodadon 559 5 So 14.02.2010, 22:43
JS Problem Sancheck 149 1 Mi 6.01.2010, 12:58
Problem Marketing für 'grenzwertige Seiten& ... Jürgen Auer 254 2 Fr 1.01.2010, 22:49
Ausgabeproblem von Ö und AJAX Problem Sancheck 211 8 Di 15.12.2009, 11:53
Joomla Templates Problem sunshinejoe 224 4 Mi 2.12.2009, 09:19
Position bei Google checken okolele 473 2 Di 17.11.2009, 19:49
Encoding Problem iso/utf8 Sandro Feuillet 330 4 Di 10.11.2009, 09:21
.htaccess Problem ajse80 196 3 Mo 2.11.2009, 05:54




Anzeige - [Hier werben / Mediadaten]



Anzeigen


[Hier werben / Mediadaten]