✔ Navigation

[Geflügel]

Hallo,

schaut euch mal bitte folgenden Code im Mozi an:

<style type="text/css">
ul
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul li
{
  float: left;
  background-color: #fcfcfc;
}

ul
{
  border: 1px solid red;
}
</style>

<ul>
	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>
	<li>Item four</li>
	<li>Item five</li>
</ul>

Frage: Warum hängt der rote Rahmen da oben und umklammert nicht wie gewollt meine <li>s?

 

[Maik]

Hi,

das liegt an der float:left-Deklaration für die Listenpunkte.

Lösung A: http://positioniseverything.net/easyclearing.html auf das ul-Element anwenden.

Lösung B: display:inline anstelle der float-Eigenschaft einsetzen.

 

[Geflügel]

Mhh.. verstehe irgendwie nicht wie ich das auf 's <ul> anwenden soll. Wahrscheinlich ist mein Englisch zu schlecht.

 

[Maik]

Einfach so:

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix {display: inline-block;}

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

<ul class="clearfix">
	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>
	<li>Item four</li>
	<li>Item five</li>
</ul>

 

[Geflügel]

Danke "erstmal". Wieso funktioniert das jetzt nicht mehr, wenn mein <ul> das Attribut display: inline; besitzt?

 

[Maik]

Nicht das ul-, sondern das li-Element wird mit display:inline ausgezeichnet.

 

[Geflügel]

Hallo,

ich möchte, dass der untere Rahmen von <ul> nur bis zum letzten <li> geht. Also nicht nicht nur der Rahmen, denn das ganze <ul> soll sich der Breite der <li>s anpassen. Hoffe du verstehst was ich meine. ^^ Und ich will das <ul> nicht in ein <div> packen. ;-) hast du eine Idee? Danke im Voraus. -)

<style type="text/css">

ul
{
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #000;
}
ul li
{
  float: left;
  background-color: #fcfcfc;
}

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>

<ul class="clearfix">
	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>
	<li>Item four</li>
	<li>Item five</li>
</ul>

 

[aGeNET]

Servus, ich geh jetzt einfach mal davon aus, dass du eine horizontale Navigation haben willst. Aus deiner Problemstellung geht das leider nicht hervor, ich entnehme das nur deinem Quelltext.

hier mein Vorschlag:
- gib den li's einen Rahmen unten und dem ul keinen
- zur besseren Ansicht hab ich den li's mal eine rote Hintergrundfarbe gegeben und ein padding-left von 5px

<style type="text/css">
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
ul li {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 5px;
	float: left;
	display: block;
	border-bottom: 1px solid green;
	background-color: #cc0000;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>
<ul class="clearfix">
	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>
	<li>Item four</li>
	<li>Item five</li>
</ul>

 

[Geflügel]

Sowas wollte ich garnicht..

die Breite von <ul> soll sich der Breite der <li>s anpassen.

 

[aGeNET]

Sorry, aber das geht nicht.
Die Breite des <ul> orientiert sich immer am übergeordneten Element, zb ein <div>.
Die Breite der <li> orientiert sich dann an seinem Eltenelement, in dem Fall ja logischerweise das <ul>.
Einzige Alternative ist eine feste Breite für das <ul>.