Tab-Größe ändern

[smsterminal]

Ich habe eine Tabber-Box, die 3 tabs ändern jeweils die größe beim klicken und haben einen abstand also padding dazwischen. wie bekomme ich alle tabs gleich groß und ohne abstand hin?

<style type="text/css"> body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul#tabs li { display: inline; }
ul#tabs li a { color: #FFFFFF; background-color: #333399; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
ul#tabs li a:hover { background-color: #330099; }
ul#tabs li a.selected { color: #FFFFFF; background-color: #333399; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #fffff; }
div.tabContent.hide { display: none; }
  </style>

 

[mermshaus]

Wie sieht denn der HTML-Code dazu aus? Bei display: inline; wird Whitespace zwischen Elementen nicht ignoriert.

 

[threadi]

Mach "ul#tabs li a" zu einem Blockelement und gib ihm eine feste Breite. Dabei solltest Du gleichzeitig jedoch auf das padding verzichten da es sonst dazu addiert wird.

 

[smsterminal]

ist ein blockelement ein <div>? wie soll ich denn den code abändern?

 

[threadi]

Ich sprach vom CSS, nicht vom HTML-Code. Per CSS kannst Du jedes Element zu einem Blockelement machen.

display: block;

 

[smsterminal]

Hab es so angepasst, die tabs werden aber vertikal also untereinander angezeigt, sie sollten aber horizontal also nebeneinander erscheinen, hab ich da etwas vergessen??

ul#tabs li { display: inline; }
ul#tabs li a { display: block; color: #FFFFFF; background-color: #333399; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.0em; text-decoration: none;}

 

[threadi]

Dann musst Du sie noch floaten. Und clearen nicht vergessen.

 

[mermshaus]

Die Regel wird dann zudem zumindest überflüssig, wenn du den Float-Ansatz (den ich auch empfehlen würde) wählst:

ul#tabs li { display: inline; }