✔ Kein "margin:0" bei LI - list-style:none

T

TIMS_Ralf

Erfahrenes Mitglied
Hallo allseits!

Möchte ein "Tab-/Conatiner-DIV" bauen: Oben die Tabs, unten die DIVs mit den Daten zum Tab. Dabei sollen die Tabs direkt aneinander stehen - also keine Abstand (margin: 0 haben. Das krieg ich nedd hin ?

CSS (margins von UL und LI stehen auf 0 !? ) :

CSS: 
.Alles /* DIV */
{
    width:600px;
    margin:20px auto;
}

.Tabs /* UL */
{
    margin:0;
    padding:0;
    list-style:none;
}

.Tab /* LI ' s*/
{
    margin:0;
    padding:10px;
    text-align:center;
    border:2px solid #000;
    border-bottom:0;
    border-radius:10px;
    border-bottom-right-radius:0;
    border-bottom-left-radius:0;
    color:#000;
    font:400 16px Arial, sans-serif;
    display:inline-block;
}

.Container /* Container für alle Daten-DIVs */
{
    border:2px solid #000;
}

.ContainerInhalt /* Daten-DIVs */
{
color:#000;
    font:400 14px Arial, sans-serif;
}

.... und das HTML:
HTML: 
<DIV CLASS="Alles">
  <UL CLASS="Tabs">
    <LI CLASS="Tab">Tab 1</LI>
    <LI CLASS="Tab">Tab 2</LI>
    <LI CLASS="Tab">Tab 3</LI>
  </UL>
  <DIV CLASS="Container">
    <DIV CLASS="ContainerInhalt">Container Inhalt 1</DIV>
    <DIV CLASS="ContainerInhalt">Container Inhalt 2</DIV>
    <DIV CLASS="ContainerInhalt">Container Inhalt 3</DIV>
  </DIV>
</DIV>

Okay... ich könnte die Tabs alle auf margin-left: -4px setzen und den ersten LI mit :first-of-type entspr. nach rechts rücken.... aber das ist Firlefanz. Versteh auch gar nicht, weshalb trotz margin:0 die Tabs / LI´s überhaupt Abstand zueiander haben :eek::mad: ??
Wie - bitte - bekomme ich die Tabs aneinander ( margin:0 ) ?

Danke Euch vorab, Gruß aus dem Harz,
Ralf
 
Zuletzt bearbeitet:
Der Grund dafür ist display:inline-block, genauer das "inline" darin. Inline-Elemente (z.B. <a> u. <img>), oder wie in diesem Fall Elemente, die diese Eigenschaft / dieses Verhalten mittels CSS erhalten, produzieren Whitespaces im Textfluß.

Zum Glück gibt's da praktikablere Lösungen ohne großen Firlefanz :D
  • Einfach zur CSS3-Flexbox greifen:
CSS: 
.Tabs /* UL */
{
  ...
  display:flex
}
.Tab /* LI ' s*/
{
  ...
  /*display:inline-block; */ /* auskommentiert = deaktiviert */
}
  • Um bei display zu bleiben, eine CSS-Tabelle definieren:
CSS: 
.Tabs /* UL */
{
  ...
  display:table
}
.Tab /* LI ' s*/
{
  ...
  display:table-cell  /* vorher inline-block */
}
  • Oder stattdessen float:left nutzen:
CSS: 
.Tab /* LI ' s*/
{
  ...
  /*display:inline-block; */ /* auskommentiert = deaktiviert */
  float:left
}
.Container /* Container für alle Daten-DIVs */
{
  ...
  clear:left /* float:left beenden */
}

[edit]Formatierung[/edit]​
 
Zuletzt bearbeitet:
Hallo SpiceLab,

erstmal vielen Dank, insbes. für die Erklärung woran es überhaupt liegt. Ok... hadder verstanden :)

Deine Lösungen habe ich die vergangenen Stunden mal durchexerziert... super, und Danke! Auf den Punkt gebracht :)

- "Flex".... ahaa! Habe ich nocth nicht mt gearbeitet... ist aber super!
- Tabelle... ja, hatte ich auch schon im Sinn (sogar alle Tabs in DIVs in eine Tabelle zu packen...) Fällt bei mir aber auch in die Kategorie "Firlefanz". Muß "eleganter" gehen :D
- float... hmmm bin ich nicht drauf gekommen.

Wer hier - ähnlich wie ich- mit der Flexbox noch nicht gearbeitet hat: http://www.mediaevent.de/tutorial/flexbox.html
Das Mittel meiner Wahl ;)

Danke Dir!
Gruß Ralf


P.S.: Nachtrag:
Falls jemand wen vom w3c kennt, Gruß von mir: Dann fehlt aber evtl. die CSS-Möglichkeit "whitespace:none;" oder so ähnlich...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück