Sidebar

In meinem letzten Projekt displayd hinter navbar ist, habe ich eine Ansicht mit diesem HTML-Code:Sidebar

<body> 
    <header> 
     <ul> 
     <li><a th:href="@{/}" class="title">Loja</a></li> 
     </ul> 
     <ul class="right"> 
     <li><a href="#" class="user">username</a></li> 
     <li><a href="#">logout</a></li> 
     </ul> 
    </header> 

    <main> 
     <aside> 
     <ul> 
      <li><a href="#">blablabla</a></li> 
      <li><a href="#">blablabla</a></li> 
      <li><a href="#">blablabla</a></li> 
      <li><a href="#">blablabla</a></li> 
      <li><a href="#">blablabla</a></li> 
      <li><a href="#">blablabla</a></li> 
      <li><a href="#">blablabla</a></li> 
      <li><a href="#">blablabla</a></li> 
      <li><a href="#">blablabla</a></li> 
      <li><a href="#">blablabla</a></li> 
     </ul> 
     </aside> 

     <article> 
     </article> 
    </main> 
    </body>

und dieser CSS-Stylesheet für die Sidebar (Tag beiseite):

aside li a { 
    display: block; 
    color: #000; 
    padding: 8px 0 8px 16px; 
    text-decoration: none; 
    font-family: 'Special Elite', cursive; 
} 

/* Change the link color on hover */ 
aside li a:hover { 
    background-color: #555; 
    color: white; 
} 

aside li.active { 
    background-color: #4CAF50; 
}

jsfiddle: https://jsfiddle.net/klebermo/ch6gtj3p/5/

wenn ich diese Seite im Browser öffne, ist der obere Rand der Seitenleiste hinter der Navbar versteckt, weiß jemand, wie man das repariert?

Quelle

2016-06-06 Kleber Mota

Sie teilen nicht das korrekte CSS. In der Geige ist 'header' die absolute Position. Das ist dein Problem. Sie müssen die Auffüllung oder den Rand mit dem Wert der Höhe Ihrer Kopfzeile hinzufügen. –

Ich habe die position:absolute von Ihrem Header entfernt und hinzugefügt

header:after{ 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
}

Dies gibt Ihnen die gleiche Wirkung mit der Kopfzeile. Weil Sie zwei schwebende Gegenstände haben, sollten Sie eine klare auf dem Header verwendet, um die Hintergrundfarbe zu sehen, eher als ein position: absolute

jsfiddle

das Problem mit einem margin-top fix unter Verwendung müssen Sie gehen zurück und justieren wenn sich die Höhe ändert.

Quelle

2016-06-06 11:28:37 Andrew

Versuchen Sie, margin-top zum Hauptetikett in css hinzuzufügen.

main { 
    margin-top: 20px; 
}

Quelle

2016-06-06 11:27:55

Versuchen Sie, margin-top, die Ihre Liste drücken wird unten

aside ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
width: 200px; 
background-color: #f1f1f1; 
margin-top:10%; 
}

Quelle

2016-06-06 11:32:57

Ganz einfach in Ihrem CSS hinzufügen:

aside { 
    margin-top: 3em; 
}

Quelle

2016-06-06 11:33:03

hinzufügen margin-top in Ihnen Haupt Tag und funktioniert gut.

main{ 
margin-top:50px; 
}

Quelle

2016-06-06 11:41:46 frnt

Antwort

Verwandte Themen