Ein Element in einem Element mit border-radius, passt sich diesem nicht an.

    Hallo,


    Ich habe ein div mit border-radius.

    In diesem div, befinden sich weitere divs.

    Diese bleiben "eckig" und stehen dann über, passen sich also nicht dem übergeordneten div an.

    Es soll das border-radius nicht vererbt werden. sonst wurden diese drei divs an allen Ecken rund werden.

    Es soll aber nur das erste Div oben, das mittlere gar nicht und das dritte div unten sich anpassen.


    Hoffe man blickt durch was ich meine.


    Vielen Dank. :)

    Ich habe das jetzt nicht so verfolgt, aber eine Frage: Du vergibst IDs. Was machst du, wenn einer das Modul mehrmals auf einer Seite einsetzt? Dann sind diese Ids nicht mehr eindeutig.


    Zum anderen: In dem Fall kannst du dem Oberen div geben: border-radius-top-right / top-left und dem unteren border-radius-bottom-right / bottom-left.

    Zitat von firstlady

    Ich habe das jetzt nicht so verfolgt, aber eine Frage: Du vergibst IDs. Was machst du, wenn einer das Modul mehrmals auf einer Seite einsetzt? Dann sind diese Ids nicht mehr eindeutig.


    Zum anderen: In dem Fall kannst du dem Oberen div geben: border-radius-top-right / top-left und dem unteren border-radius-bottom-right / bottom-left.

    Hallo,

    das Modul wird nur einmal eingesetzt. Wenn ich es so wie ich es mir vorstelle noch vollenden kann.

    Was mein Problem hier angeht. Ist mir evtl. eine Lösung eingefallen. Ich könnte die drei divs in noch ein div packen, dort dann Aussenabstand festlegen und diese ist dann in dem div mit dem border-radius.


    Vieleicht, so ein Gedankenspiel. Ich hole mir die Werte für den border-radius ja aus einem field vom backend. Ich könnte auch schauen ob ich da draus 4 Variablen mache und diese könnte ich dann bei dem einen div auch als Abstand nehmen. so wäre das alles dynamisch.


    Oder eine Funktion die ermittelt welcher der höchste Wert ist. Beispiel ich hätte für border-radius folgende Werte: 4px 10px 24px 6px. Dann würde die Funktion die 24px als Wert für den Abstand nehmen.


    Aber wie gesagt, nur ein Gedankenspiel.

    So gerade das mit dem extra div ausprobiert. Das ist Mist. xD

    Da ja die anderene drei divs vers. Hintergrundfarben haben könnten.

    War nicht gut durchdacht von mir. Dann vieleicht doch das mit dem border-radius für das obere und das untere div nehmen.


    Denke aber hier wäre es wohl am Besten die Variable die ich eh erzeuge dann dort einzutragen.

    Bin nur nicht sicher wie ich das im Backend am Besten umsetze. Ob ein gemeinsammes Text Field oder vier getrennte.

    Hab es nun so umgesetzt:

    Code
    <field name="mkmeldungformlo" type="text" default="" label="Ecke - links oben" description="Die abgerundete Ecke von der Notrufmeldung. 0px = Keine Abrundung." filter="string" />
<field name="mkmeldungformro" type="text" default="" label="Ecke - rechts oben" description="Die abgerundete Ecke von der Notrufmeldung. 0 = Keine Abrundung." filter="string" />
<field name="mkmeldungformru" type="text" default="" label="Ecke - rechts unten" description="Die abgerundete Ecke von der Notrufmeldung. 0 = Keine Abrundung." filter="string" />
<field name="mkmeldungformlu" type="text" default="" label="Ecke - links unten" description="Die abgerundete Ecke von der Notrufmeldung. 0 = Keine Abrundung." filter="string" />

    Und so werden die Variablen weiter verarbeitet:

    Code
    // Notrufmeldung abgerundete Ecke links oben
$mkmeldungformlo = $params->get('mkmeldungformlo')."px";
// Notrufmeldung abgerundete Ecke rechts oben
$mkmeldungformro = $params->get('mkmeldungformro')."px";
// Notrufmeldung abgerundete Ecke rechts unten
$mkmeldungformru = $params->get('mkmeldungformru')."px";
// Notrufmeldung abgerundete Ecke links unten
$mkmeldungformlu = $params->get('mkmeldungformlu')."px";

    Und dann hier ausgegeben:

    Klappt auch soweit.