display: inline ?

[Elmo]

Kod: Zaznacz cały

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

</head>
<body style="">
<div style="background-color: red; width: 200px; height:400px;">
  <div style="background-color: blue; width: 50px; height:50px; display:inline"></div>
  <div style="background-color: green; width: 50px; height:50px; display:inline"></div>
  <div style="background-color: purple; width: 50px; height:50px; display:inline"></div>
</div>

</body>
</html>

W IE widać te kolorwe div'y, a w Mozilli po prostu znikają (!?)
Czy jest coś co powinienem dołożyć, żeby to działało ?

P.S. chce, żeby te divy były jeden obok drugiego nie pod sobą...

[Domel]

W IE widać te kolorwe div'y, a w Mozilli po prostu znikają (!?)
Czy jest coś co powinienem dołożyć, żeby to działało ?

P.S. chce, żeby te divy były jeden obok drugiego nie pod sobą...

Juz kiedys pisales w podobnej sprawie (i ktos dal Ci odpowiedz). Ja tylko powtorze, ze obok display:inline nie moga wystepowac cechy rozmiarow (width, height). Zachowanie Mozilli jest wiec prawidlowe (to w IE wyglada zle).
Zeby uzyskac efekt taki o jakim piszesz musisz uzyc pozycjonowania czyli cech typu position (absolute lub relative - doradzam jednak absolute w tym wypadku) + rozmiary i odleglosci (np top i left). Mozna tez inaczej przez float (left, right) + rozmiary i odleglosci (np top i left).

[Gość]

Juz kiedys pisales w podobnej sprawie (i ktos dal Ci odpowiedz).

Pytałem o centrowanie, a to mi nie bardzo na podobne wygląda

Zeby uzyskac efekt taki o jakim piszesz musisz uzyc pozycjonowania czyli cech typu position (absolute lub relative - doradzam jednak absolute w tym wypadku) + rozmiary i odleglosci (np top i left).

Poćwicze, zobacz, a jak dalej nie dojde to zapytam

Mozna tez inaczej przez float (left, right) + rozmiary i odleglosci (np top i left).

To w moim przypadku nie zadziała w mozilli bo jak dam float, to główny div się nie "rozciągnie" jak ten w środku ma float i jest większy. :/

[Domel]

Pytałem o centrowanie, a to mi nie bardzo na podobne wygląda

Ale chodzilo o to samo (czyli nie mozna uzywac rozmiarow w display: inline)

To w moim przypadku nie zadziała w mozilli bo jak dam float, to główny div się nie "rozciągnie" jak ten w środku ma float i jest większy. :/

Pokombinuj a napewno wyjdze. Nie dodawaj float do glownego div'a tylko do tych malych kwadracikow (sprobuj nadac float:left dla pierwszego float:right dla ostatniego + jeszcze kilka cech). Zerknij na http://w3.org spowodu dwoch rzeczy:
1) Wiele sie mozna tam nauczyc o poprawnym pisaniu kodu HTML/XHTML (jak cos nie wychodzi pierwszym krokiem powinna byc wlasnie ta strona bo ona pomoze Ci namierzyc blad i go zlikwidowac a wtedy Mozilla napewno poprawne bedzie wyswietlac)
2) I inny powod (mniejszy) - strona glowna jest zrobiona wlasnie przez float i w Mozilli jest widziana poprawnie (dlatego przejrzyj jak to jest zrobione)

[Elmo]

Kod: Zaznacz cały

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

</head>
<body style="">
<div style="margin: 5px; top: 20px; left:200px; width:450px; overflow:visible; position:relative; border: 1px solid red">
  <div style="width:30px; background-color: blue; height:500px; position: absolute; top: 0px; float:none"></div>
  <div style="width:30px; background-color: green; height:500px; position: absolute; top: 0px; left: 31px"></div>
</div>
</body>
</html>

Co zrobić, żeby ten div z czerwoną ramką rozciągnął się pod te co są w środku ? (w manualu CSS nie mogłem się dokopać jak to zrobić)

P.S. w3.org znam, ale jedyne co tam tak naprawdę znalazłem to manual (czy są tam jakieś lekcje/porady, a ja ślepy ?), którego mam u siebie w pdf-ie (znacznie łatwiej się szuka).

[Domel]

Co zrobić, żeby ten div z czerwoną ramką rozciągnął się pod te co są w środku ?

Nie wiem co to znaczy "rozciagal sie pod te co sa w sreodku"?
Ale moze chodzi o cos takiego:

Kod: Zaznacz cały

<div style="margin: 5px; top: 20px; left:200px; width:450px; overflow:visible; position:relative; border: 1px solid red; height:500px;">


P.S. w3.org znam, ale jedyne co tam tak naprawdę znalazłem to manual (czy są tam jakieś lekcje/porady, a ja ślepy ?), którego mam u siebie w pdf-ie (znacznie łatwiej się szuka).

Nie rozumeim po Ci sa potrzebne jakies manuale? Na w3.org sa specyfikacje a wlasnie specyfikacje (i rekomendacje) dla webmastera to rzesz swieta. Poza tym wszystkie manuale powstaja na podstawie specyfikacji (a te ktore nie powastaja wprowadzaja w blad ludzi).
Widze, ze jednak niedokonca znadz w3.org dlatego podaje kilka adresow, ktore dobry webmaster powinen recytowac na pamiec gdy sie go zbudzi w srodku nocy :
1) http://www.w3.org/MarkUp/ - podstrona o HTML/XHTML
2) http://www.w3.org/TR/xhtml1/ - to musisz koniecznie znac na pamiec
3) http://www.w3.org/TR/html4/ - podaje nie poto zebys ja znal (bo HTML juz dawno nie jest standardem, teraz jest XHTML) ale masz tam spis znacznikow, atrybutow i ich wartosci, bo specyfikacja XHTML 1.0 nawiazuje do HTML 4.01
4) http://www.w3.org/TR/xhtml11/ - wlasnie to jest standard nadzien dzisiejszy
5) http://www.w3.org/TR/CSS2/ - wiadomo, bez CSS ani rosz - tez na pamiec
6) Jesli chcesz cos co jest mniej skomplikowane to moge polecis Ci swoj kurs ale zanzaczam, ze to nie jest tlumaczenie specyfikacji na polski to jest tylko streszczenie (wiec nie zwalnia z zapoznaniem sie powyzszymi adresami) http://xhtml.b7.pl

Poprobuj zrobic to samo z float.

Teraz tylko moja uwaga: to jest forum Mozilli a nie webmasterstwa. Wiec staraj sie wysylac posty bardziej zwiazane z Mozilla (chyba ze nie bedziesz mial wyjscia).

[marcoos]

"HTML 4 nie jest już standardem"

Tak samo mógłbym powiedzieć, że ISO-8859-2 nie jest już standardem kodowania polskich ogonków, odkąd jest UTF-8. XHTML jest lepszy od HTML, ale... bez przesady.

[Domel]

"HTML 4 nie jest już standardem"

OK, powinienem napisac standardem obowiazujacym

[Elmo]

Co zrobić, żeby ten div z czerwoną ramką rozciągnął się pod te co są w środku ?

Nie wiem co to znaczy "rozciagal sie pod te co sa w sreodku"?
Ale moze chodzi o cos takiego:

Kod: Zaznacz cały

<div style="margin: 5px; top: 20px; left:200px; width:450px; overflow:visible; position:relative; border: 1px solid red; height:500px;">


Wiesz, tak ustawić to nie problem, ale jak generuję dynamicznie w PHP stronkę to jednak różnie z tą wyskością to bywa. To ma być zależne od wysokości tego co jest w środku, a nie z góry ustalone.
A chodzi mi o to, że w tej chwili to co jest w środku wychodzi mi poza tą czerwoną ramkę (tak jakby miało float-a).

Nie rozumeim po Ci sa potrzebne jakies manuale? Na w3.org sa specyfikacje a wlasnie specyfikacje (i rekomendacje) dla webmastera to rzesz swieta. Poza tym wszystkie manuale powstaja na podstawie specyfikacji (a te ktore nie powastaja wprowadzaja w blad ludzi).

Może ja myle pojęcia, ale to chyba to samo (?). A jeżeli mylę to czym to się tak naprawdę różni ?

Poprobuj zrobic to samo z float.

Tego nie rozumiem (!?), przecież to się zachowuje jakby miało float, pomimo, że ręcznie wpisałem "none".

Teraz tylko moja uwaga: to jest forum Mozilli a nie webmasterstwa. Wiec staraj sie wysylac posty bardziej zwiazane z Mozilla (chyba ze nie bedziesz mial wyjscia).

Tylko, że w IE się inaczej zachowuje niż tu (jak nie zrobię to w IE mniej więcej wygląda to jak chce, a Mozilli ni cholery nie moge uzyskać chcociaż podobnego efektu)

Edit
Sorx, w IE ten ostatni przykład wygląda tak samo. To w przypadku tych float-ów wysokość głównego div-a w IE jest dostosowana do zawartości, a w Mozilli nie :/

Czyli to:

Kod: Zaznacz cały

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

</head>
<body style="">
<div style="margin: 5px; top: 20px; left:200px; width:450px; position:relative; border: 1px solid red">
  <div style="width:30px; background-color: blue; height:500px;float:left;"></div>
  <div style="width:30px; background-color: green; height:500px;float:left;"></div>
</div>
</body>
</html>

W IE zachowuje się tak jak na logikę powinno i tak jak chcę, a w Mozilli nie :/

[Domel]

Może ja myle pojęcia, ale to chyba to samo (?). A jeżeli mylę to czym to się tak naprawdę różni ?

Roznia sie tak jak woda i ogien
Specyfikacja - oficjalny dokumet, jedyny poprawny (odpowiednik onstytucji w prawie)
Manual - fragmenty tekstu juz przetworzone (zmienione a co za tym idzie moga wkrasc sie bledy) (odpowiednik ulotki w ktorej ktos tam opisal Twoje prawa)

Poprobuj zrobic to samo z float.

Tego nie rozumiem (!?), przecież to się zachowuje jakby miało float, pomimo, że ręcznie wpisałem "none".

Chyba sie niezrozumielismy. Chodzilo mi zebys zrobil druga wersje (chociazby dla samoksztalcenia).

Tylko, że w IE się inaczej zachowuje niż tu (jak nie zrobię to w IE mniej więcej wygląda to jak chce, a Mozilli ni cholery nie moge uzyskać chcociaż podobnego efektu)

No co ja mam Ci odpowiedziec
Za IE nie resze ale Mozilla napewno poprawnie wyswietli strone ktora jest zgodna z W3C (czyli przechodzi przez walidatory HTML/XHTML i CSS i najlepiej zeby byla zgodna z WAI) a w przypadku pozycjonowania strona musi byc jeszcze "pomierzona".

Edit
Sorx, w IE ten ostatni przykład wygląda tak samo. To w przypadku tych float-ów wysokość głównego div-a w IE jest dostosowana do zawartości, a w Mozilli nie :/

Wiesz trudno mi sie wielu rzeczy domyslec ale proponuje Ci dwa rozwiazania:
1) Przerobione Twoje:

Kod: Zaznacz cały

<div style="margin: 5px; top: 20px; left:200px; width:450px; position:absolute; border: 1px solid #FF0000; z-index:2; background-color:#FF0000">
  <div style="width:30px; background-color: blue; height:500px;float:left; top: 0px;"></div>
  <div style="width:30px; background-color: green; height:500px;float:left; top: 0px; left: 31px"></div>
</div>

2) I teraz zupelnie inne (jesli spelnia Twoje wymagania to te rozwiazanie jest bardziej przejrzyste)

Kod: Zaznacz cały

<div style="border:1px solid #FF0000; position:absolute; z-index:1; background-color: #FF0000; width:450px; height:499px; left:200px; top: 20px"></div>
<div style="position:absolute; z-index:2; background-color: blue; width:30px; height:499px; left:201px ;top: 21px"></div>
<div style="position:absolute; z-index:2; background-color: green; width:30px; height:499px; left:231px; top: 21px"></div>


W IE zachowuje się tak jak na logikę powinno i tak jak chcę, a w Mozilli nie :/

To jakos dziwna masz logike

[Elmo]

Za IE nie resze ale Mozilla napewno poprawnie wyswietli strone ktora jest zgodna z W3C (czyli przechodzi przez walidatory HTML/XHTML i CSS i najlepiej zeby byla zgodna z WAI) a w przypadku pozycjonowania strona musi byc jeszcze "pomierzona".

Że IE się nie trzyma standardów to wiem (ale czasem jest to bardzo wygodne :/).

Wiesz trudno mi sie wielu rzeczy domyslec

Wiem, sorx... ja wczoraj i dzisiaj miałem examy i byłem trochę rozkojarzony

W IE zachowuje się tak jak na logikę powinno i tak jak chcę, a w Mozilli nie :/

To jakos dziwna masz logike

Bo mam jeszcze logikę z IE :/

Co do rozwiązań to bym chyba nie doszedł, że problemem było "position" ("fixed" i "absolute" działa jak chce, "static" i "relative" nie)
Drugie mi nie odpowiada bo jak już napisałem nie wiem jakiej wysokości musi być.
THX za to pierwsze

[Domel]

Co do rozwiązań to bym chyba nie doszedł, że problemem było "position" ("fixed" i "absolute" działa jak chce, "static" i "relative" nie)

Dlatego, ze wlasnosci static i relative sa zupelnie inne niz absolute i fixed.