Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: wyrownywanie img ale nie za pomoca divow
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
marmal
W jaki sposob zrobic wyrownywanie elementow img nie wrzucajac ich do diva??

Konkretnie mam cos takiego:

<div><img src="rys1"> NAPIS <img src="rys2"></div>

Teraz rys1 ma byc wyrownywany do lewej, rys2 do prawej a NAPIS na samym srodku.
Normalnie bym to wlasnie wrzucil do diva i zrobil text-align ale nie moge w tym przypadku bo wtedy zostanie drugi obrazek i napis przeniesiony do nastepnej linii, a to niedopuszczalne!!

Mozna jeszcze dac te obrazki do poszczegolnych komorek tabeli, ale czy to jedyne wyjscie?? worriedsmiley.gif


marmal
revyag
Możesz nadać divom style float i wtedy nie będą przeskakiwać do następnej linii.
np.
  1. <div style="width:512px;margin: 0 auto">
  2. <div style="width:128px;float:left">
  3. <img src="img01.jpg" alt="" />
  4. </div>
  5. <div style="float:left;width:256px">napis</div>
  6. <div style="width:128px;float:left">
  7. <img src="img02.jpg" alt="" />
  8. </div>
  9. <br style="clear:both" />
  10. </div>

Można to zrobić też bez divów zawierających obrazki, nadać obrazkom styl float, ale wtedy efekty końcowy wygląda inaczej pod ie(źle) i inaczej pod ff(dobrze).
marmal
Dziekuje za tamtą pomoc, ale teraz powstaly mi dwa dodatkowe problemy, oczywiscie w IE sad.gif

1)Nie moge wysrodkowac w pionie napisu (pomimo vertical-align:middle)
2)Jezeli zrobie width:50% dla diva od napisu to automatycznie (tylko w IE) obrazek2 przeskakuje do drugiej linijki i wszystko sie chrzani... Wystarczy, ze zrobie 49% to jest dobrze, ale wowczas obrazek2 nie jest dobity do konca prawego brzegu.

Oto ten fragment mojego kodu:

  1. <div id="Top">
  2. <div id="Image" class="left"><img src="obrazek1" alt="" /></div>
  3. <div style="float:left; width:50%; text-align:center; vertical-align:middle;">
  4. <p style="vertical-align:middle;">NAPIS</p></div>
  5. <div id="Image" class="right"><img src="obrazek2" alt="" /></div>
  6. </div>



Wazniejsze informacje z CSS:

  1. div#Top {
  2. height: 100px;
  3. margin: auto;
  4. }
  5. div#Image {
  6. float:left;
  7. width:25%;
  8. }
  9. .left {
  10. text-align: left;
  11. }
  12.  
  13. .right {
  14. text-align: right;
  15. }


Bardzo prosze o pomoc

Pozdrawiam

marmal
FiDO
1. http://www.quirksmode.org/css/centering.html - akapit Vertical Centering
2. http://www.quirksmode.org/dom/3column.html - to Cie powinno naprowadzic troche
marmal
Czyli wniosek z tego taki, ze i tak to musze zrobic w tabelce, bo inaczej tego nie wysrodkuje w pionie (pod IE)questionmark.gif

marmal
sobstel
Vertical Centering with CSS
http://www.wpdfd.com/editorial/wpd0103.htm#toptip (http://www.wpdfd.com/editorial/thebox/deadcentre1.html, http://www.wpdfd.com/editorial/thebox/deadcentre3.html)
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.