Modul Zufallsbild am unteren Rand von linker und rechter Spalte positionieren

[findling]

Guten Tag
Habe mit fe_page.tpl ein Layout mit Header, Footer, left, main und right ausgewählt.
In der linken (und rechten Spalte) kommen 600x210px grosse Bilder mit dem Modul
Zufallsbild zum Einsatz.
Ist der main-Bereich kleiner als 600px siehts gut aus. Ist der main-Bereich aber grösser,
bleiben die Bilder oben kleben was nicht so toll wirkt. Ich hätte sie in diesem Fall gerne
unten, direkt über dem Footer.
Da ich nicht so der CSS-Hirsch bin, krieg ichs einfach nicht geregelt.
Für einen Hinweis bin ich dankbar!

[trilobit]

Hallo,

hast du zu deiner Seite vielleicht einen (Vorschau-) Link, wo man sich das ganze direkt im Browser mal anschauen kann? Das würde bei der Hilfestellung enorm helfen

Cheerio,
Alex

[SFuchs]

Das Problem ist das die Divs sich alle nach oben Ausrichten - sie werden je nach dem wieviel Inhalt oben ist nach unten geschoben.

Abhelfen kann man sich da mittels Absolut Positionierten Divs die man am unteren Rand anheft.

Andere Möglichkeit innerhalb der Sidebar die Bilder als Background Image einzuspielen mit positionierung nach unten (style="url('......meinbild.jpg') no-repeat left bottom;"). Da kommst du dann aber nicht umhin das Zufallsbildmodul umzubauen.

[findling]

Hallo trilobit
Läuft z.Z. nur lokal auf meinem Rechner ...
Liebe Grüsse

[findling]

Hallo SFuchs

Habs mit position:abolute; versucht.
top scheint zu funktionieren
left schiebt das modul aus dem div #left
right ebenso
bottom 0; reagiert für mich nicht nachvollziehbar: Untere Kante des Zufallbildes fällt mit Oberkante des div #left zusammen (ist also statt unten im div#left über dem div#left.

position:fixed;
bottom:0px; macht was es offenbar tun muss und fixiert das Zufallsbild am unteren Bildschirmrand und nicht im div #left.

Bei position:relative; passiert nichts.

background-image: Ich möchte nicht ein einzelnes Bild einbinden sondern das Modul Zusatzbild.
Da hab ich keine Infos gefunden wie das gehen sollte.

Liebe Grüsse

[SFuchs]

Zuerst:
Um einen Layer mit Pos:abs zu positionieren solltest du dir erst ein Layer mit Pos:relative erstellen. Einer der vorhandenen in dem der zusätzlich Layer meinetwegen liegt.

<div class="ich-bin-relative">
  <div class="ich-bin-absolut">
  ....  
  </div>
</div>

Damit tut man sich schon leichter, gibts keinen Layer in der Hirachie mit Pos:absolute wird der Body genommen, was dann immer gut aussieht wenn man den Browser skaliert

Ich geh einfach mal davon aus du verwendest Faux Colums (gibt auch umwege über JQuery um Divs auf die Volle höhe zu bringen). Und dein eigentliches Problem ist das die Sidebar eigentlich nur so Hhoch wird wie der Inhalt. Typische Spaltenlayouts die man früher mit Tabellen gemacht hat gehen mit Layern nicht, man kann es Faken oder mit JS hinbiegen.

Positionieren über die Sidebar scheidet daher aus, da musst du über den Footer gehen, da der entweder durch die Sidebars oder den Contentbereich nach unten gedrückt wird.

Den machst du Pos:relativ und verankerst auch dort dein Div für das Zufallsbild.. Musst du dann negativ Positionieren damit er über den Footer rutscht.

Nur macht es dein Problem nicht besser, da der Layer dann über deinem Content liegt (vielleicht sind es auch zwei mit zwei Zufallsbildern weis ich ja nicht) dann wird der Inhalt nicht mehr Klickbar.

Und dann steckst du in der Teufelsküche weil du dann deine ganzen Inhaltsschichten die du hast mit dem Z-Index so sortieren musst, das...

a. deine Faux Columns sichtbar bleiben.
b. deine Zufallsbilder unter dem Content liegen
c. dein Content Selektier- und klickbar bleibt
d. falls du Lightboxes verwendest musst du die auch mit Z-Index sortieren sonst ploppen die unter dem Content auf

Als Background Image selbst wäre es einfacher das kann man einfacher positionieren. Vielleicht gibt es dort ja ne Möglichkeit das Zufallsbildmodul entsprechend umzustricken das kein IMG erzeugt wird, sondern der Inhalt Dynamisch den Inline Style der Sidebar überschreibt. Zufallsbild hab ich mir aber noch nicht so genau angesehen,bei mir war es damals das Seitenbild Modul (wie ich es bei meiner uralt Seite jiffi.de gemacht habe).

Pfft zuviel geschrieben muss was tun

[findling]

Lieber SFuchs
Herzlichsten Dank für Deine Mühe ... und sorry dass ich Dich vom Arbeiten abhalte !

Ich habe vermutet, dass die gefloateten Div's im Div #container das Positionieren schwierig machen.
Deine Ausführungen kann ich einigermassen nachvollziehen, bin aber leider zu wenig bewandert
um alles zu begreifen.

Habe selber weiter geübt, die Rückenverspannung ignoriert, und nochmals 3 Stunden investiert
(mittlerweile hat mich das Ganze gefühlte Wochen beschäftigt) und, o Wunder, eine Lösung gefunden
die zu funktionieren scheint. Vermutlich ist das weit weg von elegant und der Profi winkt leicht gequält ab -
aber man tut halt was man kann.

Habe also:
-einen neuen Layoutbereich definiert > Backend - System - Einstellungen
-diesem dann im Seitenlayout den Bereich "über der Fusszeile" zugeordnet.
-die Module Zufallsbild in diesen Bereich verschoben
-per CSS den Spalten #links und #rechts die min-height der Grafiken zugewiesen
-per CSS das linke Modul mit position:absolute; left:0px, bottom:0px;
-per CSS das rechte Modul mit position:absolute; right:0px, bottom:0px;
definiert.

So siehts nun aus als wären die Grafiken in den Spalten links und rechts - in Wirklichkeit sind sie aber in einem
neuen Div über der Fusszeile untergebracht.

So im Groben denke ich, dass es in die Richtung geht die Du mir zu erklären versucht hast ?

Nochmals herzlichsten Dank für Deine Mühe und liebe Grüsse

[SFuchs]

Vom Arbeiten abhalten das mach ich alleine, mach das ja freiwillig

Also ich kann schon sagen bist mir recht gut gefolgt, hatte ehr sorge das ich mal wieder viel zu umständlich erklärt habe (Live erklär ich anders als im Forum).

Vom dem her Glückwunsch, je mehr Probleme kommen desto mehr kann man lernen.