CSS-Positionierung von Bildern

hts · 01.10.2010, 23:15

Hi Leute,

ich habe eine Tabelle und an dieser möchte ich zwei Bilder positionieren, das eine oben rechts, das andere unten links. Beide Bilder sollen linksbündig zur Tabelle ausgerichtet sein.

Ich bekomme es einfach nicht hin

, das war mein letzter Versuch:

Code:

<div>
	<div style="float: left;">Hier befindet sich die HTML-Tabelle</div>
	<img src="oben.gif" style="vertical-align: top;" />
	<img src="unten.gif" style="vertical-align: bottom;" />
</div>

Ergebnis: Das obere Bild wird am richtigen Platz dargestellt, das untere Bild erscheint aber rechts nach dem oberen Bild und nicht wie erwartet an der Unterkante der Tabelle.

Wie bekomme ich das zweite Bild an der Unterkante des Tabellen-Divs linksbündig (überhaupt unten würde mir auch schonmal reichen

) ausgerichtet?

Destruction · 02.10.2010, 01:35

hts · 02.10.2010, 02:09

Naja, mit dem <br> sind jetzt beide Bilder rechts oben untereinander, anstelle von rechts oben nebeneinander - ist schon mal ein Fortschritt, aber nicht ganz, was ich wollte.

weazz1980 · 02.10.2010, 15:13

Wenn ich mal richtig rate willst du oben und unten eine Begrenzungsgrafik anzeigen?

Ich würde es so lösen:

<div id="wrapper">
<div class="oben"><img src="oben.gif" /></div>
<div class="box mit inhalt">Text Text Text...</div>
<div class="unten"><img src="unten.gif" /></div>
</div> 

und dann entsprechend mit CSS stylen

hts · 05.10.2010, 21:34

Zitat:

Zitat von weazz1980

und dann entsprechend mit CSS stylen

Da war ein guter Tipp von dir.

Ich habs jetzt gerade nochmal probiert und es läuft.

Code:

<div style="position: relative; display: inline-block; float: left;}">
<div id="chessboard" style="float: left;"></div>
<img src="bk.gif" />
<img src="wk.gif" style="position: absolute; bottom: 0; right: 0;" />
</div>

Im DIV chessboard wird per JS die HTML-Tabelle geschrieben.
Die beiden Grafiken passen sich jetzt dynamisch an.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Scriptangebot Alle Ordner nach bildern durchsuchen	DeathShadow	Scriptbörse	8	17.09.2010 22:22
Positionierung als div	cybertrek	HTML, Usability und Barrierefreiheit	2	27.07.2010 21:36
Zufallsauswahl von Bildern mit php	ePole	PHP Tipps 2010	11	13.04.2010 13:54
Ordnerstruktur bei vielen Bildern	Flor1an	Server, Hosting und Workstations	4	14.12.2009 18:50
Mehrere Auflösungen von hochgeladenen Bildern, Ansatz	christophM	PHP Tipps 2009	1	26.05.2009 15:13
Verlinkungen auf Bildern	Horvi	PHP Tipps 2008	5	23.05.2008 13:55
Sichtbarkeit von Bildern	Spezi	PHP Tipps 2008	2	15.09.2007 20:23
CSS Hover bei Bildern im IE	juhuwoorps	HTML, Usability und Barrierefreiheit	12	01.03.2006 20:28
Nur bestimmte Anzahl von Bildern darstellen??!!	Peoples	PHP Tipps 2005-2	4	31.12.2005 01:37
zentrierte Positionierung einer Seite bei höherer Auflösung		HTML, Usability und Barrierefreiheit	8	04.10.2005 12:35
Problem mit der Ausrichtung von Bildern		HTML, Usability und Barrierefreiheit	8	26.08.2005 19:16
Speichern von Text und Bildern verhindern		PHP Tipps 2005-2	6	26.08.2005 19:13
CSS positionierung im DIV	JEGO	HTML, Usability und Barrierefreiheit	21	29.06.2005 14:25
Random von Bildern ohne Browser neu laden		PHP Tipps 2005	6	20.01.2005 19:56
update von Bildern funktioniert nicht		PHP Tipps 2004	1	05.10.2004 08:39

01.10.2010, 23:15
hts Erfahrener Benutzer Registriert seit: 07.09.2010 Beiträge: 722 PHP-Kenntnisse: Fortgeschritten	CSS-Positionierung von Bildern Hi Leute, ich habe eine Tabelle und an dieser möchte ich zwei Bilder positionieren, das eine oben rechts, das andere unten links. Beide Bilder sollen linksbündig zur Tabelle ausgerichtet sein. Ich bekomme es einfach nicht hin , das war mein letzter Versuch: Code: <div> <div style="float: left;">Hier befindet sich die HTML-Tabelle</div> <img src="oben.gif" style="vertical-align: top;" /> <img src="unten.gif" style="vertical-align: bottom;" /> </div> Ergebnis: Das obere Bild wird am richtigen Platz dargestellt, das untere Bild erscheint aber rechts nach dem oberen Bild und nicht wie erwartet an der Unterkante der Tabelle. Wie bekomme ich das zweite Bild an der Unterkante des Tabellen-Divs linksbündig (überhaupt unten würde mir auch schonmal reichen ) ausgerichtet?


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

02.10.2010, 01:35
Destruction Erfahrener Benutzer Registriert seit: 05.02.2009 Beiträge: 1.401 PHP-Kenntnisse: Fortgeschritten	<img src="oben.gif" style="vertical-align: top;" /><br /> <img src="unten.gif" style="vertical-align: bottom;" /> __________________ "Dummheit redet viel..Klugheit denkt und schweigt.." [Amgervinus]

02.10.2010, 02:09
hts Erfahrener Benutzer Registriert seit: 07.09.2010 Beiträge: 722 PHP-Kenntnisse: Fortgeschritten	Naja, mit dem <br> sind jetzt beide Bilder rechts oben untereinander, anstelle von rechts oben nebeneinander - ist schon mal ein Fortschritt, aber nicht ganz, was ich wollte.

02.10.2010, 15:13
weazz1980 Neuer Benutzer Registriert seit: 28.09.2010 Beiträge: 7 PHP-Kenntnisse: Anfänger	Wenn ich mal richtig rate willst du oben und unten eine Begrenzungsgrafik anzeigen? Ich würde es so lösen: <div id="wrapper"> <div class="oben"><img src="oben.gif" /></div> <div class="box mit inhalt">Text Text Text...</div> <div class="unten"><img src="unten.gif" /></div> </div> <!-- Ende Wrapper(hält deine Boxen zusammen) --> und dann entsprechend mit CSS stylen