Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Breakpoint "dynamisch" in CSS bestimmen?“

Jormungand

VonAllemEtwas

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

Aktives Mitglied

Aus meiner Sicht musst Du das nicht so umständlich machen.
Gebe dem CSS-Element des Slogan ein
CSS:
bottom: 0;
Dann ist es immer an der unteren Kante des Elementes ausgerichtet.
 

Jormungand

VonAllemEtwas

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.
 

Jormungand

VonAllemEtwas

Eigentlich sollte die Ausgangslage nicht so schwer zu verstehen sein:

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

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

Aktives Mitglied

Wie sieht es hiermit aus?!
CSS:
@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.
 

Jormungand

VonAllemEtwas

@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

ein Hamburger in der Lüneburger Heide

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

Allwissendes Karmameerschweinchen!

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

Hat es drauf

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.
 

Myhar

Hat es drauf

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.875
Mitglieder
67.225
Neuestes Mitglied
Petra
Oben