✔ Ausrichtung von Elementen

[MichaA]

Weil das Beispiel hier minimisiert ist. Natürlich bekommt das Tab später auch Rähmen usw.

Hier mal mein jetziger Stand in einem Bild. Ganz oben ist das, was ich derzeit habe. Und das unten soll darstellen, wie es mal aussehen soll. Die 3 Punkte ist der Button, welches ein Dropdown Menü öffnet.



Im Grunde hatte ich schon alles fertig. Jedoch konnte ich die Tabs nicht unten angeordnet darstellen, sondern habe sie mit einem Margin-Top nach unten geschoben, bis es gepasst hat. Das birgt jedoch die Gefahr, dass wenn der Benutzer die Schriftgröße anpasst und sich daher die Mainbar-Höhe verändert, dass die Tabs Reiter dann nicht mehr korrekt nach unten verschoben werden.

Deshalb wand ich mich hier an die Community, um eine Lösung zu finden, wie ich die Tabs unten angeordnet dargestellt bekomme.

 

[SpiceLab]

Ich bleib dabei, für jedes einzelne "Objekt" in der Navbar ein <div class="tab"></div> vorzusehen

 

[Jan-Frederik Stieler]

Hi,
ich würde das so bauen: http://jsfiddle.net/u4naL/5/

 

[SpiceLab]

Hi,
ich würde das so bauen: http://jsfiddle.net/u4naL/5/

Ob nun ein <a>- oder <div>-Element mit der Klasse "tab" kommt letztlich auf's selbe hinaus...

 

[Jan-Frederik Stieler]

Das ja, auch wenn es meiner Meinung nach lesbarer ist, wenn man nicht immer alles in Divs verschachtelt.
Auch hilft es wenn man etwas in einer Reihe anordnen will erstmal mit Inlineelementen zu arbeiten und nicht mit Blockelementen .
Und außerdem habe ich die immer zu Problemen führenden Positionsarten rausgenommen. Das macht immer alles kompliziert.

Grüße

 

[MichaA]

Hi,
ich würde das so bauen: http://jsfiddle.net/u4naL/5/

Das Beispiel sieht ganz gut aus. Ich habe es mal leicht angepasst, damit es nicht in einem anchor drin ist, sondern in einem Div. Und testweise ein Button hinzugefügt.

das sieht dann so aus: http://jsfiddle.net/u4naL/7/

Ich baue es dann mal in mein Prototype ein und sag euch, ob alles geklappt hat

 

[SpiceLab]

Und außerdem habe ich die immer zu Problemen führenden Positionsarten rausgenommen. Das macht immer alles kompliziert.

Die haben aber ihre Daseinsberechtigung bzgl. der eingangs gestellten Frage, und führten keineswegs zu Problemen

 

[SpiceLab]

http://jsfiddle.net/u4naL/6/

Falls es dir nicht aufgefallen ist, die Elemente sind durch Jan-Frederiks Änderungen im CSS nun nicht mehr am unteren Rand des Elternelements positioniert.

 

[MichaA]

Also in Chrome und Firefox wird es richtig dargestellt.... (oder übersehe ich etwas?)

 

[SpiceLab]

Also in Chrome und Firefox wird es richtig dargestellt....

Anhang anzeigen 63625

Sorry, bei so vielen Querpässen hab ich mal kurz den Überblick verloren.