[CSS] Listenelemente Seitlich aufzählen

[SilentAssassin9]

Hallo,

Würde gerne wissen wie ich <ul> bzw. <li> in css formatieren muss das <li> (elemente) nicht untereinander aufgezählt werden, sondern seitlich.

so hab ichs:
Link1
Link2
Link3

so will ichs:
Link1 Link2 Link3

Danke

 

[Lord Alien]

Juhu ^^ Bin das erste mal der erste der antwortet, außer jemand Tipp jetzt noch schneller als ich ^^

Nun zu deinem Problem: soweit ich weiß müsste man das mit dem attribute display: line; hinbekommen, dazu folgendes Beispiel:

css-code

#naviga li
{
    display: line;
}

HTML-Code

<ul id="naviga">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>

Korrigiert mich wenn ich da falsch liege, bin mir da nicht 100%ig sicher

 

[Backslash]

Hmm. Geht bei mir nicht und wäre mir auch neu, dass es display:line gibt.

 

[someoneatsome]

machs doch einfach so: <a href usw>Link1</a>&nbsp<a href usw>Link2</a>&nbsp<a href usw>Link3</a>

&nbsp ist ein geschütztes Leerzeichen, dass heisst, es wird ein Abstand zwischen den Links geben...

 

[Lord Alien]

Ich hab denn entsprechenden Artiekl auf SELFHTML gefunden, und gemerkt das mir da leider ein kleiner Fehler unterlaufen ist: Es heißt "inline" und nicht "line"

Hier das entsprechende zitat:

Sie können eine Navigationsleiste mit wenigen Menüpunkten auch horizontal anordnen. Hierfür existieren zwei verschiedene Möglichkeiten mit unterschiedlichen Vor- und Nachteilen. Die einfachere Möglichkeit ist, die li-Elemente per display:inline darzustellen.

So müsste es nun gehen !!

@ Backslash: Man lernt halt nie aus ...

 

[radox]

machs doch einfach so: <a href usw>Link1</a>&nbsp<a href usw>Link2</a>&nbsp<a href usw>Link3</a>

&nbsp ist ein geschütztes Leerzeichen, dass heisst, es wird ein Abstand zwischen den Links geben...

Aua

Da hat jemand von Html und vor allem von Css mal gar nix kapiert. Sorry, aber des ist der falscheste Weg den es gibt.

Lieber Kinder bitte nicht zu Hause nachmachen.

 

[Crizzo]

Gibt den <li>-Elemeten einfach "float:left;" und "display:inline" wegen dem IE.

 

[Lord Alien]

Gibt den <li>-Elemeten einfach "float:left;" und "display:inline" wegen dem IE.

Hab ich doch gesagt

ps.: @someonatsome das müsste auch &ensp; heißen !!

 

[Zweipunktnull]

@ Lord Alien

Nein, das hatten wir doch vor einem Tag erst in diesem Thread.
&nbsp; ist das normale Entity für ein (erzwungenes) Leerzeichen und das wird auch meistens verwendet.
&ensp; ist das Entity für ein Leerzeichen, dass genauso breit ist wie der Buchstabe n.

Man sollte immer &nbsp; verwenden und nie &ensp;, einfach weil der MSIE kein &ensp; unterstützt.

 

[Enigma]

http://www.google.de/search?source=ig&hl=de&rlz=&q=list+o+matic&btnI

 

[Adagio]

float: left; allein reicht nicht, nach CSS 2.1 Standard ist eine Breitenangabe zusätzlich nötig.

Das zusätzliche display: inline; ist für die IE hierbei nur nötig, wenn man margin benutzt (gegen den double-margin Bug).

 

[Crizzo]

Ich ging einfach davon aus, dass der Fragende "float" beherrscht und weiß wie er damit umzugehen hat.

 

[Adagio]

Wenn er float kennen würde, hätte er diese Frage kaum gestellt

 

[Crizzo]

Lass mich doch....

 

[Lord Alien]

Ok ok ......

Ich geb's ja zu ihrt wissts einfach alle besser als icht

muss allerdings dazusagen das das nicht all zu schwer ist

 

[SilentAssassin9]

irgendwie funtzt des leider net
siehe hier

durch die ul verutscht meine ganze navi, wie kann ich das beheben?

 

[Crizzo]

irgendwie funtzt des leider net
siehe hier

durch die ul verutscht meine ganze navi, wie kann ich das beheben?

Was funktioniert denn nicht? Die Liste ist doch horizontal angeordnet.

 

[SilentAssassin9]

ja aber die liste ist nicht dort wo ich sie gern hätte und das wäre halt in der navi zwischen header und content.

oh gerade gesehen in iexplorer 7.0 schon aber in firefox nicht

 

[Crizzo]

ja aber die liste ist nicht dort wo ich sie gern hätte und das wäre halt in der navi zwischen header und content.

oh gerade gesehen in iexplorer 7.0 schon aber in firefox nicht

Da die <li>-Elemente "float:left;" haben, wurden sie aus dem Dokumentfluß genommen und dehnen das Div_menu nicht aus.
Du musst noch diesen Code in der CSS hinzufügen:

#div_menu:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
#div_menu {display: inline-block;}

/* Hides from IE-mac \*/
* html #div_menu {height: 1%;}
#div_menu {display: block;}
/* End hide from IE-mac */

Genau so, nicht die Kommentare oder ähnlich rauslöschen!

 

[SilentAssassin9]

Da die <li>-Elemente "float:left;" haben, wurden sie aus dem Dokumentfluß genommen und dehnen das Div_menu nicht aus.
Du musst noch diesen Code in der CSS hinzufügen:

#div_menu:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
#div_menu {display: inline-block;}

/* Hides from IE-mac \*/
* html #div_menu {height: 1%;}
#div_menu {display: block;}
/* End hide from IE-mac */

Genau so, nicht die Kommentare oder ähnlich rauslöschen!

geht leider trotzdem nicht