HTML

König

Dabei seit: 28.09.2007

Mittwoch, 22. Oktober 2008, 19:23

HTML - Liste horizontal darstellen

Hi,

entweder geht es nicht was ich versuche oder ich steh total auf dem Schlauch:

ich versuche eine Liste horizontal darzustellen, im FireFox geht das auch, nicht aber im IE < 8.

Hier der CSS Code:

Spoiler
Cascading Style Sheet
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#navi {
      margin-left: 15%;
      border-top: none;
      border-left: none;
      border-right: none;
     
    }
    #navi ul {
      
      /*height: 5%;*/
      text-align: center;
      width: 100%;
      
    }
    #navi ul li {
      display: inline;
      list-style-type: none;
      
      text-align: center;
      /*width: 110%;*/
      
    }
    #navi ul li.current {
      border: none;
    } 
    #navi a {
      width: 100%;
      padding-left: 5%;
      padding-right: 5%;
      border: 1px solid #f38631;
      margin-right: -0.5%;
    
    }
    #navi a:hover {
      border-bottom: none;
    }

Und HTML Code:

Spoiler
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="navi">
          <ul>
            <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>
          </ul>
        </div>

Kann mir jemand helfen? Danke schonmal.

ak

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »andreaskeil« (22. Oktober 2008, 19:24)

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 997

Mittwoch, 22. Oktober 2008, 19:54

ganz einfach entweder a: du machst im css code float:left hinzu oder b du setzt hinter jedem </a> ein <br /> dahinter;D

MFG

Mein kleines Projekt
-Cruel Online-

andreaskeil

König

Dabei seit: 28.09.2007

Beiträge: 967

Mittwoch, 22. Oktober 2008, 20:04

Danke für deine Antwort cccpmik

, aber funktioniert aber leider nicht

es sieht entweder schlimmer aus oder bleibt gleich und funktioniert damit nicht

Treml

Tripel-As

Dabei seit: 19.03.2003

Beiträge: 237

Mittwoch, 22. Oktober 2008, 20:27

Ich habe mir Deinen Code in eine Datei kopiert und bisschen herumgespielt.

Das Problem im Internet Explorer ist allgemein, dass er die Listenpunkte im sogenannten Quirks-Modus automatisch auf die gesamte Breite der Liste streckt.
Ich habe folgende zwei Lösungswege probiert:

a) Durch Verwendung einer gültigen DOCTYPE-Deklaration kommt man aus dem Quirks-Modus heraus und die Punkte werden nebeneinander angezeigt. Bei HTML 4 muss dazu auch der Pfad zur DTD angegeben werden, unter XHTML bin ich auch ohne diesen ausgekommen.
Leider hatte ich in Internet Explorer 7 dann einen anderen Darstellungsfehler, der die Rahmen betrifft.

b) Man kann den Listenpunkten eine bestimmte andere Breite als 100% zuweisen. Bei Deinen fünf Punkten würden sich rechnerisch grob 20% ergeben, durch die Rahmen müssen wir aber noch etwas weniger nehmen. 19% hat bei mir ganz gut funktioniert.
Mit dieser Lösung verliert man aber freilich an Flexibilität, wenn man die Liste erweitern oder kürzen möchte.

i u t w w f c b - u y a s t m w m

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 997

Donnerstag, 23. Oktober 2008, 08:00

#navi li
{
float:left;
}

damit schaffste es dass die links horizontal sind. problem abei ist dass der punkt verschwindet und alle links an einander kleben

EDIT: ich habe mal hier ein tut gefunden für horizontal navigation ich gehe es mal durch

http://www.thestyleworks.de/tut-art/listnav3.shtml

Mein kleines Projekt
-Cruel Online-

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »cccpmik« (23. Oktober 2008, 09:45)

HTML - Liste horizontal darstellen

Cascading Style Sheet

Ähnliche Themen