Bild positionieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bild
bildschirm
code
entnehmen
fenster
hintergrundbild
http
inhalt
layout
machen
mittig positionieren
position
positionieren
steuer
tabelle
url
vorschlag
webseite
zelle
zusammenhang
-
Hallo,
ich möchte ein Bild so positionieren das es immer links neben dem layout ist.
So wie in dem Bild hier: http://www.youscreen.de/6b29161dd9.jpg
nur möchte ich das nicht mit background-position machen weil das je nach bildschirm dann wo anderst ist! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du kannst dein Hintergrundbild mittig positionieren (background-position:top center;). Damit das Bild dann links von deiner Seite ist, machst du das Bild deutlich Breiter, die Gesamtbreite sollte sein: Breite deiner Webseite + 2 * Breite des Hintergrundbildes. Und schon ist das Bild links neben deiner Webseite.
-
okey das hab ich ja schon :D
-
Mal ein anderer Vorschlag:
Du kannst dein dein Bild und dein Layout "floaten", und zwar folgendermaßen:
<img src="mein_bild.png" style="float: left;"> <div style="float: left;"> mein content.. </div> <p style="clear: both;"></p> -
also das hintergrundbild zu vergrößern ist in meinen augen eine eher ungeschickte möglichkeit da ein eh schon großes bild unnötig noch speicherintensiver gemacht wird.
auch finde ich das (zumindest dem beispielbild nach) das bild nicht als hintergrundbild ausgezeichnet sein sollte, sondern als <img> mehr sinn macht.
aus deinen angaben bezüglichweil das je nach bildschirm dann wo anderst ist!
kann man entnehmen das dein layout eine fixe breite hat (und ich gehe mal davon aus das das ganze wie im beispiel im fenster zentriert sein soll) - es stellt sich also erstmal die frage was denn passieren soll wenn das fenster des besuchers zwar breit genug ist um das layout zu zeigen (was andernfalls ja eine horizontale-scrollleiste hervorrufen würde), das bild aber nicht mehr ganz daneben passt:
layout und bild ganz angezeigen, also mit horizontaler-scrollleiste
hier könnte man es mit dem vorschlag von alexxus probieren, allerdings befürchte ich das das floating in zusammenhang mit der zentrierung leider nicht von allen browsern gut bewerkstelligt wird. ich würde die eigenschaften einer tabelle zur platzierung nutzen, aus semanitschen gründen allerdings nur als <div>`s via css als tabelle ausgezeichnet:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> html, body { height:100%; margin:0px; padding:0px; text-align:center; overflow:auto; } .nebeneinander { display:table; height:100%; margin:0px auto; } .nebeneinander > div { display:table-row; } .nebeneinander > div > div { display:table-cell; vertical-align:middle; } </style> </head> <body> <div class="nebeneinander"> <div> <div> <img src="bild.gif" alt="" /> </div> <div> <!-- inhalt --> </div> </div> </div> </body> </html>
dabei kannst du auch ganz einfach die vertikale positionierung der beiden bereiche über das vertical-align der zellen steuern, wie oben beide mittig.
das bild soll abgeschnitten werden, damit keine horizontale-scrollleiste kommt solange das layout ins fenster passt
hier zb über css position:absolute, was die position anhand der top- und left-werte regelt, relativ zum nächst-äußeren element das auch position:absolute oder position:relative hat (oder letztendlich zum body).<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> html, body { text-align:center; } .drumherum { position:relative; margin:0px auto; width:666px; } .daneben { position:absolute; width:222px; left:-222px; top:88px; } </style> </head> <body> <div class="drumherum"> <img class="daneben" src="bild.gif" alt="" /> <!-- inhalt --> </div> </body> </html>
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
