Einzeilig, nicht zweizeilig

[Bert]

Hi Fans :)

ich baue gerade ein einfaches Menü, das sich rechts oben im Inhalts-div befindet. Es sollen einzeilig Links angezeigt werden, die in der Anzahl dynamisch sind.
Habe zuerst an eine Liste (<ul>) gedacht. Doch auch wenn ich die Aufzählungszeichen entferne, besteht da immer noch ein Abstand.
Also versuche ich es nun mit einem weiteren div mit Links darin:

  
<div class="menu">  
	<a href="?">Neu</a>  
	<a href="?">Bearbeiten</a>  
	<a href="?">test</a>  
	<a href="?">test2</a>  
</div>  

Dies ist der CSS-Code, den ich benutze:

  
div.menu  
{  
 /* Positionierung in der rechten oberen Ecke des div.cont */  
 position:absolute;  
 top:0;  
 right:0;  
  
 background-color:#8DB6CD;  
}  
div.menu a  
{  
 float:left;  
 border:1px solid #5D478B;  
}  

So stellt der Code die Links mit dem gewünschten Rahmen dar, und das sogar nebeneinander. Doch ich möchte 2% Abstand zwischen Schrift und Rahmen haben, also füge ich den Links die Angabe "padding:2%;" hinzu. Und schon rutscht der letzte Link in eine neue Zeile. Da kann ich auch mit "display:inline;" herumspielen wie ich möchte - der letzte Link rutscht immer in die zweite Zeile.
Mein Gedanke war auch, dass div.menu nicht automatisch so breit wird wie sein Inhalt - aber "width:auto;" brachte auch nichts.
Jetzt bin ich mit meinem Latein am Ende (habe diese Sprache sowieso nie gelernt ;) ) und frage hier im Hilfe. Was muss ich tun, um das zu erreichen, was ich möchte?

Gruß
Bert

[ChrisB]

Hi,

Habe zuerst an eine Liste (<ul>) gedacht.

Für ein Menü eine gute Idee.

Doch auch wenn ich die Aufzählungszeichen entferne, besteht da immer noch ein Abstand.

Dann eliminiere diese(n).

Also versuche ich es nun mit einem weiteren div mit Links darin:

Nein, schlechte Idee.

MfG ChrisB

[Bert]

Hi

Doch auch wenn ich die Aufzählungszeichen entferne, besteht da immer noch ein Abstand.
Dann eliminiere diese(n).

Also mit negativen Werten in margin-left? Das hört sich nach einer sehr schmutzigen Lösung an.

MfG
Bert

[ChrisB]

Hi,

Doch auch wenn ich die Aufzählungszeichen entferne, besteht da immer noch ein Abstand.
Dann eliminiere diese(n).

Also mit negativen Werten in margin-left?

Nein. Ein Abstand von 0 ist ein eliminierter Abstand.

MfG ChrisB

[Bert]

Hi

Also mit negativen Werten in margin-left?
Nein. Ein Abstand von 0 ist ein eliminierter Abstand.

Mit margin-left:0; für das li-Element kommt keine Veränderung.

Gruß
Bert

[ChrisB]

Hi,

Mit margin-left:0; für das li-Element kommt keine Veränderung.

margin ist ja auch nicht die einzige Art von Abstand.

MfG ChrisB

[Bert]

Hi

Mit margin-left:0; für das li-Element kommt keine Veränderung.
margin ist ja auch nicht die einzige Art von Abstand.

Okay, mit padding-left:0; auf das ul-Element scheint nun endlich gewirkt zu haben. Doch mit float:left; und padding:2%; auf das li-Element ist das Ding wieder zweizeilig. Kurzum: Problem besteht weiterhin!

Gruß
Bert

[steffen]

Hallo Bert,

versuch es mal heirmit:

  
<style type="text/css">  
 .menu li { list-style: none; float: left;}  
 .menu ul { padding: 0; }  
</style>

  
<div  class="menu">  
<ul>  
	<li><a href="?">Neu</a></li>  
	<li><a href="?">Bearbeiten</a></li>  
	<li><a href="?">test</a></li>  
	<li><a href="?">test2</a></li>  
</ul>  
</div>

mfg steffen

[gast42]

verzichte auf das unnötige div, id oder class kann direkt ul gegeben werden. class ist auch nur dann sinnvoll, wenn mehrere gleiche Elemente zu erwarten sind, sonst id.

[Auge]

Hallo

versuch es mal heirmit:

<style type="text/css">
.menu li { list-style: none; float: left;}
.menu ul { padding: 0; }
</style>

  
Warum so unvollständig:  
  
~~~css
  
 .menu ul { padding: 0; margin: 0; }  
 .menu li { list-style: none; float: left; padding: 0 2%; margin: 0; }  

Die schon von gast42 angesprochene Sache mit dem eventuell unnötigen <div> bleibt natürlich.

Tschö, Auge