Forum PHP.pl > mieszanie elementów blokowych i liniowych

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: mieszanie elementów blokowych i liniowych

Forum PHP.pl > Forum > Po stronie przeglądarki

lewal

4.05.2007, 21:07:31

Witam,

jeśli elementom listy nadamy styl "display: inline;" to będą one wyświetlane w poziomie... przynajmniej tak dopóki nie wstawimy w nie jakiegoś elementu blokowego - wówczas tylko poczciwy IE 6 wyświetla je poziomo, a reszta przeglądarek pokazuje je jeden pod drugim - a ja chciałbym, żeby działało właśnie tak jak w niestandardowym IE.
Jako niezbyt zaawansowany webmaster wiem juz, ze nie powinno sie zawierać elementów liniowych w blokowych - a zdaje się, że właśnie taka sytuacja tu występuje. Niestety trafiłem na miejsce gdzie żadne, inne rozwiązanie nie przychodzi mi do głowy. Jakieś sugestie jak to rozwiązać?

podaje poglądowy kod:

[HTML] pobierz, plaintext 
<html>
  <head>
    <style type="text/css">
    li {
        width: 100px;
        display:inline;
    }
    </style>
  </head>
  <body>
  <ul>
    <li>
        <p>foo</p>
    </li>
    <li>
        <p>bar</p>
    </li>
  </ul>
  </body>
</html>
[HTML] pobierz, plaintext

babejsza

4.05.2007, 22:09:21

Kod

li {float: left}
li a {display: block}

lewal

5.05.2007, 11:07:30

Cytat(babejsza @ 4.05.2007, 23:09:21 )

Kod

li {float: left}
li a {display: block}

świetnie

przy okazji musiałem doczytać sobie o clear, żeby tło wyglądało jak trzeba, ale teraz mam juz dokładnie taki efekt jakiego potrzebowałem.

dzięki za pomoc

edit:
Obawiam się, że za szybko się ucieszyłem.
Na początku było ok, ale okazało się, że to tylko przypadek - po drobnych zmianach w treści strony powyższe rozwiązanie wygląda mało ciekawie.
Najlepiej pokaże przykład:

http://files.quasigame.pl/sample.html

jak widać element "foo" jest większy od pozostałych zaledwie o jeden wiersz, a przez to koło niego próbują sie zmieścić dwa elementy "bar" i przed trzecim powstaje brzydka przerwa.

gekon

6.05.2007, 15:09:52

Widać niedokładnie doczytałeś o clear.

[HTML] pobierz, plaintext 
li { float: left; clear: left; }
[HTML] pobierz, plaintext

lewal

6.05.2007, 17:25:48

Cytat(gekon @ 6.05.2007, 16:09:52 )

Widać niedokładnie doczytałeś o clear.

[HTML] pobierz, plaintext 
li { float: left; clear: left; }
[HTML] pobierz, plaintext

starałem się dość dokładnie, ale możliwe, że coś przeoczyłem.
nie zmienia to faktu, że Twoja porada nie działa tak jakbym tego chciał:
http://files.quasigame.pl/sample1.html
teraz elementy są jeden pod drugim, a to jeszcze gorzej.

jeśli miałeś na myśli umieszczanie "clear:left;" tylko w wybranych elementach "li" to niestety mi to nie pasuje - to kod generowany z szablonów i niektóre z tych elementów mogą być ukryte, a poza tym nie wiem z góry ile się ich zmieści w poziomie - to zależy od rozdzielczości.

zgodnie z Twoim podpisem:
http://quasigame.pl/user/Town/buildings
(jest tam sporo "runtime_error" jesli nie jest sie zalogowanym, ale to nie ma znaczenia - elementy, które mam na myśli to te z nagłówkami "Szałasy", "Chaty", "Magazyny")

a tutaj wersja statyczna, która nieco lepiej pokazuje problem:
http://files.quasigame.pl/buildings.htm

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.