Breakpoint "dynamisch" in CSS bestimmen?

[Jormungand]

Hallo alle,

beim Angleichen eines Themes in WP stoße ich auf Schwierigkeiten.

Im Header liegt das Logo rechts und der Slogan links. Der Slogan soll auf der Grundlinie des viel größeren Logos liegen.
Im Standardview kein Problem: der Slogan bekommt einfach ein padding-top, bis er auf der gleichen Grundlinie liegt, wie das Logo.
Jetzt soll beim Umbrechen bei kleinen Viewports sich der Slogan unter das Logo schieben. Das klappt auch, allerdings hat er jetzt den verwendeten (und zu großen) padding-top.
Bei einem Breakpoint habe ich diesen wieder rausgenommen, aber es geht fast nicht, den Breakpoint genau zu setzen.

Gibt es eine Möglichkeit in CSS Folgendes zu sagen?
"Egal wie breit die Elemente sind - wenn umgebrochen wird, dann verwende einen anderen padding-top"
... und das ohne Gefriemel mit festen Breiten?

Beste Grüße
Jormungand

 

[lachender_engel]

Aus meiner Sicht musst Du das nicht so umständlich machen.
Gebe dem CSS-Element des Slogan ein

bottom: 0;

Dann ist es immer an der unteren Kante des Elementes ausgerichtet.

 

[Jormungand]

Das geht aber nur, wenn ich den Slogan auf position:absolute setze. Die Folge davon ist, dass er sich beim Verkleinern des Viewport nicht mehr umbricht, sondern auf dem Logo liegt.

 

[lachender_engel]

Nun, ohne das CSS zu sehen ist das für mich ein Blindflug.

 

[Jormungand]

Eigentlich sollte die Ausgangslage nicht so schwer zu verstehen sein:

HTML:

<div id="header">
<div class="logo"><img src="Logo.jpg"></div>
<div class="slogan">Slogan</div>
</div>
...

CSS:

.slogan {
float:left;
padding-top:122px;}
.logo {
float:right;}

Wenn der Viewport zu schmal wird und die beiden Container zusammenstoßen, rutscht der Slogan unter das Logo. Genau in diesem Moment soll "padding-top:122px;" gelöscht/geändert werden.

 

[lachender_engel]

Wie sieht es hiermit aus?!

@media screen and (max-device-width: 500px) {
    .slogan {padding-top:0;}
}

max-device-width setzt Du dann auf den Wert, ab dem der Slogan umbricht.

 

[cebito]

Warum einfach, wenn es auch kompliziert geht?

 

[Jormungand]

@lachender_engel: Damit wäre ich wieder bei den "normalen" Breakpoints. Ich hatte auf eine Möglichkeit gehofft, dass man die CSS-Regeln am Umbrechen und nicht an einer Breite festmachen könnte. Dann wäre es auch egal, wie breit die einzelnen Elemente wären.

@cebito: Das ist ja nicht das Problem, dass der Slogan nur teilweise umbricht. Der Slogan steht links, das Logo rechts. Damit muss ich dem Slogan ein Padding geben, um mit der Unterkante auf die Höhe der Unterkante des Logos zu kommen. Wenn die gefloateten Container zusammenstoßen, ist das Padding aber noch da und Plötzlich ist zwischen Logo und Slogan ein mords Abstand. (Oder hatte ich dein Beispiel falsch verstanden?)

Auf jeden Fall danke ich euch allen, dass ihr versucht, mir bei meinem Problem zu helfen.

 

[Lobster1956]

dein Problem ist das du auf das umbrechen reagieren willst...
das ist aber erstens bei jedem Browser etwas unterschiedlich,
und sogar vom user in seinenen eigenen browserkonfigurationen individuell anpassbar...
da wirst du kein befriedigendes Ergebnis erreichen...

setze DU bewust den Punkt an dem BEIDES passieren soll

 

[afr0kalypse]

Mit purem CSS geht das nicht.
Was du machen kannst ist folgendes (JavaScript):
Bestimme beim resize Event oder bei window.load den Abstand von links basierend auf dem Elternelement. Durch dein float:left muss der ja position.left > 0 sein. Sobald der Screen zu klein wird und das Element umbricht ordnet es sich so weit links vom Elternelement wie möglich an (im Idealfall position.left = 0).
Sobald dieser Zustand eintrifft, machst du das was du mit deinem Element machen möchtest.

 

[Myhar]

Nein die Lösung mit Javascript ist gar nicht zu empfehlen. Lobster hat da (in meinen Augen) die am besten formulierte Antwort gegeben, auch wenn das schon andere vor ihm sagen wollten: Der TS soll selbst den Punkt bestimmen an dem beides passiert. Das ist nämlich der Grundgedanke von responsive.

 

[afr0kalypse]

Nein die Lösung mit Javascript ist gar nicht zu empfehlen.

.

Kannst du bitte begründen, warum das gar nicht zu empfehlen ist, wenn es für sein Anliegen keine andere Lösung gibt?

 

[Myhar]

Es wurden ihm schon CSS Lösungen geboten, die er jetzt nur umsetzen braucht. Javascript ist hier fehl am Platz, wozu sollte man sonst nicht auch die responsive Teile einer Website mit Javascript umsetzen? Dafür wurde CSS entwickelt und dafür kann man es auch einsetzen. Nur weil man Javascript einsetzen kann heißt es nicht, dass man es auch soll.