Position einer Grafik in die sidebar über den footer

jared

hi liebes forum

habe ebenfalls ein kleines positionierungsproblem! Ich möchte nämlich eine von mir erstellte grafik in die sidebar einfügen

aber sie soll fest stehn und am besten genau über dem footer! wie kann ich dies im css bewerkstelligen? ich hab schon einige css foren durchsucht und auch im selfhtml workaround gesucht aber ich komme auf keinen grünen zweig

Zitat

SuMu
ähnlich deinem Grünen Kaktus!

zur veranschaulichung habe ich eine kleine grafik erstellt wie ich es gerne haben würde...

Bitte hier klicken um zum beispielbild zu kommen

hab dem bild schon eine class und eine id verpasst! wenn mir jetzt einer nen kleinen stups in die richtige richtung zum thema "positionierung" geben kann wäre ich sehr happy :razz:

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

telekommander

Gedanken ...

Dem [FONT="Courier New"]#footer { position: relative }[/FONT] verpassen, ohne Koordinaten ([COLOR="Red"]![/COLOR]).
Und das [FONT="Courier New"]#bild { position absolute; left: ??px; top:[COLOR="Red"]-[/COLOR]??px; }[/FONT] zum #footer, mit Koordinaten.
Das [FONT="Courier New"]#bild [/FONT]muss sich innerhalb des [FONT="Courier New"]#footer[/FONT]s befinden, mit negativer top-position, damit befindet sich das Bild über dem Footer.

HTML

<div id="footer" style="position: relative; ( ... ) ">
 <div id="bild" style="position: absolute; left: 100px; top: -100px; ( ... )">
 </div>
</div>

... oder redest du etwa von "fixed" Position ? ( weil dann wäre noch der IE ... )

jared

HTML

.footer { clear: both; text-align: center; line-height: 1.8em; padding: 10px 0 10px 0; border-top: 1px solid #efefef; }

das sind meine momentanen style angaben vom footer! was passiert wenn ich sie so änder wie du es geschrieben hast???

verschiebt sich dann nicht alles?

mein footer wird doch über einen php befehl eingefügt! da kann ich ja nicht einfach mit nem div id kommen oder? vllt erkenne ich die lösung auch noch nicht!

ps: ne ne ne fixed lösung will ich nich! soll schon starr sein

Olafb

Ich würd es #content als Hintergrundbild geben. Dann machst du es unten etwas größer, so das es den Footer überragt, verstehst!?

HTML

#content{
 background : url(pfad/zum/bild.gif) no-repeat bottom right;
}

jared

hm! bevor ich jetzt mit dem content rumspiele kannst du mir ne kurze info geben? content ist für was genau zuständig?

und was meinst du mit "bild unten etwas größer machen"?

ich glaub da gibt es soviele möglichkeiten aber ich bekomme keine hin die mir gefällt! haben noch andere irgendwelche ideen?
unsere css meister vllt?

Olafb

Du brauchst erst mal nur den Schnippsel mit angep. Pfad in deine CSS einbinden, dann solltest du sehen was ich mit "bild unten etwas größer machen" meine. Halt noch was Leerraum dazugeben ;)
So wird es ja erst mal vom Footer verdeckt. Anschließend musst du wahrscheinlich der Sidebar (EDIT: #oberbox) noch unten etwas margin geben. Damits dann auf kürzeren Seiten nicht von selbiger verdeckt wird.

telekommander

Code

.footer { position: relative; clear: both; text-align: center; line-height: 1.8em; padding: 10px 0 10px 0; border-top: 1px solid #efefef; }

Verschieben ? Nee, denke nicht.
Wohin auch, so ganz ohne Positionsangaben.
Schliesslich nur ein simpler Trick, damit das Bild wiederum absolut zum Footer positioniert werden kann.

Olafs Vorschlag mit dem Backgroundimage funzt auch, würde es aber dem Footer unterschieben, schliesslich lässt sich das Backgroundimage auch Positionieren, auch negativ.

Code

.footer {
background : transparent url(pfad/zum/bild.gif) 100px -100px no-repeat;
}

Evtl. musst du dann aber noch mit Ebenen arbeiten : z-index;

jared

hab alle eure vorschläge ausprobiert aber irgendwie hauts einfach nicht hin! entweder zerschiesse ich mir vollkommen mein design oder es erscheint einfach nix

hab es jetzt erstmal mit der img funktion eingefügt

HTML

<img src="http://www.jared2.de/wp-content/themes/internetsharing/images/links_logo2.jpg" alt="Logo Nummer Eins" title="Logo Nummer Eins" />
<img src="http://www.jared2.de/wp-content/themes/internetsharing/images/rechts_logo.jpg" alt="Logo Nummer Zwei" title="Logo Nummer Zwei" />

es wird auch schön angezeigt wie ich es haben will! nur leider eben gleich unter der sidebar!
wenn ich es über das css mache gehts einfach nicht! gibts ne möglichkeit es so zu lösen??? also über <img>

danke leutz aber für die tipps die ihr bis jetzt gegeben habt

SuMu

http://www.mediaevent.de/tutorial/positionieren.html

Olafb

Dies hier ist auf deiner Startseite getestet, und es funkt.

HTML

#content {
background :url(http://www.jared2.de/wp-content/themes/internetsharing/images/links_logo2.jpg) 700px 85%  no-repeat;
 margin: 10px auto; width: 960px; }

Aber so geht es nicht überall, da ja 85% immer ein anderer Wert ist, je nach Seitenhöhe. Also zurück zum 1. Vorschlag von mir ;)
Du musst nur das Bild um die Höhe des Footers unten größer machen, das muss doch zu verstehen sein :?

Extratipp, das ist IMHO kein Content, d.h. kein IMG-Tag sondern Design -> CSS

EDIT hier noch mal das ganze, damit ist das Bild dann zu tief und unterm Footer. Nu öffnest du dein Bild im Bildbearbeitungsprog. und gibst ihm unten (rechts) entweder weiß oder transparent mehr Raum (Footerhöhe) dann hochladen und fertig:

Zitat

#content {
background :url(http://www.jared2.de/wp-content/the…links_logo2.jpg) right bottom no-repeat;
margin: 10px auto; width: 960px; }

Das Probelm ist die Positionierung, es gibt nur von oben/von links oder unten/rechts, es gibt kein von unten/von rechts. Deshalb diese Verbiegungen.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Position einer Grafik in die sidebar über den footer

Jetzt mitmachen!