Wiedereinmal diese leidliche Positionierung

vegan

Es tut mir echt leid dass ich sowas fragen muss aber CSS Positionierung und ich sind keine Freunde und werden es wohl auch nichtmehr.

Ich habe einen header, der sich über die gesamte breite des Browsers erstreckt. Diesem folgt ein div Container, in dem sich der Content befindet.
Die Idee ist dass der header immer an der Oberkante des Browsers bleibt und der Content beim scrollen hinter dem header hinweg scrollt. Der header hat zudem noch eine Deckkraft von 90%, sodass man den dahinter weg scrollenden Content leicht hindurch sieht. Hierfür habe ich natürlich den header fixed positioniert und das mit dem dahinter weg scrollen klappt einwandfrei.
Mein Problem:
Wenn man die Seite aufruft, ist der Content gleich zu Beginn hinter dem header, also hinter dem leicht transparenten Teil. Das soll so natürlich nicht sein. Der Content soll sich unter dem header befinden und erst beim scrollen hinter dem header verschwinden.
Ich habe schon alle möglichen Positionierungen an allen möglichen Elementen, mit verschiedensten margins ausprobiert, nichts funktioniert.

Wie würdet ihr ein Element nach einem "position: fixed" Element positionieren, sodass es sich nicht schon beim Aufrufen der Seite überlagert.
Kleiner zusätzlicher Haken: Die Seite soll responsive sein und wenn ich es mit einem margin versuche soweit nach unten zu schieben bis es unter dem header ist, habe ich das Problem, sobald ich die Browsergröße verändere verschiebt sich alles und passt nicht mehr.

Danke schonmal im Vorraus.

Kemos

Code?

Ohne zu wissen was du geschrieben hast kann dir hier keiner helfen.

explanator

Du musst dem Content der nach dem Header folgt einen Abstand in der Grösse der Headerhöhe mitgeben. Entweder margin-top oder padding-top verwenden, je nach Anwendungsfall.

Das ist nur grob der Ansatz. Wenn es sich verschiebt wie du sagst, dann packe die Seite auf einen Webspace online und teile uns den Link mit, damit wir uns das mal ansehen können.

Ansonsten ist noch zu sagen, immer den Validator verwenden um Fehler im anzeigen zu lassen: http://validator.w3.org/unicorn/

vegan

Ok, hier mein markup:

HTML

<body>
    <header>

        <div class="headWrapper">
            <h1>Dies ist ein Test</h1>
            <nav class="navMain">
                <a href="#" class="red">link1</a>|
                <a href="#">link2</a>|
                <a href="#">link3</a>
            </nav>
            <div class="line"></div>
            <h1>für ein Logo</h1>
            <nav class="navMain">
                <a href="#">link1</a>|
                <a href="#">link2</a>|
                <a href="#">link3</a>|
                <a href="#">link4</a>
            </nav>
        </div>

    </header>



        
    <div class="warning">
        <p>Bitte beachten Sie, dass Sie Javascript aktiviert haben sollten.</p>
    </div>


    <div class="gallery">

        <a href="images/work/ph.jpg" data-lightbox="Test" title="Platzhalter"><img src="images/thumbs/bw/ph.jpg"></a>
        <a href="images/work/ph.jpg" data-lightbox="Test" title="Platzhalter"><img src="images/thumbs/bw/ph.jpg"></a>
        <a href="images/work/ph.jpg" data-lightbox="Test" title="Platzhalter"><img src="images/thumbs/bw/ph.jpg"></a>
        <a href="images/work/ph.jpg" data-lightbox="Test" title="Platzhalter"><img src="images/thumbs/bw/ph.jpg"></a>
        <a href="images/work/ph.jpg" data-lightbox="Test" title="Platzhalter"><img src="images/thumbs/bw/ph.jpg"></a>
        <a href="images/work/ph.jpg" data-lightbox="Test" title="Platzhalter"><img src="images/thumbs/bw/ph.jpg"></a>
        <a href="images/work/ph.jpg" data-lightbox="Test" title="Platzhalter"><img src="images/thumbs/bw/ph.jpg"></a>
        <a href="images/work/ph.jpg" data-lightbox="Test" title="Platzhalter"><img src="images/thumbs/bw/ph.jpg"></a>
        <a href="images/work/ph.jpg" data-lightbox="Test" title="Platzhalter"><img src="images/thumbs/bw/ph.jpg"></a>
        <a href="images/work/ph.jpg" data-lightbox="Test" title="Platzhalter"><img src="images/thumbs/bw/ph.jpg"></a>
        <a href="images/work/ph.jpg" data-lightbox="Test" title="Platzhalter"><img src="images/thumbs/bw/ph.jpg"></a>
        <a href="images/work/ph.jpg" data-lightbox="Test" title="Platzhalter"><img src="images/thumbs/bw/ph.jpg"></a>
        <a href="images/work/ph.jpg" data-lightbox="Test" title="Platzhalter"><img src="images/thumbs/bw/ph.jpg"></a>
        <a href="images/work/ph.jpg" data-lightbox="Test" title="Platzhalter"><img src="images/thumbs/bw/ph.jpg"></a>



    </div>


    


    <script type="text/javascript" src="js/hover.js"></script>
    <script type="text/javascript" src="js/hide.js"></script>
</body>

Alles anzeigen

Und hier mein stylesheet:

Code

@charset "UTF-8";
/* CSS Document */




/*Reset*/
* {padding: 0; margin: 0;}
ul, ol, li {list-style: none;}
a {text-decoration: none; color: #000;}
img {border: none;}
body {font-family: Arial, Verdana, sans-serif;}




.red {color: red;}




/*--------------------------- Hover ----------------------------------*/
/*------------------ handles the effect of hover.js ------------------*/


.hover {color: red; font-weight: bold;}








/*--------------------------- Header ---------------------------------*/


header {width: 100%; padding: 1%; position: fixed; font-size: 1.2em; background: white; opacity: 0.9;}
header h1 {margin: 0 0 0 5%; font-family: Amatic; font-size: 3em; display: inline;}
.navMain {margin: 0 0 0 15%; display: inline;}
.navMain a {margin: 1%;}
.line {width: 95%; height: 2px; margin: 0.5% auto; background: black;}












/* ------------------------ Warning ----------------------------------*/
.warning {width: 80%;  margin: 12% 10%; padding: 0.5%; position: absolute; color: white; text-align: center; background: red;}




 








.gallery {width: 100%; height: 100%; overflow: hidden;}
.gallery img {width: 20%; font-size: 0px; float: left;}




@media screen and (max-width: 1400px){


.gallery img{width: 25%;}


}

Alles anzeigen

Kemos

bei body nimmste noch ein margin-top:10em;
Bei Header musste noch die Positionsangaben mit angeben: top:0;

Code

@media screen and (max-width: 1400px){


.gallery img{width: 25%;}


}

wasn das?

EDIT: wenn du spezielle Schriftarten verwenden willst musst du diese in der css einbinden,
sonst wird sie beim Besucher nicht dargestellt, wenn er sie nicht installiert hat.

https://www.google.com/search?q=css%2…inden&hl=de

vegan

Zitat von Kemos

bei body nimmste noch ein margin-top:10em;
Bei Header musste noch die Positionsangaben mit angeben: top:0;

Danke funktioniert wunderprächtig, da wäre ich aber auch so schnell nich drauf gekommen.

Zitat von Kemos

Code

@media screen and (max-width: 1400px){


.gallery img{width: 25%;}


}

wasn das?

Das is dafür da, das Design je nach Bildschrimgröße anzupassen. Bis zu einer Bildschirmbreite von 1400px werden 4 Bilder pro Reihe angezeigt. Darüber hinaus jemeils 5 Bilder pro Reihe.

Zitat von Kemos

EDIT: wenn du spezielle Schriftarten verwenden willst musst du diese in der css einbinden,
sonst wird sie beim Besucher nicht dargestellt, wenn er sie nicht installiert hat.

https://www.google.com/search?q=css%2…inden&hl=de

Ja, für das Beispiel war ich jetzt zu faul die Typo mit einzubinden, weil sie für die funktionalität nicht wichtig ist. Ich bin mir aber über die Problematik bewusst, danke

Tags