Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: float, IE, pozycjonowanie obrazka
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
AxZx
witam

mecze sie od jakiegos czasu z poprawnym ulozeniem obrazka w pewnym miejscu na stronie, w FF udalo mi sie osiagnac wyznaczony cel, w IE niestety jest to trudniejsze.

ogolnie strone mam ulozona mniej wiecej tak
http://css.maxdesign.com.au/floatutorial/tutorial0916.htm
w XHTML

i teraz w srodku mam cos takiego

  1. <div>
  2. <h3>imie i nazwisko</h3>
  3. telefon
  4. ulica
  5. miejscowosc
  6. <img src="obrazek" />
  7. </div>
  8. <div>
  9. <h3>imie i nazwisko</h3>
  10. telefon
  11. ulica
  12. miejscowosc
  13. <img src="obrazek" />
  14. </div>



i tak sie powtarza ten div

chcialbym aby ten div podzielony byl na 3 czesci,
pierwsza to h3 na gorze, wycentrowane,
druga czesc po lewej stronie to telefon, ulica i miejscowosc,
trzecia czesci po prawej stronie to ten obrazek na rowni z druga czescia bo wysokosciowa sa mniej wiecej takie same.

bylby ktos w stanie podsunac jakies rozwiazanie dzieki ktoremu bedzie to ladnie wygladalo w kIEpskIEj ?

pozdrawiam
revyag
Kod
<style type="text/css">
div {
    width:200px;
}
h3 {
    text-align:center;
    padding:5px;
    margin:5px 0 0 0;
}
img {
    float:right;
}
br.clr {
    clear:both;
}
</style>

  1. <div>
  2. <h3>imie i nazwisko</h3>
  3. <img src="obrazek.jpg" />
  4. telefon
  5. ulica
  6. miejscowosc
  7. <br class="clr" />
  8. </div>
  9. <div>
  10. <h3>imie i nazwisko</h3>
  11. <img src="obrazek.jpg" />
  12. telefon
  13. ulica
  14. miejscowosc
  15. <br class="clr" />
  16. </div>
AxZx
http://css.maxdesign.com.au/floatutorial/tutorial0916.htm

lewa kolumna jest float:left
prawa float:right

jezeli w srodkowej czesci dam styl clear:both; to sie cala strona rozjezdza.


jest jakis sposob na to aby to co w srodkowej czesci jest nie wplywalo na cala strukture strony?
moze poprostu zle zrobilem budujac tak strone?

ma ktos inny sposob na zbudowanie 3 kolumn tak aby w srodkowej czesci mozna bylo robic co sie chce i nie bedzie mialo to wplywu na ogol?
revyag
Drobne zmiany:

Kod
div#content div {
    width:200px;
}
div#content div h3 {
    text-align:center;
    padding:5px;
    margin:5px 0 0 0;
}
div#content div img {
    float:right;
}

  1. <div id="content">
  2. <div>
  3. <h3>imie i nazwisko</h3>
  4. <img src="obrazek.jpg" />
  5. telefon
  6. ulica
  7. miejscowosc
  8. <br class="clr" />
  9. </div>
  10. <div>
  11. <h3>imie i nazwisko</h3>
  12. <img src="obrazek.jpg" />
  13. telefon
  14. ulica
  15. miejscowosc
  16. <br class="clr" />
  17. </div>
  18. </div>

reszta kodu jak w tutorialu.
U mnie nic się nie rozjeżdża.
AxZx
IE chyba ma problemy z floatem, jezeli np cos wystaje o 1px poza jakis obszar to cala strona blednie jest wyswietlana,
ja przyznam sie szczerze ze nie umiem robic stron w XHTML pod IE


a problem ktory opisalem wczesniej rozwiazalem w ten sposob ze wsadzilem adres i obrazek w tabelke.
adres w lewe <td>, obrazek w prawe.

jest juz beta2 IE7 moze cos sie polepszy...
revyag
Cytat
IE chyba ma problemy z floatem, jezeli np cos wystaje o 1px poza jakis obszar to cala strona blednie jest wyswietlana,

Jeśli sumarczyna szerokość elementów jest większa od szerokości elementu, który je zawiera to jasne jest że 1px wiecej i bloki nie będą obok siebie. Tak samo zareaguje i ff i opera i ie.
Kod który podałem jest w porządku, to jest rozwiązanie problemu o którym pisałeś, więc nie wiem co jeszcze jest nie tak.
AxZx
wiem ze normalnie nie beda obok siebie. ale nie wiem co mam nie tak w kodzie, bo czasem zdarza sie tak ze bloki sa na swoim miejscu ale np nie wyswietlaja sie niektore teksty w ktoryms z blokow, albo tla w niektorych miejscach niema - takie rozne bajery, dzieje sie tak gdy z floatami kombinuje.
revyag
Nic się nie dzieje bez przyczyny. Najczęście kłopoty są spowodowane brakiem wymuszenia nowej linii poprzez style clear i problem z tłem dwóch sąsiadujących kolumn. http://www.alistapart.com/articles/fauxcolumns/
AxZx
ja sobie zdaje sprawe z tego ze nic nie dzieje sie bez przyczyny.

strona do ktorej link podales nie wyswietla sie tak samo w IE jak w FF.
revyag
Nie chodziło mi o to żebyś oceniał czy strona wyświetla się dobrze czy źle. Przeczytaj ten artykuł.
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.