Frage position:relativ verschiebt komplettes CSS ?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
13 Februar 2018
7
0
1
19
#1
Hallo zusammen,
ich bin gerade dabei für die Schule eine kleine eigene Website zu schreiben und bin auf folgendes Problem gestoßen:
Wenn ich im CSS die Position einer "Mittelsäule" worauf Inhalte hervorgehoben werden sollen auf relativ umstelle um herunterscrollen zu können wird auf einmal der komplette Hintergrund in #333 eingefärbt..
Wenn ich position:fixed stehen lasse bleibt alles so wie ich es haben möchte, allerdings kann man nun nicht mehr weiter nach unten scrollen um die weiteren Informationen zu lesen...
Hier einmal der Code:

HTML:

Code:
<!DOCTYPE html>
<html>
    <head>
          <meta charset="utf-8">
        <title>Schülerübersicht der SSH www.Schüler-SSH.de</title>
        <link href="stylesheet.css" rel="stylesheet">
      
    </head>
    <body id="body">
        <h1 class="wilkommen">Bodywarmer - Stay warm all day long</h1>
         <div class="topnav">
  <a class="active" href="index.html">Home</a>       
  <a href="products.html">Produkte</a>
  <a href="kontakt.html">Kontakt</a>
  <a href="infos.html">Info´s</a>
            
       <div id="middlelayer">
          
            <img src="lukasscholz.jpg" id="lukasscholzbild" alt="Lukas Scholz">
            <ul id="lukasscholztext">
                <ul style="margin-bottom:20px"> <u><b>Herkunft:</b></u> Hoym, Deutschland </ul>
                <ul style="margin-bottom:20px"> <u><b>Referenzen:</b></u> Webdesigner und Produktentwickler </ul>
                <ul style="line-height: 18px"> <u><b>Beschreibung:</b></u> Lukas kam mit 13 Jahren auf die Sportschule in Halle und zeigte schnell einen unternehmerischen Geist.
                    Gepaart mit der Affinität zu technischen Prozessen entschloss er sich 2018 mit seinen Mitgründern Isabell Utmann und Ian Streißenberger die Firma "Bodywarmer" zu gründen. </ul>
           </ul>
            <img src="isabellutmann.JPG" id="isabellutmannbild" alt="Isabell Utmann">
                
          
          
        </div> 
            
    </body>
</html>
CSS:
Code:
#body {
    background-color: #D4D4D4;
}

.wilkommen {
        text-align: center;
        color: #333;
        text-decoration: none;
}



    body {margin:0;}

.topnav {
  overflow: hidden;
  background-color: #333;
 
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  font-size: 21px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
    background-color: #FFC04C;
    color: white;
}

#middlelayer{
    width: 60%;
    height: 100%;
    margin-left: 20%;
    margin-top: 80px;
    border-radius: 8px;
    background-color: white;
    float: left;
    position: fixed;
  
    
}

#lukasscholzbild {
    margin-left: 15px;
    margin-top: 15px;
    float: left;
    clear: left;
}

#lukasscholztext{
    color: #333;
    margin-left: 300px;
    margin-top: 50px;

}

#karte{
   background-color: #D4D4D4;
    margin-top: 30px;
    margin-left: 14%
}

#kontakte {
    text-align: center;
    line-height: 30px;
    background-color: #D4D4D4
}

#isabellutmannbild {
    float: left;
    clear: left;
    margin-top: 25px;
    margin-left: 15px;
}
Ich hoffe ihr könnt daraus etwas erkennen und mir vlt weiterhelfen.

Lg
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.149
244
63
65
#2
Wenn ich position:absolute bei #middlelayer deaktiviere, bleibt alles, wie es ist, nur die vertikale Scrollbar wird eingeblendet. Dieses:
Wenn ich im CSS die Position einer "Mittelsäule" worauf Inhalte hervorgehoben werden sollen auf relativ umstelle um herunterscrollen zu können wird auf einmal der komplette Hintergrund in #333 eingefärbt..
kann ich nicht erkennen.
Edit: Ich hatte stillschweigend einen Fehler im HTML korrigiert: Fehlendes </div> bei .topnav. Ohne diese Korrektur kann ich das Problem reproduzieren. Fügst Du das Tag ein, ist alles gut:
Code:
    <div class="topnav">
        <a class="active" href="index.html">Home</a>
        <a href="products.html">Produkte</a>
        <a href="kontakt.html">Kontakt</a>
        <a href="infos.html">Info´s</a>
    </div>
 
Zuletzt bearbeitet: