0
Ich bin neu in der Codierung so tut mir leid, wenn das, was ich hier mache, völlig dumm ist.Warum geht mein Menü nicht ganz nach links
Ich baue eine sehr einfache Website mit HTML und CSS. Ich möchte 2 Navigationsleisten verwenden. Eine oben auf dem Bildschirm für die Hauptnavigation. Und eine auf der linken Seite zum Navigieren durch diese bestimmte Seite. Die erste funktioniert gut, aber die zweite sieht komisch aus. Die anklickbaren Links können nicht weiter nach links verschoben werden und stehen daher auf der rechten Seite. Das ist, was ich meine:
ich mit meiner Maus bin schwebt auf "content2"
Was mache ich falsch? Hier ist der Code, den ich schrieb:
<body>
<nav>
<ul class="navbar">
<li class="navbar"><a class="navbar active" href="index.html">home</a></li>
<li class="navbar"><a class="navbar" href="page1.html">page 1</a></li>
<li class="navbar"><a class="navbar" href="page2.html">page 2</a></li>
<li class="navbar"><a class="navbar" href="page3.html">page 3</a></li>
<li class="navbar"><a class="navbar" href="page4.html">page 4</a></li>
</ul>
</nav>
<div id="contentbar">
<ul class="ucontentbar">
<li class="contentbar"><a class="contentbar" href="#">content1</a></li>
<li class="contentbar"><a class="contentbar" href="#">content2</a></li>
<li class="contentbar"><a class="contentbar" href="#">content3</a></li>
<li class="contentbar"><a class="contentbar" href="#">content4</a></li>
<li class="contentbar"><a class="contentbar" href="#">content5</a></li>
<li class="contentbar"><a class="contentbar" href="#">content6</a></li>
<li class="contentbar"><a class="contentbar" href="#">content7</a></li>
</ul>
</div>
<div id="page">
<p>text</p>
</div>
</body>
Und die CSS die mit ihm geht:
body {
margin: 0px;
padding: 0px;
}
nav {
background-color: rgb(50,50,50);
font-family: sans-serif;
font-size: 20px;
height: 60px;
width: 100%;
}
ul.navbar {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
text-align: right;
position: fixed;
}
li.navbar{
float: left;
height: 60px;
}
a.navbar {
display: inline-block;
padding: 19px 25px;
background-color: rgb(50,50,50);
text-align: center;
color: white;
text-decoration: none;
}
a.navbar:hover {
background-color: black;
}
a.active {
background-color: rgb(80,80,220);
}
#contentbar {
background-color: rgb(100,100,100);
font-family: sans-serif;
font-size: 14px;
width: 300px;
height: 100%;
display: block;
position: absolute;
}
ul.contentbar {
margin: 0;
padding: 0;
}
li.contentbar {
list-style: none;
}
a.contentbar {
left: 0;
background-color: rgb(100,100,100);
color: white;
display: block;
width:300px;
height: 30px;
text-decoration: none;
}
a.contentbar:hover {
background-color: black;
}
#page {
background-color: rgb(0,200,100);
width: 100%;
height: 100%;
}
Ohne zuerst ein Demo zu erstellen, sieht es wie Standardrand und Padding aus. –
Sie können auch 'overflow: hidden' auf #contentbar setzen. Dies verhindert, dass Kinder überlaufen. – kkalamarski
.. oder geben Sie keine Breite an. Der Behälter hat eine Breite und es ist nicht notwendig, den Kindern die gleiche Breite zu geben. Es wird problematisch bleiben. –