Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
img und div nebeneinander vertikal ausrichten
Autor: hansjo
Datum: 07.11.2011 12:54:00
Hallo zusammen,
ich stehe irgendwie auf dem Schlauch ... aber ich habe bisher keine passende Lösung gefunden:
Ich möchte neben einem img-Element eine Textbox (per div) in gleicher Höhe mit anderer Hintergrundfarbe haben.
dazu schreiben ich folgendes:
#textBox {
background: #A6ACA8;
margin:0 0 0 5px;
padding:130px 200px 0 20px;
display: inline;
}
...
<img src="bild.jpg" height="150" />
<div id="textBox">Text</div>
Nur leider hängt die Textbox neben dem Bild nun ein paar Pixel tiefer als das Bild :-(
Wie schaffe ich es, dass beides genau auf einer Höhe liegt ... habe einiges versucht, nur leider ohne jeden Erfolg.
Danke!
Re: img und div nebeneinander vertikal ausrichten
Autor: hansjo
Datum: 07.11.2011 13:49:53
Ok hat sich erledigt ... gesucht war:
position:relative;
top:-4px;
... vielleicht hilfts jemand anderem :-)
Re: img und div nebeneinander vertikal ausrichten
Autor: gaby
Datum: 07.11.2011 15:54:39
> Ich möchte neben einem img-Element eine Textbox
> (per div) in gleicher Höhe mit anderer
> Hintergrundfarbe haben.
>
> dazu schreiben ich folgendes:
>
> #textBox {
> background: #A6ACA8;
> margin:0 0 0 5px;
> padding:130px 200px 0 20px;
> display: inline;
> }
> ...
> <img src="bild.jpg" height="150" />
> <div id="textBox">Text</div>
>
> Nur leider hängt die Textbox neben dem Bild nun
> ein paar Pixel tiefer als das Bild :-(
-----------
> Ok hat sich erledigt ... gesucht war:
>
> position:relative;
> top:-4px;
Hallo,
Du hast es also so?
> #textBox {
> background: #A6ACA8;
> margin:0 0 0 5px;
> padding:130px 200px 0 20px;
> display: inline;
> position:relative;
> top:-4px;
> }
Dieses Hochschieben behebt das Problem nur scheinbar.
1. sind das Bild und die Box nicht browserübergreifend auf gleicher Höhe, und
2. vergrößert sich die Box nach oben und rechts, sobald sich ein Besucher eine größere Schrift einstellt.
Wenn der Text in der grauen Box länger wird, verbreitert sich auch die graue Box. Ist das so gewollt?
Und wenn du einen Zeilenumbruch mit <br> einfügst, geht das Layout vollkommen den Bach herunter. ;-)
http://s7.directupload.net/file/d/2701/xqb7ybj2_png.htm
Grüße
gaby
Re: img und div nebeneinander vertikal ausrichten
Autor: hansjo
Datum: 07.11.2011 15:58:55
ok ... hab es noch nicht komplett eingebaut und getestet. Aber wie lautet dann die Lösung??
Re: img und div nebeneinander vertikal ausrichten
Autor: gaby
Datum: 07.11.2011 16:37:02
> ok ... hab es noch nicht komplett eingebaut und
> getestet. Aber wie lautet dann die Lösung??
Soll die Breite der Textbox immer gleich bleiben, egal, wie viel Inhalt sie hat?
Soll der Text immer den gleichen Abstand zum unteren Rand haben, egal ob 1-zeilig oder mehrzeilig?
(Ich habe mein voriges Posting nochmal editiert)
