1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

Frage position:relativ verschiebt komplettes CSS ?

Dieses Thema im Forum "HTML, XHTML & CSS" wurde erstellt von therealgherkhin, 13 Februar 2018.

  1. therealgherkhin

    therealgherkhin Neues Mitglied

    Registriert seit:
    13 Februar 2018
    Beiträge:
    7
    Punkte für Erfolge:
    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 (text):
    1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.           <meta charset="utf-8">
    5.         <title>Schülerübersicht der SSH www.Schüler-SSH.de</title>
    6.         <link href="stylesheet.css" rel="stylesheet">
    7.      
    8.     </head>
    9.     <body id="body">
    10.         <h1 class="wilkommen">Bodywarmer - Stay warm all day long</h1>
    11.          <div class="topnav">
    12.   <a class="active" href="index.html">Home</a>      
    13.   <a href="products.html">Produkte</a>
    14.   <a href="kontakt.html">Kontakt</a>
    15.   <a href="infos.html">Info´s</a>
    16.            
    17.        <div id="middlelayer">
    18.          
    19.             <img src="lukasscholz.jpg" id="lukasscholzbild" alt="Lukas Scholz">
    20.             <ul id="lukasscholztext">
    21.                 <ul style="margin-bottom:20px"> <u><b>Herkunft:</b></u> Hoym, Deutschland </ul>
    22.                 <ul style="margin-bottom:20px"> <u><b>Referenzen:</b></u> Webdesigner und Produktentwickler </ul>
    23.                 <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.
    24.                     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>
    25.            </ul>
    26.             <img src="isabellutmann.JPG" id="isabellutmannbild" alt="Isabell Utmann">
    27.                
    28.          
    29.          
    30.         </div>
    31.            
    32.     </body>
    33. </html>
    CSS:
    Code (text):
    1. #body {
    2.     background-color: #D4D4D4;
    3. }
    4.  
    5. .wilkommen {
    6.         text-align: center;
    7.         color: #333;
    8.         text-decoration: none;
    9. }
    10.  
    11.  
    12.  
    13.     body {margin:0;}
    14.  
    15. .topnav {
    16.   overflow: hidden;
    17.   background-color: #333;
    18.  
    19. }
    20.  
    21. .topnav a {
    22.   float: left;
    23.   display: block;
    24.   color: #f2f2f2;
    25.   text-align: center;
    26.   padding: 14px 20px;
    27.   text-decoration: none;
    28.   font-size: 21px;
    29. }
    30.  
    31. .topnav a:hover {
    32.   background-color: #ddd;
    33.   color: black;
    34. }
    35.  
    36. .topnav a.active {
    37.     background-color: #FFC04C;
    38.     color: white;
    39. }
    40.  
    41. #middlelayer{
    42.     width: 60%;
    43.     height: 100%;
    44.     margin-left: 20%;
    45.     margin-top: 80px;
    46.     border-radius: 8px;
    47.     background-color: white;
    48.     float: left;
    49.     position: fixed;
    50.  
    51.    
    52. }
    53.  
    54. #lukasscholzbild {
    55.     margin-left: 15px;
    56.     margin-top: 15px;
    57.     float: left;
    58.     clear: left;
    59. }
    60.  
    61. #lukasscholztext{
    62.     color: #333;
    63.     margin-left: 300px;
    64.     margin-top: 50px;
    65.  
    66. }
    67.  
    68. #karte{
    69.    background-color: #D4D4D4;
    70.     margin-top: 30px;
    71.     margin-left: 14%
    72. }
    73.  
    74. #kontakte {
    75.     text-align: center;
    76.     line-height: 30px;
    77.     background-color: #D4D4D4
    78. }
    79.  
    80. #isabellutmannbild {
    81.     float: left;
    82.     clear: left;
    83.     margin-top: 25px;
    84.     margin-left: 15px;
    85. }
    Ich hoffe ihr könnt daraus etwas erkennen und mir vlt weiterhelfen.

    Lg
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    914
    Punkte für Erfolge:
    43
    Wenn ich position:absolute bei #middlelayer deaktiviere, bleibt alles, wie es ist, nur die vertikale Scrollbar wird eingeblendet. Dieses:
    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 (text):
    1.     <div class="topnav">
    2.         <a class="active" href="index.html">Home</a>
    3.         <a href="products.html">Produkte</a>
    4.         <a href="kontakt.html">Kontakt</a>
    5.         <a href="infos.html">Info´s</a>
    6.     </div>
     
    Zuletzt bearbeitet: 13 Februar 2018
  3. therealgherkhin

    therealgherkhin Neues Mitglied

    Registriert seit:
    13 Februar 2018
    Beiträge:
    7
    Punkte für Erfolge:
    1
    Oh das habe ich dann wohl komplett übersehen.. Vielen vielen dank :)