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

[TIMS_Ralf]

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 !? ) :

.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:

<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 ??
Wie - bitte - bekomme ich die Tabs aneinander ( margin:0 ) ?

Danke Euch vorab, Gruß aus dem Harz,
Ralf

 

[SpiceLab]

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

• Einfach zur CSS3-Flexbox greifen:

.Tabs /* UL */
{
  ...
  display:flex
}
.Tab /* LI ' s*/
{
  ...
  /*display:inline-block; */ /* auskommentiert = deaktiviert */
}

• Um bei display zu bleiben, eine CSS-Tabelle definieren:

.Tabs /* UL */
{
  ...
  display:table
}
.Tab /* LI ' s*/
{
  ...
  display:table-cell  /* vorher inline-block */
}

• Oder stattdessen float:left nutzen:

.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]​

 

[TIMS_Ralf]

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
- 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...

 

[SpiceLab]

Falls jemand wen vom w3c kennt, Gruß von mir: Dann fehlt aber evtl. die CSS-Möglichkeit "whitespace:none;" oder so ähnlich...

white-space (mit Bindestrich) gibt's schon, halt nur in einem anderen Kontext

https://www.w3.org/TR/css3-text/#white-space-property
https://www.w3.org/wiki/CSS/Properties/white-space

 

[TIMS_Ralf]

Moin,
ja klar, mit Bindestrich... aber ohne "none"

 

[SpiceLab]

ja klar, mit Bindestrich... aber ohne "none"

Klar, denn die Eigenschaft besitzt einen ganz anderen Kontext, als das aufgetretene Problem.