float left funktioniert nicht richtig

CodeMole · 2. Oktober 2014

Hallo,

mein Problem ist folgendes: Wenn ich im css die ausrichtung der Internetlinks mit float: left auf links
setze bleibt eine eine ungewollte breite von 20px etwa übrig, setzte ich bei gleichen code mein float: right,
so funktionert es bestens und die links sind rechtbündig und schön kanpp am rand verstehe nicht warum.
Danke für eure Hilfe.

Hier mein html snippet;

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Weltkarte</title>
<link href="styleWeltkarte.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
</head>
<body>
<script type="text/javascript" src="Wooltip/wz_tooltip.js"></script>
<div class="mainBody" >
<header class="mainHeader">
<nav>
<ul>
<li>
<a href="#">LINK 1</a>
<a href="http://www.w3schools.com/html/">LINK 2</a>
<a href="http://www.w3schools.com/html/">LINK 3</a>
<a href="http://www.w3schools.com/html/">LINK 4</a>
</li>
</ul>
</nav>
</header>
<p>
<img class="Weltkarte" src="Weltkarte.svg" alt="Karte" usemap="#Landkarte">
<map name="Landkarte">
<area shape="poly" coords="7,77,29,61,63,71,63,123,63,129,6,116,19,99"
href="http://www.web.de/" onmouseover="Tip('United States of America', BGCOLOR, '#FF6600',BORDERCOLOR, '#FFFFFF', FONTFACE, 'Oswald', FONTCOLOR,'#FFFFFF',FONTSIZE, '7pt', SHADOW, true, SHADOWWIDTH, 5, TEXTALIGN, 'center', WIDTH, 92)"
onmouseout="UnTip()">
</map>
</p>
</div>
</body>
</html>

Alles anzeigen

Und hier die css Datei, das Bild liefere ich nicht mit, es ist aber 800px breit

Code

body {
font-family: 'Oswald';
background-color: #E6E6E6;
}
a {
text-decoration: none;
}
.mainBody {
width: 800px;
margin: 0 auto;
background-color: #E6E6E6;
}
.mainHeader nav {
margin-top: 2%;
background-color: #666666;
height: 30px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
margin: 0 auto;
}
.mainHeader nav ul li {
float: left; [COLOR=#ff0000][B]GENAU HIER IST DIE STELLE, DIE ICH MEINE left geht nicht, right ohne probleme[/B][/COLOR]
display: inline;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
color: #FFFFFF;
display: inline-block;
padding: 3px 10px;
height: 24px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav a:hover, .mainHeader nav a:active {
background-color: #FF6600;
}

Alles anzeigen

Danke für eure Hilfe

threadi · 2. Oktober 2014

Zunächst mal hast Du kein echtes Menü gebaut.

Falsch:

HTML

<ul>
<li>
<a href="#">LINK 1</a>
<a href="http://www.w3schools.com/html/">LINK 2</a>
<a href="http://www.w3schools.com/html/">LINK 3</a>
<a href="http://www.w3schools.com/html/">LINK 4</a>
</li>
</ul>

Richtig:

HTML

<ul>
<li><a href="#">LINK 1</a></li>
<li><a href="http://www.w3schools.com/html/">LINK 2</a></li>
<li><a href="http://www.w3schools.com/html/">LINK 3</a></li>
<li><a href="http://www.w3schools.com/html/">LINK 4</a></li>
</ul>

Jetzt wäre die Frage wie dein Menü eigentlich aussehen soll - das geht aus deinem Text nicht hervor. Soll es die gesamte Breite horizontal einnehmen und jeweils die Menüpunkte darüber verteilt anzeigen? Oder soll es vertikal sein? Oder anders?

CodeMole · 2. Oktober 2014

Ich würde eigentlich gerne wissen warum der float befehl links nicht komplett bündig
rechts aber schon, beim gleichen Code.

Danke

PS
Warum muss ich die links umgebung immer neu setzten?

threadi · 2. Oktober 2014

Um dein float-Problem zu verstehen wäre ein Link zur Seite hilfreich.

Bei einem Menü handelt es sich um eine Liste - folglich eine <ul>-Liste. Das darin Links stehen ist eher als Zusatz zu sehen, wg. der damit verbundenen Funktionalität.

CodeMole · 3. Oktober 2014

hier ist der link

http://www.det-a.net/Weltkarte.htm

ich habe jetzt die 4 links, also link 1, 2, 3, 4 links gefloatet und wie man sieht sind diese nicht komlpett links gebündet!

Wenn ich dieselbe seite mit rechts float belege funktioniert das bestens!

Warum!

djheke · 3. Oktober 2014

Dein UL benötigt noch ein padding:0;

CodeMole · 3. Oktober 2014

:-(:-):-o

Das war es! Perfekt!!! DANKE!!! DANKE!!! DANKE!!!

Tags