XF2.2 html Syntax bei xf_macro einbindung

"Selektoren" --> Danke! Damit komme ich erstmal weiter.

Heute Abend nix Strand :-(
 
Hoffi schrieb:
In deinem Fall hat die Klasse .samAlignCenter eine 10px Margin nach oben und unten.
Zum Vergrößern anklicken....

Kann ich das irgendwie "extern" "unterdrücken?
Oder muss ich mich da mal an den Entwickler des Addons wenden?

Danke!
 
sps-forum schrieb:
Kann ich das irgendwie "extern" "unterdrücken?
Zum Vergrößern anklicken....
Wie meinst du das?
Du kannst den Style ja überschreiben. Entweder in der Extra.less oder im Style direkt in .less Template. Evtl. in den Styles. Kommt ganz auf das AddOn an, wie gut und flexibel das gebaut ist.

Aber es sollte kein Problem darstellen eine margin anzupassen.
 
Super Hoffi!
Ich danke dir sehr für deine Hilfe, das bringt mich wirklich weiter und ich fange nun langsam an immer mehr davon zu verstehen...
Ich habe das jetzt über eine Klasse in der EXTRA.LESS gelöst, die ich an das Package on SIROPU im Addon parametriert habe.

Also quasi mit meiner .AdsManangerCustom von der ich hier geredet habe:
html Syntax bei xf_macro einbindung



Aktuell kämpfe ich noch mit 2 Problemen.
Schau dir doch bitte nochmal (74) SPS-Forum - Automatisierung und Elektrotechnik (coata.de) an.

1. Irgednwoheher kommt unten noch ein Margin von 5px - ich raffe aber noch nicht woher bzw. wie ich es weg bekomme.

2. Wieso hört "responsive" ab einer bestimmten Auflösung auf und der Bannerblock verschwindet komplett.
Smartphon quer geht noch, smartphone hochkant geht nicht mehr. Wo sind den die Knöpfchen um daran rumzuspielen?

Danke dir!
 
sps-forum schrieb:
Super Hoffi!

2. Wieso hört "responsive" ab einer bestimmten Auflösung auf und der Bannerblock verschwindet komplett.
Smartphon quer geht noch, smartphone hochkant geht nicht mehr. Wo sind den die Knöpfchen um daran rumzuspielen?

Danke dir!
Zum Vergrößern anklicken....

OK, habe es selber gefunden.
Die Breiten können in den Style Eigenschaften eingestellt werden.
Ich denke den Rest dazu finde ich selber raus, sonst melde ich mich nochmal.


Aber das mit den Margin 5px...
Da brauch ich eure Hilfe :)
 
sps-forum schrieb:
Aber das mit den Margin 5px...
Zum Vergrößern anklicken....
Du meinst den roten Rand. Das ist keine margin.

Das HTML / CSS Setup ist da ziemlich krude und kommt vermutlich durch die Line height.

Du hast noch ein paar unnütze Werte im CSS.

z.B. ein Inline Element ignoriert width und height Angaben, es ist ja inline und damit im Fluß.

Davon gibt es einige in dem Banner gewusel.

Wenn du das hier machst, ist es annähernd so wie du willst.

CSS: 
.BannerRow .BannerElement {
    margin: 3px 3px 0px 3px;

Aber richtig wäre es, wenn du da einmal komplett aufräumst. Das ist echt ziemlich durcheinander.

Ich würde das vermutlich in ein Flex Layout stecken.

Edit: Da ist ja Flex auch schon mit drin... aber nur halb.
 
Fixed it for you. Die Klasse .samItem ist absolutes chaos.

CSS: 
.samDisplayInline .samItem:last-child {

    /* margin-right: 0; */

}

.samDisplayInline .samItem {

    /* width: auto; */
    height: 60px;
    display: block;
    /* margin-right: 10px; */
    line-height: auto;

}

.samItem {

    /* width: inherit; */
    /* height: inherit; */

}

.samItem a {
 display: inline-block;
}

Ist das so verständlich?

upload_2021-5-18_19-6-40.png
 
Hi,

ich schau mir das morgen mal in Ruhe an.
Es geht, aber ich bin mir noch nicht sicher ob ich verstanden habe warum... :)

Aktuell sieht die EXTRA.LESS so aus:

Code: 
.BannerRow
{
    display: flex;
    justify-content: center;
//    justify-content: space-between
//    align-items: center;
//    margin-left:auto;
//    display: inline;
//    margin-top: 0px;
//    padding: 0px;
    width: 100%;
//    height: 100%;
    background-color: black;
}

.BannerRow .BannerElement
{
    margin: 3px;
    padding: 0px;
//    width: 240px;
//    height: auto;
    float: left;
    background-color: red;
}



.AdsManagerCustom
{
    margin: 0px;
    padding: 0px;
//    width: 100%;
//    height: 60px;
//    float: left;
//    background-color: yellow;
//    border: solid pink 5px;
   
}

.samDisplayInline .samItem:last-child {

    /* margin-right: 0; */

}

.samDisplayInline .samItem {

    /* width: auto; */
    height: 60px;
    display: block;
    /* margin-right: 10px; */
    line-height: auto;

}

.samItem {

    /* width: inherit; */
    /* height: inherit; */

}

.samItem a {
display: inline-block;
}
 
So wird das nicht funktionieren.

Das Auskommenierte musst du entsprechend anpassen. Ich kenne ja nicht das Template wo das gesetzt wird, evtl. braucht es dann einen genaueren Selektor. Wie gesagt, ich kenne das AddOn nicht.

Du solltest das konsolidieren und zusammenfasse.

Zum Warum: Es war ein Kuddelmuddel mit Block und Inline Elementen. samItem ist ein DIV, dem Inline aufgezwungen wurde, das geht ist aber unschön da die restichen Standardeinstellungen für DIV auf Block ausgelegt sind.

Dann habe ich aus dem Anker ein Inline Block gemacht, da es ein Bild enthält, und das soll ja immer gleich groß sein.
 
Hoffi schrieb:
Du meinst den roten Rand. Das ist keine margin.

CSS: 
.BannerRow .BannerElement {
    margin: 3px 3px 0px 3px;
Zum Vergrößern anklicken....


OK, das habe ich glaub verstanden.
Du machst die unteren 3px weg und dann fallen die 5px nicht mehr so ins Gewicht.
Und ich verstehe auch warum das Murks ist.
--> Nein Hoffi! So machen wir das nicht :)




Hoffi schrieb:
So wird das nicht funktionieren.

Das Auskommenierte musst du entsprechend anpassen. Ich kenne ja nicht das Template wo das gesetzt wird, evtl. braucht es dann einen genaueren Selektor. Wie gesagt, ich kenne das AddOn nicht.

Du solltest das konsolidieren und zusammenfasse.

Zum Warum: Es war ein Kuddelmuddel mit Block und Inline Elementen. samItem ist ein DIV, dem Inline aufgezwungen wurde, das geht ist aber unschön da die restichen Standardeinstellungen für DIV auf Block ausgelegt sind.

Dann habe ich aus dem Anker ein Inline Block gemacht, da es ein Bild enthält, und das soll ja immer gleich groß sein.
Zum Vergrößern anklicken....

Hi, ja das Auskommentierte habe ich noch nicht angesehen.
Ehrlichgesagt habe ich es auch noch nicht so richtig gerafft was du da baust.

Was spricht dagegen .samItem flex zu machen?
Also:

Code: 
.samItem a {
display: flex;
}

Soweit ich es verstanden habe kommt IE10 mit dem ganzen flexgeraffel nicht klar.
Kann man das sinnvoll abwärtskompatibel machen, oder mache ich mir das Leben dann noch schwerer?


Vielen Dank für eure bemerkenswerte Geduld mit mir :)
 
Wer bitte hat den noch ein Augenmerk auf IE? Der wird einfach komplett ignoriert.
 
sps-forum schrieb:
-> Nein Hoffi! So machen wir das nicht :)
Zum Vergrößern anklicken....

Danke!

sps-forum schrieb:
Was spricht dagegen .samItem flex zu machen?
Zum Vergrößern anklicken....
Weil unterhalb von SamItem nur ein Element ist, da ist flex nicht notwendig. Ein Block Element ist hier das richtige, da es sich ja um Blöcke hadelt.

Der umgebende Bereich bekommt display: flex; und das hat er ja auch bei dir.

Vergess IE. Ab IE 11 geht das meiste, ab Edge ist es eh ein Chromium Browser. Für IE10 zu bauen ist extrem umständlich und ansolut zu viel arbeit. Da müsste man fast einen eigenen Style bauen, weil der nix kann. Aber der ist ja auch schon ewig aus dem Support raus.

sps-forum schrieb:
Ehrlichgesagt habe ich es auch noch nicht so richtig gerafft was du da baust.
Zum Vergrößern anklicken....
Ich habe eigentlich nur auf Block umgebaut wie es sein sollte, überflüssige Elemente rausgeworfen, und dann noch ein klein wenig optimiert.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben