WBCE CMS Forum

rudi222

Developer

OneByOne - Hintergrundfarbe

Hallo!

Ich möchte mit dem obo drei spalten mit unterschiedlicher Hintergrundfarbe erstellen.

Lässt sich das mit dem Feld Html-Code machen und wie wäre der Code zu einzugeben? Alle meine Eingabe-Versuche werden als Text ausgegeben.

florian

Administrator

Re: OneByOne - Hintergrundfarbe

Mit dem HTML-Code geht das so:

<div style="background-color:lightgreen">Alles so schön bunt hier</div>

Die Spalten sind aber ggf. je nach Inhalt unterschiedlich hoch, d.h. Du müsstest in einem der Felder dann noch zusätzlich das bewährte Equalheight-Javascript einfügen:

<script>
equalheight=function(t){var i,e=0,h=0,r=new Array;$(t).each(function(){if(i=$(this),$(i).height("auto"),topPostion=i.position().top,h!=topPostion){for(currentDiv=0;currentDiv<r.length;currentDiv++)r[currentDiv].height(e);r.length=0,h=topPostion,e=i.height(),r.push(i)}else r.push(i),e=e<i.height()?i.height():e;for(currentDiv=0;currentDiv<r.length;currentDiv++)r[currentDiv].height(e)})};

$(window).load(function() {
  equalheight('.obo_one-third');
});


$(window).resize(function(){
  equalheight('.obo_one-third');

});
</script>

rudi222

Developer

Re: OneByOne - Hintergrundfarbe

Herzlichen Dank Florian, das Ergebnis ist perfekt!

bastie

Mitglied

Re: OneByOne - Hintergrundfarbe

Hallo Florian,

wie muß es im HTML-Feld aussehen?

Ich habe es im Feld HTML/Code-Inhalt 1 so versucht:

<div style="background:#C0C0C0">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur</p>
</div>
<script>
equalheight=function(t){var i,e=0,h=0,r=new Array;$(t).each(function(){if(i=$(this),$(i).height("auto"),topPostion=i.position().top,h!=topPostion){for(currentDiv=0;currentDiv<r.length;currentDiv++)r[currentDiv].height(e);r.length=0,h=topPostion,e=i.height(),r.push(i)}else r.push(i),e=e<i.height()?i.height():e;for(currentDiv=0;currentDiv<r.length;currentDiv++)r[currentDiv].height(e)})};

$(window).load(function() {
  equalheight('.obo_one-third');
});


$(window).resize(function(){
  equalheight('.obo_one-third');

});
</script>

In den Feldern 2 u. 3 nur den Hintergrund per CSS geändert und halt einen Absatz mehr bzw. weniger. Die Farben sind OK, nur keine gleiche Höhe. Wo liegt mein Fehler?

---

Wer Rechtschreibfehler findet, darf sie gerne herunterladen, kopieren, weiterverwenden und weiterverbreiten. Ich beanspruche in keiner Weise ein Urheberrecht. Meine Rechtschreibfehler stehen unter der MIT-Lizenz.

florian

Administrator

Re: OneByOne - Hintergrundfarbe

Nicht Dein Fehler. Fehler von mir.
Der equalheight-Aufruf muss sich auf die divs in den ObO-Divs beziehen, also so lauten:

<script>
equalheight=function(t){var i,e=0,h=0,r=new Array;$(t).each(function(){if(i=$(this),$(i).height("auto"),topPostion=i.position().top,h!=topPostion){for(currentDiv=0;currentDiv<r.length;currentDiv++)r[currentDiv].height(e);r.length=0,h=topPostion,e=i.height(),r.push(i)}else r.push(i),e=e<i.height()?i.height():e;for(currentDiv=0;currentDiv<r.length;currentDiv++)r[currentDiv].height(e)})};

$(window).load(function() {
  equalheight('.obo_one-third div');
});


$(window).resize(function(){
  equalheight('.obo_one-third div');

});
</script>

Randbemerkung: Der <script>-Bereich darf nur im einem der angezeigten ObO-Blöcke stehen. (Also nicht in alle drei Felder reinkopieren)

bastie

Mitglied

Re: OneByOne - Hintergrundfarbe

Perfekt, danke für die schnelle Antwort und ich habe wieder etwas dazugelernt.

---

Wer Rechtschreibfehler findet, darf sie gerne herunterladen, kopieren, weiterverwenden und weiterverbreiten. Ich beanspruche in keiner Weise ein Urheberrecht. Meine Rechtschreibfehler stehen unter der MIT-Lizenz.