Problem mit div-Positionierung

tbillert · 23. November 2012 23:48

Hallo zusammen,

ich bin mal wieder dabei, die Website meiner Frau zu verschoenern. Zumindest versuche ich es.

Dort habe ich ein neues div in's Template gefrickelt, was das Bildchen links unter dem Menue anzeigt. An sich einfach, dachte ich - links div.sidebar, rechts div.main, alles zusammen gekapselt von div.content. In div.sidebar liegt div.menu_vert, darunter packe ich mein neues div.leftcornerimage.

Passt auch soweit, nur habe ich genau 2 Probleme, die ich nicht geloest bekomme:

1. Haette ich gern div.sidebar so hoch wie div.content und div.leftcornerimage so positioniert, dass das Bild immer unten ueber dem Footer steht, egal wie hoch das Menue grade ausgeklappt ist. Das bekomme ich nicht hin. Ich arbeite momentan mit fixem margin-top.

2. Steht nach dem Text in div.main immer ein <br class="clear" />, um den Bildumlauf um die Bildchen rechts zu unterbrechen. Ansonsten rutscht mir bei langem Bildchen und kurzem Text die punktierte Linie und der Seitenanfangslink links neben das Bild. ABER: wenn ich das <br class="clear" /> stehen lasse, kommt die Linie und der Link immer unterhalb meines div.leftcornerimage. Den Grund dafuer kapiere ich nicht - das ist doch in ein komplett anderes Parent eingebettet...

Aus dem CSS:

Hier klicken, um den Code zum Kopieren zu markieren

.clear {
    clear: both;
    height: 1px;
    margin: 0;
    padding: 0;
    font-size: .7em;
    line-height: 1px;
}

Das sieht fuer mein Dafuerhalten okay aus.

Koennt Ihr mir bei diesen beiden Problemen weiterhelfen?

Besten Dank + viele Gruesse,

Thomas.

RafaelCzernek · 23. November 2012 00:20

Schick mir Template und CSS-Datei an meine E-Mail und ich änder das für dich beschreibe bitte nur nochmal genauer was du machen willst und wie am besten Screenshot und zusammen schneiden ...

mike-r · 23. November 2012 04:10

tbillert schrieb:

Haette ich gern div.sidebar so hoch wie div.content und div.leftcornerimage so positioniert, dass das Bild immer unten ueber dem Footer steht, egal wie hoch das Menue grade ausgeklappt ist. Das bekomme ich nicht hin. Ich arbeite momentan mit fixem margin-top.

Wo Du in #content eh kein Hintergrundbild hast kannste das dort zuweisen. Ist das einfachste, und da das Bild eh auch semantisch nur eine Schmuckfunktion hat, ist es dort auch nicht deplaziert.

Beispiele (ausser links unten glasses ): http://www.css4you.de/example/background-position.html

tbillert · 24. November 2012 23:34

Hallo Rafael, hallo Mike,

ich danke Euch!

Hatte heute noch ne andere Idee, diese Bilder - es kommen noch mehr - unten ueber div#footer als Borte zu gestalten (vielleicht mache ich das ja auch noch). Der Link von Mike war jedenfalls genau das, was mir an Wissen gefehlt hat! Musste das Bild aber in div#pagewrapper packen, da div#content ueber der Linie aufhoert (obwohl der nach-oben-Link auch noch dieses als Parent hat) und das Bild somit zu weit oben steht und in's Menue rutscht.

So geht es jetzt jedenfalls:

Hier klicken, um den Code zum Kopieren zu markieren

div#pagewrapper {
border:1px solid #000;
max-width:950px;
min-width:950px;
background-color:#fff;
color:#000;
margin:0 auto;
background-image:url(uploads/images/Hintergruende/katze.png);
background-repeat:no-repeat;
background-position:bottom 60px left 20px;
}

Also Rafael, danke fuer Dein ueberaus nettes Angebot - ich muss nun nicht mehr davon Gebrauch machen.

Ich finde es immer wieder toll, wie schnell, gut und konkret Amateuren wie mir in diesem Forum geholfen wird - Hut ab, Jungs!

Viele Gruesse,

Thomas.

Beitrag geändert von tbillert (24. November 2012 23:35)

tbillert · 24. November 2012 01:26

Hm,

ganz so fertig isses wohl doch noch nicht...

Auch hier rutscht mir natuerlich das Menue in das Bild rein, wenn es weit genug aufklappt. Siehe

http://www.tagesmutti-annett.de/index.p … ernaehrung

Hm, vielleicht mache ich doch ein separates div ueber die komplette Breite unter div#main...

Gruss,

Thomas.

rage_all · 24. November 2012 10:50

Hmm... Ich weiß nicht, ob sich das (ohne Javascript) überhaupt so realisieren lässt.
Vorausgesetzt ich hab es richtig verstanden:

Das Bild soll stets angezeigt werden, ohne dass Text oder Navigation überlagert
Das Bild soll stets xPixel über dem Footer liegen (immer an derselben Stelle, egal wie weit die Navigation nach oben hin entfernt ist - Platz da, schön; kein Platz da, schaffe Dir Platz)

Ich hab ein bisschen mit meinem Feuerkäfer herumexperimentiert und bin zu folgendem Schluss gekommen:

Die Höhe der Navigation ist - nach CSS - unbekannt und dynamisch, mal mehr mal weniger
Also bringt es nichts, das <div> unter das Menü zu kleben, um einen exakten Abstand zum Footer zu bekommen
Aus demselben Grund bringt es aber auch nichts, es in den Footer zu verschieben und hochzurücken, weil es auch von dort aus in die Navigation reinläuft (die zwei haben ja per se nichts miteinander zu tun)

Ich kann mir vorstellen, dass via JS die Größe der Navigation ausgemessen ... dann eingesetzt in den Style vom <div> ... könnte ... aber da kenne ich mich zu wenig aus.
Mein Vorschlag: Kleb es doch unter die Navigation. Lass etwas Luft nach oben hin - hier und da passt es mal besser, andernorts weniger. Wird aber auch je nach Browser differieren, fast zwangsläufig.

Und wenn Du viel Lust hast, kannst Du ja z.B. ein {content block='bildchenunterdernavigation'} einbauen und auf den jeweiligen Seiten verschiedene Bilder einsetzen...
So ließe sich vielleicht sogar die meiste Kontrolle darüber erhalten: Ist auf dieser Seite das Menü sehr ausladend, nimm ein kürzeres Bild, ist es knapp, nimm ein etwas ausladenderes - halt immer mit derselben Breite, weil es ja dann in dem 'sidebar'-Div steckt.

tbillert · 24. November 2012 10:54

Halo rage_all,

danke fuer Deine Gedanken dazu! Diese Loesung (div unter das Menue, etwas margin nach oben und dann laeuft es mit dem Aufklappen des Menues mit) hatte ich auch schon eingebaut.

Meine Angetraute moechte nun doch all diese Viecher unten als Leiste ueber den Footer haben, finde ich auch gut, weil sich das leichter umsetzen laesst. Da kommt einfach ein neues div mit 100% Breite bezueglich div#pagewrapper rein und gut ist, nix kollidiert mehr. Habe eben weitere Bilder gemacht (diese Tiere prangen an unserem Zaun), werde dann mal freistellen und einbauen...

Viele Gruesse aus dem trueben Jena,

Thomas.

Beitrag geändert von tbillert (24. November 2012 10:55)

Andynium · 24. November 2012 13:52

Im übrigen, du bist auf CMSMS 1.8.2 ... abgesehen davon, dass man schon aus Sicherheitsgründen die Versionsinfo nicht so hinausposaunen sollte, ist CMSMS 1.11.3 aktuell wink .

mike-r · 24. November 2012 15:38

Das Menüproblem könnte man recht einfach lösen, indem man die #Sidebar mittels Padding(-bottom) in Bildhöhe aufzieht.
Wo's aber nun ganz anders werden soll...

tbillert · 24. November 2012 16:19

Hallo zusammen,

@cyberman: danke Dir fuer den Hinweis - habe die Version aus dem Footer eliminiert. Den Hinweis auf CMSMS lasse ich aber stehen :-)

Ja, ich weiss, dass ich auf einer alten Version bin - hatte vor knapp nem Jahr erst geupdatet, und das war recht aufwendig und schmerzhaft, weil es an alles Ecken und Enden klemmte. Deswegen tue ich mich damit eher schwer.

@mike-r: Danke - ich ich versuche aber erstmal den nun ausgemachten Weg.

Gruss,

Thomas.

Forum für CMS/made simple

#1 23. November 2012 23:48

Problem mit div-Positionierung

#2 23. November 2012 00:20

Re: Problem mit div-Positionierung

#3 23. November 2012 04:10

Re: Problem mit div-Positionierung

#4 24. November 2012 23:34

Re: Problem mit div-Positionierung

#5 24. November 2012 01:26

Re: Problem mit div-Positionierung

#6 24. November 2012 10:50

Re: Problem mit div-Positionierung

#7 24. November 2012 10:54

Re: Problem mit div-Positionierung

#8 24. November 2012 13:52

Re: Problem mit div-Positionierung

#9 24. November 2012 15:38

Re: Problem mit div-Positionierung

#10 24. November 2012 16:19

Re: Problem mit div-Positionierung

Fußzeile des Forums