Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

Positionierung mit css





Frage

Hallo! Ich bekomme es nicht hin eine Ebene (in der ein Bild enthalten ist) immer am unteren rechten Rand zu positionieren. Es soll mitgescrollt werden, dass heißt, wenn der nebenstehende linke Text zu lang ist, dann sieht man das Bild erst, wenn man runterscrollt. Das funktioniert auch. Das Problem ist aber, wenn der Text zu kurz ist (z.B. nur eine Zeiele oder so), dann ist das Bild extrem weit oben und nicht ganz unten wo es hingehört :-(. Ich habs schon mit absoluter und relativer Positionierung versucht, aber ohne Erfolg bei kurzem Text. Hier mal der css-Teil: [code] body { padding: 0px; margin: 0px; background-image:url(../img/background.gif); background-repeat:repeat-y; background-position:right; width:100%; height:auto; min-height:100%; z-index:1; color:#222222; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9pt; } #inhalt {width: auto; height:auto; margin: 240px 200px 0px 10px; /*background-color: #ff11aa;*/} #logounten {position:relative ; bottom:8px; top:auto; right:5px;width: 100px; height:auto; padding:0px; z-index:3} [/code] Also bei "inhalt" steht mein content-Bereich, also der eigentliche Inhalt. Wenn dort der Text zu kurz ist, dann rutscht das Bild (welches mit "logounten" definiert ist) gleich unter die Zeile nach dem Textende. Hier der Aufruf im html-Teil: [code] <div id="inhalt"> <p>viel oder wenig Inhalt</p> </div> <? // Logo unten rechts ?> <div align="right"> <div id="logounten"><img src="../img/logo.jpg" width="82" height="100" border="0" /></div> </div> [/code] Kann mir jemand helfen?

Antwort 1 von rfb

probier mal dem body eine Höhe zu geben (height:100%) und entferne mal das <div align="right"> (wozu soll das überhaupt dienen), danach sollte sich das logo-div am unteren fensterrand orientieren (Theorie, habs nicht ausprobiert)

Antwort 2 von kathrin77

Habe Höhe auf 100% gesetzt, aber ohne Erfolg. Das <div align="right"> dient dazu, dass die Ebene rechts ausgerichtet wird, sonst wäre es im linken Browserrand.

Kathrin

Antwort 3 von kathrin77

Ich habs gerade geschafft :-):

CSS:
 
#logounten {position:absolute; bottom:8px; right:0.1cm; z-index:4; background-position:bottom right; background-image:url(../img/logo.jpg); background-repeat:no-repeat; width:100px; height:110px;}


html:

<div id="logounten"></div>
 


Danke für die Bemühungen!

Antwort 4 von MoRe99

Hehe ...

Wollte dir gerade den folgenden Link empfehlen: Dr. Web. Da geht´s um genau das, was du gerade gemacht hast. ;-) Oder hattest du den Link gar selber gefunden???

Antwort 5 von kathrin77

@MoRe99
Nein, habs selbst herausgefunden :-). Danke für den Link, sehe ich mir auf jeden Fall mal an!

Grüße,
Kathrin

Antwort 6 von kathrin77

Ich habe mich leider zu früh gefreut, denn es klappt doch noch nicht so, wie ich mir das wünsche. Das Logo wir ja nur um unteren rechten Rand des Browserfensters positioniert, nicht aber am unteren rechten Seitenrand (so will ich es gern).

@MoRe99
Leider hat mir der Link nicht weitergeholfen, denn dort geht es ja um Hintergrundbilder, aber ich habe ja schon in meiner css-Klasse (body, s. oben) ein Hintergrundbild platziert. Man kann ja leider nicht 2 Hintergrundbilder angeben.

Das Hintergrundbild im body ist ein rechteckiger 200 Pixel breiter Streifen, der rechts von oben bis unten einer Seite zu sehen ist. Nun will ich aber wie gesagt noch unten rechts ein Logo platzieren und zwar am Ende der Seite und nicht am Ende des Browserfensters.

Wäre schön, wenn mir jemand noch einen Tipp geben könnte!

Danke, Kathrin

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: