Problem mit a und ul

[Kuno]

Folgendes Problämchen:

  
<style type="text/css">  
 a {height:70px}  
 ul {list-style:none;background-color:red}  
  
</style>  
  
<ul>  
 <li><a href="#">Test</a></li>  
</ul>  

warum kann ich mit a keine höhe von 70px erzwingen?

Mein Problem beruht darauf, dass der Link die volle Höhe des Listen-Blocks erhalten muss.
Wenn ich die Höhe in <ul> festlege, nimmt der Link nicht die gesamte Höhe ein.

Hat jemand eine Idee wie man die Höhe von <ul> nach der Höhe von <a> ausrichten kann?

[wahsaga]

hi,

a {height:70px}

warum kann ich mit a keine höhe von 70px erzwingen?

Weil a per Default inline dargestellt wird - und deshalb keine Höhe und Breite zugewiesen bekommen kann.

display:block schafft Abhilfe.

gruß,
wahsaga

[Kuno]

Das funktioniert aber nicht, wenn ich eine horizontale Liste haben möchte:

  
<style type="text/css">  
 a {height:70px;display:block}  
 ul {list-style:none;background-color:red}  
 ul li {display:inline}  
</style>  
  
<ul>  
 <li><a href="#">Test</a></li>  
 <li><a href="#">Test</a></li>  
</ul>  

[wahsaga]

hi,

Das funktioniert aber nicht, wenn ich eine horizontale Liste haben möchte

Warum sagst du das nicht gleich?

Dann bleibt float als Alternative.

gruß,
wahsaga

[Kuno]

neee mit Float mach ich ja die ganze Liste kaputt!

[Shepard]

Hallo,

neee mit Float mach ich ja die ganze Liste kaputt!

ungetesteter Schnellschuß:

http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#line_height?

Schlagt mich, wenn's Unsinn ist.

Shepard

[Kuno]

http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#line_height?
Das ist auch nicht so das wahre, denn wenn du dem a eine Hintergrundfarbe gibst, wirst du sehen, dass line-height nichts weiter als eine margin-art ist. Damit regelst du nur den Außenabstand zu benachbarten Zeilen/elementen.
Ich möchte den Links später beim a:hover eine Hintergrundfarbe geben. Die Hintergrundfarbe soll die gesamte <li> ausfüllen. Also auch in der Höhe. Leider ist die ganze Liste bisher nur so hoch wie der darin enthaltene Text.
Mit line-height kann ich zwar die <ul>-Höhe ändern, aber die Hintergrundfarbe von a bleibt so groß wie der Text.

[Shepard]

Hallo,

umpf, da hast Du Recht. Schön blamiert...

Dann sehe ich nur noch padding, was aber skalierungstechnisch Probleme macht.

Shepard

[Kuno]

Padding hab ich schon probiert. Allerdings ändert sich dabei nur der horizontale Abstand der Listenelemente, merkwürdigerweise aber nicht die höhe der gesamten Horizontal-Liste.

Das ganze soll eine Menüleiste am oberen Rand der Webseite sein. Beim a:hover soll das gesamte Listenelement eine Hintergrundfarbe bekommen.

[dey]

Hallo,

Das ganze soll eine Menüleiste am oberen Rand der Webseite sein. Beim a:hover soll das gesamte Listenelement eine Hintergrundfarbe bekommen.

ich bin zwar nicht mehr ganz sicherm was du willst....?
Aber folge mal dem Link zu deynews. Ist es nicht das was du suchst?. Wenn ja bediene er sich.

bydey

[Kuno]

http://deynews.de

Haste die Seite mal in einem Textbrowser oder aufm Handy angeschaut? *Horror*
Auf meine MobileCalc sieht das Teil grausam aus: Die Navigationsleiste ist nichts weiter als eine Reihe nebeneinander geklebter Links ohne Abstandhalter. Genauso siehts auch im Lynx aus.
Trotzdem Danke für Deine Beteiligung.

[Shepard]

Hallo,

Das ganze soll eine Menüleiste am oberen Rand der Webseite sein. Beim a:hover soll das gesamte Listenelement eine Hintergrundfarbe bekommen.

So?

  
 a {padding:25px 0 25px 0;}  
 a:hover {background-color:green;}  
 ul {list-style:none;background-color:red}  
 ul li {display:inline; line-height:70px;}  

25px ist nur ein Vorschlag, mach das padding so groß, daß es auch bei extremer Schriftskalierung durch den Betrachter noch ausreicht.

Die Seite von dey sieht übrigens auch gut aus.

Shepard

[Shepard]

Hallo,

Die Seite von dey sieht übrigens auch gut aus.

auf den ersten Blick...

Shepard

[Kuno]

Im Linx sieht das Menü so aus:

BilderHomeStyleDiversesNews

Ordentlich wäre im Lynx:

• Bilder
• Home
• Style
• Diverses
• News

Man darf nicht vergessen, dass ein Menü im Textbrowser wie das Inhaltsverzeichnis eines Buches ist.

[wahsaga]

hi,

Im Linx sieht das Menü so aus:

BilderHomeStyleDiversesNews

Bei vernünftiger Auszeichnung als Liste ...?

gruß,
wahsaga

[Kuno]

Bei vernünftiger Auszeichnung als Liste ...?

gruß,
wahsaga

hä? Siehe Diskusionsverlauf.

[Shepard]

Hallo,

hä? Siehe Diskusionsverlauf.

apropos Diskussionsverlauf:

zwei real funktionierende Lösungen sind schon genannt worden (block+float bzw. padding), hat Dir eine weitergeholfen?

Fehlt Dir beim floaten der Abstand zwischen den Links? => z.B. text-indent, margin etc.

Geht das padding über das Menü hinaus? => overflow:hidden für <li>.

Den listamatic-link von Friedrich weiter zu verfolgen ist aber auch eine gute Idee, der ist nämlich richtig gut.

@wahsaga: kuno bezog sich auf den link von dey, dessen Ansatz entgegen meiner ersten Äußerung nicht wirklich überzeugen konnte.

Shepard

[Kuno]

Der ganze Float und Overflow-Quatsch hat da nichts verloren. Ein Profi meidet das so weit wie möglich.

Die wohl einfachste möglichkeit wäre:

<div> #background festlegen
   <ul>
      <li>Elemente</li> #auf padding gesetzt
      ...
   </ul>
</div>

[Shepard]

Hallo,

Der ganze Float und Overflow-Quatsch hat da nichts verloren. Ein Profi meidet das so weit wie möglich.

Tatsächlich?

Die wohl einfachste möglichkeit wäre:

<div> #background festlegen
   <ul>
      <li>Elemente</li> #auf padding gesetzt
      ...
   </ul>
</div>

Ich verstehe nicht genau, was Du meinst. Jedenfalls fügst Du ein zusätzliches HTML-Element (das umgebende div) ein, das nur mit dem Aussehen, aber nichts mit der Auszeichnung des Inhalts zu tun hat.

Ich habe mal gehört, daß Profis so etwas vermeiden. Mag sein, daß ich irre.

Trotzdem noch viel Erfolg bei Deinen Forschungen.

Shepard

[wahsaga]

hi,

Der ganze Float und Overflow-Quatsch hat da nichts verloren. Ein Profi meidet das so weit wie möglich.

Als ob du Ahnung hättest.

gruß,
wahsaga

[Shepard]

Hallo,

neee mit Float mach ich ja die ganze Liste kaputt!

ähhhmm.. inwiefern?

Shepard

[OhneName]

Hallo,

neee mit Float mach ich ja die ganze Liste kaputt!

Kannst du das bitte genauer erläutern?

Folgendes erreicht bei mir in Opera 9.02 das gewünschte Ergebnis.

  
<ul>  
  <li>  
    <a href="example.html">Beispiel</a>  
  </li>  
  ...  
</ul>  

  
ul {  
  list-style-type:none;  
  margin:0;  
  padding:0;  
  }  
  
ul li {  
  float:left; /*Damit sich die <li>s nebeneinander statt untereinander anordnen*/  
  margin:0;  
  padding:0;  
  }  
  
ul li a {  
  display:block; /*Damit du den <a>s eine Breite und eine Höhe zuweisen kannst*/  
  width:_____;  
  height:_____;  
  margin:0;  
  padding:0;  
  }  

Gruss,
OhneName

[Froschpopo]

Sieht bei mir nicht gewünscht aus. Ich verstehe auch irgendwie nicht, warum das nicht mit dem Inline-Block funktioniert! Wozu sind die Dinger überhaupt gut, wenn man damit nichts anstellen kann ausser Sachen nebeneinander zu packen. Die Dinger sind ja noch nichtmal Wrapper-Resistent!

[OhneName]

Hallo,

Sieht bei mir nicht gewünscht aus.

Definiere "gewünscht". Natürlich muss man zu diesem Code noch mehr Links hinzufügen und bei width und height noch Werte eintragen, damit der Effekt sichtbar wird. Ich habe damit eine horizontale Liste erreicht mit festen Breiten der Listenpunkte, das ist das was ich als "gewünscht" ansehe. Zum Test sollte man auch noch mit border:1px solid #000000 Rahmen anzeigen lassen.

Gruss,
OhneName

[friedrich]

hallo.

vielleicht gibts hier ne hilfreiche antwort zu finden.?

http://css.maxdesign.com.au/index.htm

MfG.

[Kuno]

Die Idee ist gut:

  
 #nav {  
  margin:0; padding:0;  
  list-style:none;  
  white-space:nowrap;  
  overflow:auto;  
  background:url(/images/nav_bg.gif) bottom left repeat-x;  
 }  
  
 #nav li {  
  display:inline;  
 }  
  
 #nav a {  
  background-color:white;  
  padding:9px 10px;  
 }  

leider überlappt a die Liste!!!!!