Vertikale Navigationsleisten

-1

Okay, ich arbeite an einer Website. Ich habe den Hauptinhalt der Website in der Mitte, und links vom Hauptinhalt möchte ich eine vertikale Navigationsleiste, die verschiedene Links auf der Website enthält. Ich weiß, wie eine navbar zu schaffen und Stil, aber ich weiß einfach nicht, wie ich das mit dem Rest der Inhalte der Website zu stören, ohne die Navigationsleiste tun könnte, ist hier ein Beispiel:Vertikale Navigationsleisten

https://gyazo.com/8f8fc2f7e57e9b419671e6fda603546c

Wie Sie in dem Link sehen können, ist der Inhalt der Navigationsleiste über dem Rest des Hauptinhalts, also habe ich beschlossen, float: left; zu dem Stylesheet und ich endete damit, dass es mit dem Hauptinhalt in Einklang steht, außer dass es jetzt horizontal und nicht vertikal ist. Warum machen Websites das? Wie können Sie verschiedene Elemente einer Webseite voneinander trennen und frei bewegen, ohne dass sie andere Dinge stören?

JSFiddle

HTML:

<DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>CSGOMarble</title> 
    <link rel="stylesheet" type="text/css" href="homepage.css"> 
</head> 
<body> 
<div class="navbar"> 
    <ul> 
    <li>Coin Flip</li> 
    <li>About Us</li> 
    <li>Contact</li> 
    </ul> 
</div> 
</html>

CSS:

body { 
background-color: #999999; 
font-family: Arial, Verdana, sans-serif; 
margin-top: 50px 
} 
h1 { 
background-color: black; 
color:white; 
padding-top: 30px; 
padding-bottom: 30px; 
margin-left: 275px; 
margin-right: 275px; 
border-radius: 10px; 
margin-bottom: 50px; 
} 
.container{ 
margin-left: 275px; 
margin-right: 275px; 

} 

li { 
list-style-type: none; 
float: left; 
}

Quelle

2016-04-01 Senoj

Sie müssen separate Divisionen für nav und alle anderen Objekte haben, die Sie wünschen Anzeige. Was Sie haben, ist nur der Anfang einer Webseite. Im Laufe der Zeit erstellen Sie mehr Stil "Klassen", so dass Sie nicht so viel CSS-Code auf der Seite benötigen. – Sparky256

float: left w Stellen Sie alle Navigationselemente nebeneinander auf (solange ein horizontaler Platz vorhanden ist). Für ein vertikales Menü verwenden Sie einfach display: block auf die li Elemente (das ist die Standardeinstellung, so dass Sie es nicht in der CSS überhaupt schreiben müssen). Dies wird sie unter einander setzen.

Um ein Element im Fenster zu fixieren (wie Ihr linker Teil mit dem Menü), verwenden Sie position: fixed darauf - dies ist relativ zum Bildschirm, so dass es nicht mit dem Rest blättern wird. Aber es überlagert (standardmäßig) andere nicht fixierte Elemente wie den Hauptinhalt, also müssen Sie diese mit einem Offset setzen (zum Beispiel position: relative; left: 180px;)

Quelle

2016-04-01 22:43:30 Johannes

Hallo! Vielen Dank für Ihre Antwort. Wenn ich die Liste horizontal korrigiere, überlappen sich alle Inhalte, wie Sie gesagt haben, und die Verwendung der Position löst das Problem nicht! – Senoj

müssen Sie es in einem separaten DIV setzen – Johannes

löschen

li {float: left;}

und fügen stattdessen

.navbar{float: left}

... Ihr Problem

lösen, aber ich denke, Ihnen nur ein grundlegendes Verständnis fehlt über Layouts und über die Positionierung von HTML-Elementen, frei „bewegen“ Ihre Elemente, die Sie brauchen nur ein Layout Dinge fit für Ihre Bedürfnisse, und dann werden sie nicht andere Dinge interferieren :)

Layout-Tutorial: http://www.w3schools.com/html/html_layout.asp
Positionierung Tutorial: http://www.w3schools.com/css/css_positioning.asp

Quelle

2016-04-01 22:31:00

Vertikale Navigationsleisten

Antwort

Verwandte Themen