nicht angemeldet
Drei Bilder - Eines links, eins zentriert, eines rechts
Hallo,
habe ein kleines Problem und bis jetzt noch keine wirkliche Lösung gefunden (trotz Google, etc.)
Möchte drei Bilder nebeneinander haben:
- das erste links
- das zweite zentriert zwischen den beiden anderen
- das dritte rechts
Habs mit float: left und right versucht, aber wie zentrier ich das mittlere?
Würde mich über Hilfe freuen :-)
Liebe Grüße aus Wien,
martin
-
Habs mit float: left und right versucht, aber wie zentrier ich das mittlere?
mit margin - der wert "auto" könnte für dich interessant sein
-
Habs mit float: left und right versucht, aber wie zentrier ich das mittlere?
mit margin - der wert "auto" könnte für dich interessant sein
Ja, das is mir bekannt. Funktioniert leider net:
Hier der Testcode:
<div style="width:300px;">
<img src="bla1.jpg" style="float:left">
<img src="bla2.jpg" style="margin:auto;">
<img src="bla3.jpg" style="float:right;">
</div>Hilfe :-)
-
Hier der Testcode:
da fehlt einiges ;)
opera 9, safari 3, firefox 2, internet explorer 7 (ie 6 hab ich keinen zum testen grade)
<!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" lang="de" xml:lang="de"> <head> <title>3 Bilder</title> </head> <body> <div style="width: 1200px; height: 500px; background: red;"> <img src="http://www.google.at/intl/de_at/images/logo.gif" style="float: left" /> <img src="http://www.google.at/intl/de_ch/images/logo.gif" style="float: right;" /> <img src="http://www.google.at/intl/de_de/images/logo.gif" style="margin: 0 auto; display: block;" /> </div> </body> </html>-
Ja, so gehts. Dank euch allen recht herzlich für eure Hilfe! An dem Problem hab ich schon ne Zeit geknabbert :-)
Liebe Grüße aus Wien,
martin-
Hallo Martin,
so zentriert es sogar der IE-5:
<div style="height: 500px; background: blue; text-align: center;">
<img src="http://www.google.at/intl/de_at/images/logo.gif" style="float: left" />
<img src="http://www.google.at/intl/de_ch/images/logo.gif" style="float: right;" />
<img src="http://www.google.at/intl/de_de/images/logo.gif"/>
</div>Unterschiedliche Darstellung zu der 'margin-auto-Version' gibts dann nur, wenn das Elternelement so schmal wird, daß die 3 Bilder nicht mehr vollständig hineinpassen.
Grüße
gaby
-
-
-
[latex]Mae govannen![/latex]
Habs mit float: left und right versucht, aber wie zentrier ich das mittlere?
mit margin - der wert "auto" könnte für dich interessant sein
Ja, das is mir bekannt. Funktioniert leider net:
Hier der Testcode:
<div style="width:300px;">
<img src="bla1.jpg" style="float:left">
<img src="bla2.jpg" style="margin:auto;">
<img src="bla3.jpg" style="float:right;">
</div>Hilfe :-)
Hintergründe farblich angepaßt zur Verdeutlichung:
<div style="width:300px;background-color: yellow;"> <img src="bla1.jpg" style="float:left;background-color: red;"> <img src="bla3.jpg" style="float:right;background-color: green;"> <img src="bla2.jpg" style="display: block;margin:auto;background-color: blue;"> </div>-
<img> ist kein Block-Element, daher wirkt die margin-Angabe erst, wenn es mit display:block als Block-Element dargestellt wird
-
Beachte die geänderte Reihenfolge! Erst die gefloateteten Bilder und dann das Zentrierte
-
Tipp: Die Verwendung von style-Attributen zugunsten ausgelagerer oder im Head definierter CSS-Regeln unterlassen.
Cü,
Kai
--
When the limos return for their final review, it's all thru'
- all they can see is the morning goo.
"There's no-one left alive - must be draw."
So the Blackcap Barons toss a coin to settle the score.
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|] -
-
-
-
hallo,
das klingt alles sehr kompliziert. Ich würds einfach mit ner Table machen:<html>
head...
<body>
<table width="100%">
<tr>
<td align="left">
<img src="http://www.google.de/intl/de_de/images/logo.gif" width="50">
</td>
<td align="center">
<img src="http://www.google.de/intl/de_de/images/logo.gif" width="50">
</td>
<td align="right">
<img src="http://www.google.de/intl/de_de/images/logo.gif" width="50">
</td>
</tr>
</table>
</body>
</html>wobei mich wahrscheinlich jetzt halb selfhtml umbringt, weils schlechter Stil ist mit Tabellen Style zu machen. MAchs trozdem
èner
-
[latex]Mae govannen![/latex]
hallo,
das klingt alles sehr kompliziert. Ich würds einfach mit ner Table machen:wobei mich wahrscheinlich jetzt halb selfhtml umbringt, weils schlechter Stil ist mit Tabellen Style zu machen. MAchs trozdem
Och nö, halb selfhtml wohl nicht. Geh von 98% aus.
Cü,
Kai
--
When the limos return for their final review, it's all thru'
- all they can see is the morning goo.
"There's no-one left alive - must be draw."
So the Blackcap Barons toss a coin to settle the score.
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|]-
Och nö, halb selfhtml wohl nicht. Geh von 98% aus.
um sich die schande zu ersparen, kann man sich aber auch rituell selbst töten
-
-