Ergebnis 1 bis 6 von 6

Thema: Wiedereinmal diese leidliche Positionierung

  1. #1
    Youngster
    Registriert seit
    05.12.2013
    Beiträge
    15
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard Wiedereinmal diese leidliche Positionierung

    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.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Teeny
    Registriert seit
    06.01.2014
    Beiträge
    27
    Danke
    1
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Wiedereinmal diese leidliche Positionierung

    Code?

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

  3. #3
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Wiedereinmal diese leidliche Positionierung

    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/

  4. #4
    Youngster
    Themenstarter

    Registriert seit
    05.12.2013
    Beiträge
    15
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Wiedereinmal diese leidliche Positionierung



    Ok, hier mein markup:
    HTML-Code:
    <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>
    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%;}
    
    }
    Geändert von vegan (27.01.2014 um 01:29 Uhr)

  5. #5
    Teeny
    Registriert seit
    06.01.2014
    Beiträge
    27
    Danke
    1
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Wiedereinmal diese leidliche Positionierung

    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%...nden&amp;hl=de
    Geändert von Kemos (26.01.2014 um 23:47 Uhr)

  6. #6
    Youngster
    Themenstarter

    Registriert seit
    05.12.2013
    Beiträge
    15
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Wiedereinmal diese leidliche Positionierung

    Zitat Zitat von Kemos Beitrag anzeigen
    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 Zitat von Kemos Beitrag anzeigen
    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 Zitat von Kemos Beitrag anzeigen
    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%...nden&amp;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

Ähnliche Themen

  1. CSS Positionierung
    Von jensnrw im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 17.05.2009, 18:32
  2. CSS Positionierung
    Von JackD im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 27.03.2008, 14:13
  3. Html,Css Frage (wiedereinmal von mir)
    Von Martin279 im Forum HTML & CSS Forum
    Antworten: 24
    Letzter Beitrag: 14.04.2007, 17:41
  4. Positionierung
    Von happychillkroete im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 24.09.2006, 18:56
  5. css positionierung
    Von im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 11.01.2005, 20:24

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •