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
Verwendetes CMS ist Joomla in der Version 3.x
Vielen Dank für eure Hilfe und freundliche Grüße
Alex
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