float, IE, pozycjonowanie obrazka Opcje

[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

[HTML] pobierz, plaintext 
<div>
  <h3>imie i nazwisko</h3>
  telefon
  ulica
  miejscowosc
  <img src="obrazek" />
</div>
<div>
  <h3>imie i nazwisko</h3>
  telefon
  ulica
  miejscowosc
  <img src="obrazek" />
</div>
[HTML] pobierz, plaintext 

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

Ten post edytował AxZx 31.01.2006, 19:25:06

[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>

[HTML] pobierz, plaintext 
<div>
    <h3>imie i nazwisko</h3>
    <img src="obrazek.jpg" />
    telefon
    ulica
    miejscowosc
    <br class="clr" />
</div>
<div>
    <h3>imie i nazwisko</h3>
    <img src="obrazek.jpg" />
    telefon
    ulica
    miejscowosc
    <br class="clr" />
</div>
[HTML] pobierz, plaintext 

[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;
}

[HTML] pobierz, plaintext 
<div id="content">
        <div>
            <h3>imie i nazwisko</h3>
            <img src="obrazek.jpg" />
            telefon
            ulica
            miejscowosc
            <br class="clr" />
        </div>
        <div>
            <h3>imie i nazwisko</h3>
            <img src="obrazek.jpg" />
            telefon
            ulica
            miejscowosc
            <br class="clr" />
        </div>
    </div>
[HTML] pobierz, plaintext 

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]

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ł.