HTML Navigationsleiste strecken?
meine navi leiste klebt aneinander also alle kästen.
wie kann ich es auseinander ziehen?
<html>
<head>
<title>X</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>
</head>
<body bgcolor=#d9d9d9>
<style>
.container {
clear: both;
float: left;
width: 100%;
overflow: hidden;
background: ##56585b;
font-family: Verdana;
font-size: 1em;
}
#navi {
float: left;
position: center;
left: 50%;
margin: 2 auto;
padding: 40;
list-style-type: none;
}
#navi li {
float: left;
position: center;
right: 50%;
}
#navi a {
width: auto;
display: block;
padding: 5px;
line-height: 1.5em;
color: #000000;
background: ##56585b;
border:2px solid #024c68;
text-decoration:none;
}
#navi a:hover {
background: #56585b;
color: #000;
}
{bcolor: grey}
div.a {
text-align: center;
}
ul.horizontal li{
display:block;
float:center;
padding:0 10px;
}
</style>
<div class="a">
<u><h1>XXXXXXXXXXXXXXXXXX</h1></u>
</div>
<p>XXXXXXXXXXXXXXXXXXXXXXXXX
<div class="container">
<ul id="navi">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
</ul>
</div>
</body>
</html>
3 Antworten
ich habe Deinen gruseligen Code mal repariert:
<!doctype html>
<title>X</title>
<style>
body {
background:#d9d9d9
}
.container {
font-family: Verdana,sans-serif;
font-size: 1em;
}
#navi {
list-style-type: none;
}
#navi li {
display:inline-block;
}
#navi a {
display: block;
padding: 5px;
line-height: 1.5em;
color: #000000;
border:2px solid #024c68;
text-decoration:none;
}
#navi a:hover {
background: #56585b;
color: #000;
}
div.a {
text-align: center;
text-decoration:underline
}
</style>
<div class="a">
<h1>XXXXXXXXXXXXXXXXXX</h1>
</div>
<p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
<div class="container">
<ul id="navi">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
</ul>
</div>
Alex
Na, dann hast Du jetzt einen perfekten Code als Grundlage zum Lernen :)
Die einzelne Buttons sind immernoch alle direkt nebeneinander geklebt. Kann man sie irgendwie auf eine ganze Zeile aufteilen? Dass links und rechts immer der gleiche Abstand ist?
Die einzelne Buttons sind immernoch alle direkt nebeneinander geklebt.
Was meinst Du mit "nebeneinander geklebt"? Bei mir sind da Abstände zwischen den Buttons.
Ja schon, aber nur wenige pixel. ich will, dass sie über die gesamte seite (von links nach rechts) aufgeteilt sind. Also zentral in der mitte mit mehr abstand zwischen drin
Dann machst du es so, wie ich es in diesem Thread beschrieben habe:
https://www.gutefrage.net/frage/css-navigation-in-die-mitte-oben-fixieren#answer-304476489
Versuch mal in container das hier einzufügen
margin-left: 2em
Margin-left ist nicht gut...
Grund: Die Linksbündigkeit geht verloren weil es eingerückt wird.
Daher mein Vorschlag mit "margin-right" :-)
Oder schau dir mal Flex Box an. Ziemlich interessant und modern. Wird von den meisten Frameworks benutzt.
Recht simpel:
Füge bei #navi li folgendes zu:
margin-right: 5px;
Mit der Zahl musst nach belieben spielen.
Aber prüf deinen Quellcode mal. Da sind etliche Fehler drin.
Danke, ist für die Schule und wir lernen nichts darüber sondern sollen uns selber schlau machen und uns alles selber beibringen.