Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: img obok siebie
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
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ć winksmiley.jpg
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
Shili
Tak na szybko, nie do końca co prawda poprawnie, ale działająco:
  1. <div id="container" style="width: 950px; _width: 952px; margin: auto; border: 1px solid; background-color: #E7E7E7;">
  2. <div id="top" style="display: inline; postion: top;">
  3. <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>
  4.  
  5. <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>
  6.  
  7. <img src="images/logo_firmy.jpg" align="top" border="0" width="950" height="47">
  8. <img src="images/linki.jpg" alt="Rozmiar: 15713 bajt?w" usemap="#linki" align="top" border="0" width="950" height="38">
  9. </div>
  10. </div>

Ż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.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.