Buttons mit variabler Breite

[schmiedemeister]

Hallo,

ich erstelle gerade für eine längere Liste ein kleines Navigationsmenü mit mehreren Buttons. Die Anzahl der Buttons ist nicht festgelegt, weil die Inhalte aus einer MySQL Tabelle kommen. Deshalb habe ich auch folgendes Problem. Die Inhalte haben auch eine sehr unterschiedliche Breite ( es geht um Länder: in einem Button soll z.B. USA und in einem steht Großbritanien )

Wenn ich die Breite so festlege, #navi li { width:105px; float:left; } /* Horizontale Anordnung */ dann wirken lange Länder gequetscht und kurz haben sehr viel Platz. ( Der Hintergrund ist ein .gif das wie ein langer Balgen wirkt )

Wenn ich es so mache, #navi li {  float:left; } /* Horizontale Anordnung */ und an die Länder etwas padding recht und links anfüge, dann werden die Untermenüs nicht mehr vertikal sonder auch horizontal dargestellt.

Hier nochmal der ganze Css Teil:

#navi, #navi ul { list-style-type:none; margin:0; padding:0; } /* Style-Reset */

  #navi li { width:105px; float:left; } /* Horizontale Anordnung */

  #navi li ul { display:none; } /* Normalzustand eingeklappt */
  #navi li:hover ul { display:block; } /* Ausgeklappt */

  #navcontainer { position: relative; padding: 2px 50px; }

   #navi { position:absolute;  }

   #navi li { border:0px solid #000; margin:0 0px 0 0; }
   #navi ul li { border:none; margin:0; }

   #navi a { font-weight:bold; text-align:center; display:block; padding-left:0px; padding-right:0px; }
   #navi a:link, #navi a:visited { color:#000000; background: url('images/btn_navi.gif') no-repeat;  text-decoration:none; }
   #navi a:active, #navi a:hover { color:#000000; background: url('images/btn_navi_over.gif') no-repeat;  text-decoration:none; }

Hier gehts auch zu der Seite die das Problem betrifft http://www.erich-zimmermann.com/galerien/galerienindex.php

Danke für eure Hilfe.

[Olee]

ich habs gerade mit firebug ausprobiert:

#navi li {border:0px solid #000000;display:inline;width:auto;}

so wird schonmal die länge des buttons vom text abhänig gemacht. du solltest jetzt noch padding-left und right einfügen um etwas luft zwischen die buttons zu bekommen

[schmiedemeister]

so hatte ich das auch schonmal probiert aber das problem sind jetzt die Untermenüs. Die sind jetzt auch nebeneinander angeordnet. Ich habs mal so online gestellt, schau doch mal rein damit du weist was ich meine. Danke!

[ChrisB]

Hi,

so hatte ich das auch schonmal probiert aber das problem sind jetzt die Untermenüs. Die sind jetzt auch nebeneinander angeordnet. Ich habs mal so online gestellt, schau doch mal rein damit du weist was ich meine. Danke!

Welche Untermenues?

In deinem Beispiel sehe ich keine zu der genannten Auflistung gehoerigen Untermenues.

MfG ChrisB