bezahlt von CSS: Ränder die kürzer als die Box sind
Design-technisch sieht sowas ja immer echt hübsch aus. Das aber umzusetzen ist erstmal nicht ganz so einfach, da es keine fertige Lösung gibt. Hier muss mal wieder ein eigenes Element mit :before und einer absoluten Position helfen.
Absolute Postionen sind nicht wirklich toll, weil damit das Element aus dem Fluss der Elemente entfernt wird. Wenn man z.B. zwei Divs übereinander legen möchte ist es auch besser da CSS-Grid zu verwenden und beide mit der selben Startposition im Grid abzulegen.
Aber zurück zu den Rändern. Hier erstmal mit "absolute":
Links (80% Länge):
div.left:before {
content : "";
position: absolute;
left : 0;
top : 0;
height : 80%;
width : 50%;
border-left:5px solid #726E97;
}
Links (80% Länge und unten + oben Abstand):
div.left:before {
content : "";
position: absolute;
left : 0;
top : 10%;
height : 80%;
width : 50%;
border-left:5px solid #726E97;
}
Absolute Postionen sind nicht wirklich toll, weil damit das Element aus dem Fluss der Elemente entfernt wird. Wenn man z.B. zwei Divs übereinander legen möchte ist es auch besser da CSS-Grid zu verwenden und beide mit der selben Startposition im Grid abzulegen.
Aber zurück zu den Rändern. Hier erstmal mit "absolute":
Links (80% Länge):
div.left:before {
content : "";
position: absolute;
left : 0;
top : 0;
height : 80%;
width : 50%;
border-left:5px solid #726E97;
}
Links (80% Länge und unten + oben Abstand):
div.left:before {
content : "";
position: absolute;
left : 0;
top : 10%;
height : 80%;
width : 50%;
border-left:5px solid #726E97;
}
| User | annonyme | 2021-06-23 19:20 |
write comment:Danke unbekannterweise, Hannes. Mit CSS kenne ich mich eigentlich nicht aus, aber wie es manchmal so ist, reichen fertige Wordpress Templates nicht aus, da muss selber etwas angepasst werden. Und mit dieser Information hats geklappt!
2022-03-12 17:02:37
Ist es ein Problem bei "left" einen prozentualen Wert und bei "border-left" einen absoluten Wert anzugeben?
2021-06-24 14:29:58