Steuerung horziontal klappt nicht

goog · 18. Mai 2007

hallo ich bin gerade bei dem abschnitt steuerung horizuntal.
jetzt habe ich das float eingesetzt und es funktioniert irgentwie nicht.

hier ist die html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>index2.htm</title>
<link href="design.css" type="text/css" rel="stylesheet" media="screen" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="generator" content="Webocton - Scriptly" />
</head>
<body>
<div id="navi">
<ul>
<li><a href="index.htm">Startseite</a></li>
<li><a href="ueber-mich.htm">Über mich</a></li>
<li><a href="termine.htm">Termine</a></li>
<li><a href="impressum.htm">Impressum</a></li>
</ul>
</div>
</body>
</html>

UND HIER DIE CSS:

#navi {
width:200px;
text-align:left;

margin-top:10px;
margin-bottom:10px;
margin-right:15px;
margin-left:20px;

}
#navi ul {

list-style:none;
}

#navi li {

float:left;
margin-left:15px;
width:90px;
background-color:silver;
border-top:1px black solid;
border-left:25px orange solid;
border-bottom:1px red solid;
border-right:2px blue solid;
margin-top:10px;
padding-top:8px;
padding-bottom:8px;
padding-left:8px;
padding-right:8px; }

Danke für die hilfe schonmal

Foster · 18. Mai 2007

Was genau funktioniert denn nicht? Nur das float, also dass es nicht am linken Rand ist oder noch was anderes?
Ich hab mir das ganze mal im Browser angesehen und es sieht so aus:
[Blockierte Grafik: http://img131.imageshack.us/img131/8431/unbenanntas2.gif]

Bei mir im Browser war das dann ein paar Zentimeter vom linken Rand entfernt.

pulse180 · 18. Mai 2007

ich erkenne auch kein Fehler wenn ich es mal anschaue sieht es ganz normal aus. könntest du bitte mal genau dein Problem beschreiben oder mach nen Bild von der Seite und stell es dann online.

goog · 19. Mai 2007

ich hätte startseit ; Über mich; Termine....

gerne nebeneinander angeordnet und nicht untereinander.

Foster · 20. Mai 2007

Dann darfst du keine <ul> benutzen sondern am besten ein Tabelle. Listen Ordnen die Elemente immer untereinander an. Ob man das anders einstellen kann, weiss ich nicht.
Der Code:

<html>
<head>
<style type="text/css">
#navi {
text-align:left;
border: 1px solid #000;
margin-top:10px;
margin-bottom:10px;
margin-right:15px;
margin-left:20px;

}

#navi td {

width: 130px;
margin-left:15px;
background-color:silver;
border-top:1px black solid;
border-left:25px orange solid;
border-bottom:1px red solid;
border-right:2px blue solid;
margin-top:10px;
padding-top:8px;
padding-bottom:8px;
padding-left:8px;
padding-right:8px; }
</style>
</head>

<body>
<div id="navi">
<table border="1">
<tr>
<td><a href="index.htm">Startseite</a></li> </td>
<td><a href="ueber-mich.htm">Über mich</a></td>
<td><a href="termine.htm">Termine</a></td>
<td><a href="impressum.htm">Impressum</a></td>
<td>hallo</td>
</tr>
</table>
</div>
</body>

_______________________________________
Erläuterung:

o #navi li ist nun #navi td.
o #navi ul fällt weg.
o float: left bei #navi td muss auch weg.
o width: 200px bei #navi auch.
o Breite von #navi td kann ruhig 130px sein.

Steuerung horziontal klappt nicht

Jetzt mitmachen!

Teilen