✔ margin-top Problem (Verschiebt komplette Seite)

Status
Nicht offen für weitere Antworten.
awortmeier

awortmeier

Erfahrenes Mitglied
Hallo,

ich habe drei (3) Elemente auf meiner Seite - Header, Content, Footer.

Nun besitzt mein Header die Positions-Eigenschaft fixed und wird mit einem Pseudoelement ( :after) abgeschlossen und gecleart.
Mein Content-Element enthält eigentlich nichts ausser einem Wrapper-Element. Dieses Wrapper-Element wird auch im Header zur mittigien Ausrichtung der Seite verwendet.

Nun gebe ich meinem Content-Element die Eigenschaft "margin-top:150px".

Daraufhin wird mein Header auch um diese 150 Pixel verschoben und ich versteh einfach nicht warum?!

Hier der CSS-Code
CSS: 
.wrapper {
   width:                 900px;
   margin:                 0 auto;
}
.header {
   position:               fixed;
   z-index:               50;
   width:                 100%;
   height:                 100px;
   color:                 #000;
   background-image:           url(../images/1x1_70_white.png);
}
.header:after {
   display:               block;
   position:               fixed;
   content:               '';
   clear:                 both;
   width:                 100%;
   height:                 1px;
   margin-top:               100px;
   background-color:           #000;
}
.content {
   margin-top:               130px;
}
HTML: 
<body>
<div class="header">
   <div class="wrapper">
     <div class="title">
       <h1>H1 Text</h1>
       <h2>H2 Text</h2>
     </div>
     <div class="menu">
       <?php if ($this->countModules('menu')) : ?>
         <jdoc:include type="modules" name="menu" style="none" />
       <?php endif; ?>
     </div>
   </div>
</div>
<div class="content">
   <div class="wrapper">Test</div>
</div>
<div class="footer"></div>
</body>

Verwendetes CMS ist Joomla in der Version 3.x

Vielen Dank für eure Hilfe und freundliche Grüße
Alex
 
Ja, die Lösung ist mir auch schon eingefallen, aber ich verstehe den Grund nicht, warum mein Content-Element verschoben wird.
 
Das hängt letztlich damit zusammen, dass der fix positionierte Header-Bereich überhaupt keine Regel zur Startposition von oben (z.B. top:0) besitzt.

Dies wäre nämlich ansonsten der zweite (alternative) Lösungsansatz.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück