img obok siebie Opcje

[verox]

Witam, mam 4 obrazki. Chce je ustawic obok siebie. W Operze i Firefoxie dziala tylko te IE :/
Probowalem display: inline; display: inline-block jak <p> position, float i dalej lata to sobie gdzie chce. Pomocy

[Shili]

Pokaż kod i pokaż style do niego. Bez tego można sobie zgadywać w nieskończoność, zwłaszcza że niektóre z wypisanych przez Ciebie metod zdecydowanie powinny zadziałać

[verox]

<div id="container" style="width: 950px; margin: auto; border: 1px solid; background-color: #E7E7E7;">
<div id="top" style="display: inline; postion: top;">
<img style="float: left;" src="images/logo1a.jpg" border="0" width="330" height="45"><a href="index.htm" target="_self"><img tyle="float: right;"src="images/animek.gif" border="0" width="614" height="45"></a>

<a href="index.htm" target="_self"><img src="images/logo2.jpg" align="top" border="0" width="627" height="201"></a><a href="index.htm" target="_self"><img src="images/logo_animek.gif" align="top" border="0" width="323" height="201"></a>

<img src="images/logo_firmy.jpg" align="top" border="0" width="950" height="47">
<img src="images/linki.jpg" alt="Rozmiar: 15713 bajt?w" usemap="#linki" align="top" border="0" width="950" height="38">
</div>
</div>

Tylko pod IE nie dziala

Ten post edytował verox 27.07.2008, 19:40:40

[Shili]

Tak na szybko, nie do końca co prawda poprawnie, ale działająco:

[HTML] pobierz, plaintext 
<div id="container" style="width: 950px; _width: 952px; margin: auto; border: 1px solid; background-color: #E7E7E7;">
<div id="top" style="display: inline; postion: top;">
<img style="display: block; float: left; _margin-left: -3px;" src="images/logo1a.jpg" border="0" width="330" height="45"><a href="index.htm" target="_self" style="display: block; float: right;"><img src="images/animek.gif" border="0" width="614" height="45"></a>
 
<a href="index.htm" target="_self"><img src="images/logo2.jpg" align="top" border="0" width="627" height="201"></a><a href="index.htm" target="_self"><img src="images/logo_animek.gif" align="top" border="0" width="323" height="201"></a>
 
<img src="images/logo_firmy.jpg" align="top" border="0" width="950" height="47">
<img src="images/linki.jpg" alt="Rozmiar: 15713 bajt?w" usemap="#linki" align="top" border="0" width="950" height="38">
</div>
</div>
[HTML] pobierz, plaintext 

Żeby to cudo wyśrodkować w ie nadaj body styl text-align: center; a divowi #container text-align: left.

[JoShiMa]

1. border="0" width="627" height="201" powinno być w stylach, zdecyduj się, czy używasz css czy atrybutów. Oczywiście tak będzie działało, ale jest nieelegancko
2. Kilka obrazków jest 'luzem' a jeden w znaczniku <a/> dlatego w niektórych przypadkach to <img/> powinien mieć float: left a w innych pozostałych to znacznik <a/> powinien mieć float: left.
3. Żeby wyśrodkować wewnątrz id="container" to powinien on mieć text-align: center, a id="top" powinien mieć marginesy lewy i prawy ustawione na auto.