✔ Ausrichtung von Elementen

M

MichaA

Mitglied
Ich bin CSS Anfänger und bräuchte eure Hilfe. Ich habe mal hier ein Sample Projekt zusammengestellt: http://plnkr.co/edit/yIOyCxTFkpUujFyouMnZ?p=preview

Ich möchte das gelb markierte Div unten dargestellt bekommen, dass es so aussieht wie auf dem Bild.04-07-_2014_13-45-29.png
Ich suche möglichst eine Lösung ohne Padding oder Margin, da die höhe der grauen Bar und der gelben Bar nicht fix ist. Ihr könnt mir sicherlich weiterhelfen. Vielen Dank schon mal im voraus für eure Mühen.
 
Danke für die sehr schnelle Antwort! Leider hat es in meinem Fall nicht ganz helfen können. Mein Beispiel war nämlich falsch. Ich habe ein Div weg gelassen, in der Annahme, dass es keine Rolle spielt. Dieses Div verhindert jedoch, dass es richtig dargestellt wird. Hier das überarbeitete Beispiel: http://plnkr.co/edit/yIOyCxTFkpUujFyouMnZ?p=preview

Es kam eine Navbar hinzu, die eine feste Höhe (die Größe der Mainbar), aber eine variable Breite hat. Wenn ich das gelb markierte Div mit Position: Absolute versehe, verschiebt es sich auch automatisch nach links. Da ich nicht weiß, wie breit die Navbar ist, kann ich hier kein festes left setzen. Vielleicht gehe ich das Problem auch falsch an. Könnte mir bitte jemand helfen?

Es soll so aussehen, wie auf dem Bild.
04-07-_2014_14-32-37.png
 
Vielen Dank! Das war die Lösung. Ich war im Grunde schon fast dran. Den Wrapper hatte ich bei mir schon eingefügt, ich kam nur nicht auf display: table und display: table-cell. Ich wusste zwar, dass es so etwas gibt, jedoch war mir der Einsatzzweck nie so richtig bekannt.
 
ach mist, ich habe mich so früh gefreut. Ich habe jetzt ein Verhalten, welches ich nicht verstehe. Ich habe dein Beispiel dadurch erweitert, dass ich statt Test2 den String mit einem Leerzeichen versehen (also "Test 2") und der CSS Klasse .tab einen vertical-align mitgegeben habe. Das "Test 2" verursacht ein Zeilenumbruch, welches ich nicht möchte und das vertical-align verursacht, dass das Padding nicht mehr berücksichtigt wird.

http://jsfiddle.net/u4naL/1/

Sorry, wenn ich dich wieder um Hilfe bitte. Ich habe es versucht selbst zu lösen, bekomme es aber nicht mit meinem Wissensstand hin. :(
 
ja, wenn nach dem Text Element jedoch ein Button folgt, was ich leider machen muss, hilft ein geschütztes Zeichen wenig, vermute ich. CSS kann echt störrisch sein :/.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück