zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navigationsleiste und Titelbild überlagern sich

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.02.2017, 15:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2017
Beiträge: 1
Alinchen befindet sich auf einem aufstrebenden Ast
Standard Navigationsleiste und Titelbild überlagern sich

Hallo!
Ich habe mich hier registriert, weil ich leider bei meiner Homepage nicht weiterkomme.
Ich stehe noch ziemlich am Anfang, was meine HTML und CSS Kenntnisse angeht und lerne noch viel dazu, kenne demnach leider auch erst relativ wenige Befehle.
Vielleicht ist das der Grund dafür, dass ich meinen Fehler einfach nicht finden kann.

Und zwar geht es um folgendes:
ich habe mir in meiner HTML Datei eine Navigationsleiste erstellt, in der sich nebst Logo auch ein paar Links befinden.

Darunter kommt dann ein Bild, dass die gesamte Breite des Bildschirmes annimmt und sich entsprechend kleiner skaliert, wenn das Fenster kleiner wird.

Anschließend kommt der normale Inhalt, also Texte etc.

Die Navigationsleiste soll dabei fix sein, also auch beim Scrollen stets zu sehen sein. So weit, so gut.
Jetzt entsteht aber auch schon direkt das Problem:
Sobald ich in der CSS-Datei bei der NavBar "position: fixed" eintippe, rutscht das Bild darunter.
Sofern der Bildschirm groß genug ist, ist das nicht weiter tragisch, sobald das Fenster aber kleiner wird, verschwindet es bis zur Hälfte oder noch weiter unter der NavBar (die entsprechend immer höher wird, damit die Links noch zu erkennen sind)
Dementsprechend kann ich leider auch nicht das Bild einfach die Höhe der Navigationsleiste nach unten verschieben, da diese eben, sobald das Fenster zu klein wird, doppelt so hoch wird, damit alle Links ihren Platz in der Nav-Bar finden. Ich hoffe, ihr versteht mein Problem.

Es scheint tatsächlich an "position: fixed" zu liegen, denn sobald ich diesen Befehl entferne, wird alles richtig angezeigt - nur verschwindet die Leiste dann beim scrollen, und das möchte ich ja eben nicht!

Hier mal meine CSS Eingaben, vielleicht könnt ihr mir ja helfen?

HTML-Code:
/* Navigation */
.logo {
    width: 177px;
    height: 35px;
    float: left;
    margin: 5px;
}

.logo p {
    float: right;
    font-family: Barrio;
    color: #a30600;
    font-size: 30px;
    margin-top: 3px;
}

.Navigation {
    position: fixed;
    top: 0px;
    background-color: rgba(250, 250, 250, 0.8);
    height: auto;
    width: 100%;
    z-index: 999;
}

.Navigationslink {
    text-decoration: none;
    color: #a30600;
    margin-top: 10px;
    padding-right: 30px;
    float: right;
}

.Navigationslink:hover {
    font-weight: bold; 
}
/* Navigation ENDE */




/* TITELBILD */
.TITELBILD {
    width: 100%;
    position: relative;
}

.TITELBILD img {
    min-width: 100%;
    min-height: 100%;
}

.TITELBILD span {
    position: absolute;
    bottom: 0;
    font-family: Barrio;
    color: white;
    font-size: 25px;
    padding-bottom: 5px;
    width: 100%;
    text-align: center;
}
/* TITELBILD ENDE */
Und hier noch meine HTML-Eingaben: (den head-Bereich lass ich jetzt mal weg)
HTML-Code:
<body>
<!-- BANNER -->
<div class="Navigation">
    <div class="wrapper">
        <a href="index.html">
        <div class="logo">
        <img height="100%" width="auto" src="Pictures/pawprint.png"> <p>-Tierchen</p>
        </div></a>
    <nav>
        <a class="Navigationslink" href="#">Wir ♥</a>
        <a class="Navigationslink" href="#">Norwegen</a>
        <a class="Navigationslink" href="#">Hunde</a>
        <a class="Navigationslink" href="#">Blog</a>
    </nav>
    </div>
</div>
<!-- BANNER ENDE -->
    
    
    
    
    
<!-- TITELBILD -->
<div class="TITELBILD">
    <img width="100%" src="Pictures/IMG_9790.JPG">
    <span>Acht Pfoten entdecken Norwegen</span>
</div>
<!-- TITELBILD ENDE -->
Würde mich über Hilfe wirklich freuen, ich verzweifel so langsam!
Liebe Grüße
Alina
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Text neben Navigationsleiste andi01 CSS 6 08.06.2011 17:54
Horizontal zentrierte Navigationsleiste erstellen Webnut CSS 4 16.01.2011 13:09
Dynamische Navigationsleiste horizontal, vertikal Faven CSS 6 28.06.2010 16:06
Navigationsleiste stefanovic CSS 3 16.02.2010 14:17
Inhalt rutscht unter Navigationsleiste Blackcherity CSS 2 03.06.2009 12:17


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:06 Uhr.