Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 06.02.2017, 15:05
Alinchen Alinchen ist offline
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