float problem

marco2306

Hallo Community,

Versuche gerade mein WBB 2.3.6 Style im WCF 3.1 nach zu Bauen.

Soweit so gut.

In der Box header (template "boardNodeList" ( Name der Kategorie ) wollte ich rechts und links ein Bild Positionieren.

Da dem Elternteil keine feste Größe angegeben wurde, funktioniert leider float nicht.

Wie bekomme ich das Bild in die linke und rechte Ecke?

Das Bild wurde mit

Code

<div class="rechts"><img src="../images/Tropical/boards.png"></div>

eingefügt.

Versuch mit

Code

position: absolute;
float:right;

schlug leider fehl.

zur Seite

Weiß einer wie ich das Lösen kann?

Danke

MfG

BoomBoomPaco

Zugang Möglich ?

BoomBoomPaco

So auf die Schnelle sehe Ich das Problem hier :

Code

.tabularBoxTitle > header {
    display: flex;
    align-items: center;
    justify-content: center;

marco2306

Hast Post...

BoomBoomPaco

Vorlaüfige Lösung in Deinem Fall :

CSS

.wbbBoardList .tabularBoxTitle header::before {
    content: url("../images/xxx/xxx.png");
    position: relative;
    left: 0;
}
.wbbBoardList .tabularBoxTitle header::after {
    content: url("../images/xxx/xxx.png");
    position: relative ;
    right: 0;
}
 .wbbBoardList .wbbCollapsibleCategory h2 {
    padding: 0;
    margin: 0 280px;
    border-radius: 50px;
    box-shadow: black 0 0 5px inset;
    background: linear-gradient(to bottom, rgba(211, 211, 27, 1) 0%, rgba(238, 226, 30, 1) 50%, rgba(211, 211, 27, 1) 100%);
    width: 300px;
    text-align: center;
}

Alles anzeigen

Desweiteren musste folgendes angepasst werden .

CSS

/* Gelber Rahmen */
.wbbBoardList .wbbCollapsibleCategory h2 {
   /* padding: 0 150px;*/
    border-radius: 50px;
    box-shadow: black 0 0 5px inset;
    background: linear-gradient(to bottom, rgba(211,211,27,1) 0%,rgba(238,226,30,1) 50%,rgba(211,211,27,1) 100%);
}

Hier musste

CSS

/* padding: 0 150px;*/ <--- musste auskomplementiert werden

Sollte so erst mal gehen

BoomBoomPaco

Exakt Gleich ....

nur Beschrifftung ist anders .