• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage position:relativ verschiebt komplettes CSS ?

therealgherkhin

Neues Mitglied
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
 
Werbung:
Zurück
Oben