CSS Bild fest verankern

[Physically]

Hey Leute,

wollte fragen, wie ich ein Bild so Positionieren kann, dass es IMMER an der Position fest sitzen bleibt, verschiebt sich nie, egal welche Bildschirmauflösung...danke

 

[Cheetah1337]

Meinst du jetzt das Fenster oder einen Teilbereich deiner Seite?
Wenn du zweiteres meinst würde ich einfach zu Frames greifen.

 

[bu1137]

@Cheetah1337: Frames? NEIN!

Dafür gibts position fixed oder absolute.

 

[eri]

<img src="abc.jpg" style="position: absolute; top: 100; left: 100"></img>

 

[Physically]

Alles klar danke!

Noch ne Frage:

Den Code habe ich:

<div id="footertop"> <!--FOOTER OF THE WEBSITE-->
    
        <div id="fbox1">
        	<jdoc:include type="modules" name="fbox1" />
        </div>
        
        <div id="fbox2">
        	<jdoc:include type="modules" name="fbox2" />
        </div>
     
    </div>

Hier die CSS:

#fbox1{
	float: left;
	width: 223px;
	height: 100px;
	margin-top: 47px;
	margin-left: 18px;
	background-color: #0F0;
}

#fbox2{
	width: 223px;
	height: 100px;
	margin-left: 259px;
	margin-top: 47px;
	background-color: #FF0;
}
}

Beide haben einen margin-top von 47px und sind gefloatet. Der Abstand von fbox1 vom Top wird ausgeführt, aber wenn ich den margin-top dem DIV #fbox2 zuweise, dann verschiebt sich der komplette DIV, also der "footertop"-DIV...warum ist das so? Liegt das am float?

 

[Daaron]

Hm, es hängt eher an den Margins. Margin-top hat immer wieder mal eigenartige Nebeneffekte dan das Elternelement, ich hab auch nie begriffen wieso es das tut.
Aber es gibt ja ne elegante Lösung: Gib doch #footertop n padding-top. erstens funktionierts auch, zweitens sparts effektiv eine Zeile CSS.

Gibt aber noch ein paar andere elegante Lösungen:
- #footertop auf position:relative oder absolute (je nach Bedarf. halt kein "static", sprich den Standard) und den Kindern position absolute mit entsprechenden Koordinaten relativ zu #footertop
- ordne die Kinder mit display:inline-block an. Ist viel besser als float:left für sowas geeignet, weil man damit ein hübsches Raster-Muster erzeugen kann. Läuft leider nicht in IE6 (und evtl. auch nicht in 7, grad nicht sicher), aber sowas nenn ich vertretbaren Kollateralschaden

 

[Physically]

Vielen Dank Daaron, werde es gleich ausprobieren!

Habe jetzt der #footertop die position absolute gegeben mit einem top von 1450px (absolute geht doch immer vom oberen linken rand aus oder?) und bei den Kindern einfach die Werte gelassen, auch mit margin-top und es funktioniert...

EDIT: Sollen insgesamt vier Boxen nebeneinander sein, aber die dirtte rutscht wieder in die nächste Zeile. Ich weiß nicht ob das mit "display: inline-block" so sinnvoll ist, weil einige benutzen noch den IE.

EDIT2: So, jetzt habe ich die Kinder auf position absolute in der #footertop box gemacht, und es geht! Danke Dir!

 

[Daaron]

position:absolute positioniert in Abhängigkeit der linken oberen Ecke, aber nicht zwingend der Ecke des Bildschirms. Wenn das Elternelement einen Position-Wert außer "static" (Standardwert) hat, dann berechnet "absolute" in Abhängigkeit vom Elternelement.
So kannst du problemlos einen Footer (mit position:relative, ohne Werte für top, left,...) machen, der sich normal mit dem Content nach unten bewegt, aber trotzdem in sich absolut positionierte Kinder enthält, die meinetwegen immer 10px vom oberen Rand des Footers entfernt sind.

display:inline-block hat natürlich im IE6 keinen und im IE7 nur begrenzten Sinn, genauso im FF2... aber man muss seine User halt auch mal dazu erziehen, endlich zu patchen. Auch in Win2k kann man FF4.0+ verwenden...