Liebe Coder-Kollegen,
ich habe eine Grafik und rechts davon Text. Mein Problem: Der Text soll oben bündig zur Grafik positioniert sein, ist es aber nicht.
Obwohl padding und margin auf 0 gesetzt sind und für img und h1 ein margin-top von 10px definiert ist, geht der Text 3px weiter runter also auf 13px (Windows IE und Firefox).
Ich könnte ein Konstrukt bauen wo die Grafik 10px und der Text nur 7px runtergesetzt sind, aber das entspricht nicht meiner Anforderung, da es möglich sein muss, innerhalb der DIV den Text gegen irgendein anderes Element, z.B. Flash, iFrame, eine weitere DIV etc. auszutauschen. Da die anderen Elemente ausser dem Text richtig positioniert werden sind sie dann 3 pix höher und nicht mehr bündig zur Grafik, d.h. es muss einen Weg geben wie ich den Text bei einer margin-top: 10px Definition exakt auch auch 10px Abstand von oben setzen kann.
Danke für jeden sachdienlichen HInweis
Ike
Alles anzeigen
ich habe eine Grafik und rechts davon Text. Mein Problem: Der Text soll oben bündig zur Grafik positioniert sein, ist es aber nicht.
Obwohl padding und margin auf 0 gesetzt sind und für img und h1 ein margin-top von 10px definiert ist, geht der Text 3px weiter runter also auf 13px (Windows IE und Firefox).
Ich könnte ein Konstrukt bauen wo die Grafik 10px und der Text nur 7px runtergesetzt sind, aber das entspricht nicht meiner Anforderung, da es möglich sein muss, innerhalb der DIV den Text gegen irgendein anderes Element, z.B. Flash, iFrame, eine weitere DIV etc. auszutauschen. Da die anderen Elemente ausser dem Text richtig positioniert werden sind sie dann 3 pix höher und nicht mehr bündig zur Grafik, d.h. es muss einen Weg geben wie ich den Text bei einer margin-top: 10px Definition exakt auch auch 10px Abstand von oben setzen kann.
Danke für jeden sachdienlichen HInweis
Ike
Quellcode
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <title>Demo</title>
- <style type="text/css">
- * {
- margin: 0px;
- padding: 0px;
- }
- h1 {
- font: bold 10px/13px arial;
- float: left;
- vertical-align: top;
- }
- img {
- float: left;
- margin: 0px 10px 0px 0px;
- display: block;
- }
- div {
- width: 400px;
- display: block;
- margin: 0px 0px 10px 0px;
- }
- </style>
- </head>
- <body>
- <div>
- <img src="demo.jpg" width="150" height="150" alt="" />
- <h1>§§§gggMMM<br>§§§gggMMM</h1>
- <div style="clear: both"></div>
- </div>
- <div>
- <img src="demo.jpg" width="150" height="150" alt="" />
- <h1>§§§gggMMM<br>§§§gggMMM</h1>
- <div style="clear: both"></div>
- </div>
- </body>
- </html>