✔ Tab Grösse mit CSS?

[Shorty1968]

Hallo ich habe mir ein Tab menü gebastelt das wird auch angezeigt,aber ich bekomme die Grösse des Tabs einfach nicht hin,das Tab breitet sich über den Ganzen Beitrag aus.

Wie bekomme ich es mit CSS hin das sich das Tab Fenster in der Breite ändert?

Mein jetziger CSS Code sieht so aus.

.tab_top_active
{
font-size: 15px;
width: 400px;
padding-top: 15px;
}

Eine Darstellung wie es im moment aussieht hänge ich an.

 

[SpiceLab]

Im CSS-Schnipsel kann ich nichts entdecken, was dagegen spricht.

Und der Selektor .tab_top_active ist im Komplett-CSS (bzw. die Klasse im HTML-Code) enthalten?

Nicht, dass auch dieser Teil darin blos wieder fehlt

Andernfalls besteht hier die Möglichkeit, dass die width-Regel von einem höher spezifizierten Selektor im Komplett-CSS überschrieben wird.

Das alles kannst du aber ganz einfach und fix mit den Browser-Developertools überprüfen

 

[SpiceLab]

Das alles kannst du aber ganz einfach und fix mit den Browser-Developertools überprüfen

Hab ich jetzt "auf gut Glück" mit dem Link aus deinem letzten Thema unternommen

Das <div>-Element wird, wie im CSS festgelegt, 400px breit dargestellt.

Es befindet sich aber in einem <article>-Element mit der Klasse .message, das die Hintergrundfarbe für den Tab, sowie den abgerundeten Rahmen für den übrigen Bereich bildet, und seine variable Breite aus dem angewandten CSS-Tabellengerüst display:table | table-row | table-cell für die übergeordnete HTML-Elementstruktur erhält (<section class="content"> als linke Tabellenzelle mit relativer Breite, <aside class="sidebar"> als rechte Tabellenzelle mit fester Breite).

Diagnosedauer: keine zwei Minuten
_______________________
[edit] Tipp-Ex [/edit]

 

[Shorty1968]

Ok ich bin noch nicht so gut mit CSS und den Klassen,aber wenn ich das nun richtig verstehe muss ich Folgendes in die CSS Eintragen?

.message {
width: 40px;
}

*EDIT*
Leider verstehe ich nicht was ich nun machen kann um es zu lösen.

 

[Jan-Frederik Stieler]

Hi,
kannst du deinen HTML- und CSS-Code auf JsFiddle oder JsBin hochladen so das wir uns das anschauen können?
Ich hab z.B. momentan keine Vorstellung davon wie dein HTML-Code eines Tab aufgebaut ist.

Grüße

 

[SpiceLab]

wenn ich das nun richtig verstehe muss ich Folgendes in die CSS Eintragen?

.message {
width: 40px;
}

*EDIT*
Leider verstehe ich nicht was ich nun machen kann um es zu lösen.

Mit dieser Regel würde die komplette <article>-Box verschmälert werden, die mehr beinhaltet/umschließt, als nur den oberen (hellblauen) "Tab".

Hier muß zunächst mal die Hintergrundfarbe der .message-Klasse entzogen und stattdessen der eingangs gezeigten Klasse übergeben werden, damit ihre festgelegte Breite auch sichtbar wird.

Desweiteren hättest du den umlaufenden Rahmen der .message-Klasse aufzusplitten, sofern er den verkürzten "Tab" auch umschließen soll.

kannst du deinen HTML- und CSS-Code auf JsFiddle oder JsBin hochladen so das wir uns das anschauen können?
Ich hab z.B. momentan keine Vorstellung davon wie dein HTML-Code eines Tab aufgebaut ist.

Schau mal hier: http://wbb-support.eu/testforum/wbb4/lexicon/index.php/Entry/1-Test-Eintrag/

Im Quellcode beginnend ab <div id="main">, der "Tab" ist mit <div class="tab_top_active" ...> ausgezeichnet.

 

[Jan-Frederik Stieler]

Hallo,
warum stylest du nicht einfach .messageHeader als Tab?

Grüße

 

[SpiceLab]

warum stylest du nicht einfach .messageHeader als Tab?

Da sich dieses <header>-Element ebenfalls im <article class="message ...">-Element befindet, wäre auch hier genau so vorzugehen, wie von mir gestern Morgen beschrieben.

 

[Jan-Frederik Stieler]

Hi,
unabhängig von deiner eigentlichen Fragestellung bin ich der Meinung das dein Tabkonstrukt etwas unter divitis leidet.
Man muss nicht immer jedes HTML-Element in einem Div unterbringen, bzw. die HTML5 Spezifikation schreibt sogar vor das man div nur verwendet wen es anders nicht mehr geht und kein semantisches Element passt.
Diesbezüglich verwendest du glaube ich auch section und article in der falschen Reihenfolge. Aber das musst du selbst wissen.
Außerdem hat nav nichts im Footer deines tabs zu suchen. Nicht jede Navigation wird mit nav umschlossen, sondern nur die Hauptnavigation.

Also ich würde mal das ganze Konstrukt ausmisten und so einfach wie möglich schreiben. Ich denke damit erleichterst du dir ganz ungemein die Arbeit.

@spicelab:

Da sich dieses <header>-Element ebenfalls im <article class="message ...">-Element befindet, wäre auch hier genau so vorzugehen, wie von mir gestern Morgen beschrieben.

Damit hast schon recht. Aber ich denke das @Shorty1968 ein kleines Verständnisproblem hat weil sein Quellcode etwas unübersichtlich ist und dann ist es besser sich direkt auf ein Element zu beziehen die eine bestimmte Aufgabe übernehmen als irgendwelche Elternelemente. Deshalb mein Einwand .

Viele Grüße

 

[SpiceLab]

Deinen Ausführungen zur nicht vorhandenen Semantik und einem extrem verschachtelten Quellcode hab ich nichts hinzuzufügen

Ohne die Developer-Tools würd's keinen Spaß machen, den Quellcode zu analysieren