MozillaPL.org - polskie centrum Mozilli

Główne menu:

[CSS] Div z max-width traci wymiary i marginesy

Jak tworzyć strony WWW zgodnie ze standardami

Moderator: Pomocy?!

Odpowiedz

[CSS] Div z max-width traci wymiary i marginesy

Postautor: TroPtyN » 20 grudnia 2006, 16:49

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

Tworząc swój szablon postanowiłem zastosować w nim styl max-width. Wszystko byłoby dobrze, gdyby nie jeden szkopuł. Ale najpierw testowy kod:

Kod: Zaznacz cały

<html>

<head>
   <style type="text/css">
      div#blok   { max-width: 800px; margin: auto; background-color: black }
      div#tekst   { width: 600px; float: left }
      div#wpis   { max-width: 550px; margin: 0 auto 20px auto; background-color: green; color: red }
      div#nawigacja   { width: 200px; float: right; background-color: blue }
      div#czyszczenie   { clear: both }
   </style>
</head>





<body>

   <div id="blok">
      <div id="tekst">
         <div id="wpis">Tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst</div>
         <div id="wpis">Tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst</div>
         <div id="wpis">Tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst</div>
      </div>
      <div id="nawigacja">tekst</div>
      <div id="czyszczenie"></div>
   </div>



</body>
</html>



Gdy div o identyfikatorze "tekst" otrzyma styl max-width (zamiast width), wtedy traci on (div, nie styl) wymiary i marginesy. Domyślam się, że takie działanie wywołuje float. I tu jest problem. Mógłbym zastąpić float, ale nie wiem czym. Nie wiem co zapewni ułożenie dwóch div-ów obok siebie. Może jest jeszcze jakiś sposób na zniwelowanie efektu utraty wymiarów? Swoją drogą zastanawiam się dlaczego członkowie W3C nie stworzą normalnego centrowania wszystkich obiektów w CSS podobnego w działaniu do atrybutów align i valign. Czyżby tak bardzo to kolidowało z innymi stylami? :)

I tak przy okazji: widziałem chyba na tym forum odnośnik do jednej angielskojęzycznej strony opisującej różne metody poziomego i pionowego centrowania obiektów. Próbowałem szukać, ale z marnym skutkiem. Zna ktoś może taką lub podobną stronę? :)
TroPtyN
 
Posty: 51
Z nami od: 18 stycznia 2005, 10:47
Lokalizacja: często-chowająca się mieścina
Na górę

Postautor: athantor » 21 grudnia 2006, 14:33

Przeglądarka: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9a2pre) Gecko/20061219 Minefield/3.0a2pre

spec pisze:id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.


spec pisze:8. A floating box must be placed as high as possible.


spec pisze:10.3.5 Floating, non-replaced elements

If 'left', 'right', 'width', 'margin-left', or 'margin-right' are specified as 'auto', their computed value is '0'.


Mam nadzieję, że tylko w powyższym przykładnie nie umieściłeś doctype.

Element head musi mieć element title.

Klik.
Obrazek Obrazek
athantor
 
Posty: 911
Z nami od: 24 grudnia 2002, 15:22
Lokalizacja: Białystok
Na górę

Postautor: TroPtyN » 21 grudnia 2006, 23:12

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

Ech, z zagalopowałem się i zapomniałem o tym, że identyfikatory nie mogą się powtarzać. Ze znajomością specyfikacji jest u mnie fatalnie, dlatego dziękuję za wyjaśnienie na czym polega omawiany przeze mnie problem.

Bez obaw, o Doctype'ie i title zawsze pamiętam. Ten testowy kod umyślnie okroiłem.

Jest jeden problem. Wprawdzie mógłbym się zadowolić poprawionym przez ciebie kodem, ale chciałbym, by div "nawigacja" znajdował się w kodzie poniżej div-a "tekst". :( Jak to zrobić zachowując układ i właściwości powyższej poprawnie działającej strony?
TroPtyN
 
Posty: 51
Z nami od: 18 stycznia 2005, 10:47
Lokalizacja: często-chowająca się mieścina
Na górę

Postautor: athantor » 23 grudnia 2006, 01:40

Przeglądarka: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9a2pre) Gecko/20061222 Minefield/3.0a2pre

Klik?
Obrazek Obrazek
athantor
 
Posty: 911
Z nami od: 24 grudnia 2002, 15:22
Lokalizacja: Białystok
Na górę

Postautor: TroPtyN » 23 grudnia 2006, 15:37

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

Pozycjonowanie absolutne niestety odpada z powodu jego właściwości (na pozycjonowany obiekt nie wpływają inne). Zamiast tego zastosowałem width="75%". Gdyby nie miejsce pozostające po prawej stronie podczas zmniejszania rozmiarów okna przeglądarki, byłoby doskonale. Ale mimo to mogę chyba się tym zadowolić. :) Dziękuję bardzo za pomoc i życzę wesolutkich świąt!
TroPtyN
 
Posty: 51
Z nami od: 18 stycznia 2005, 10:47
Lokalizacja: często-chowająca się mieścina
Na górę
Odpowiedz

Wróć do Tworzenie stron WWW

Kto jest online

Zarejestrowani użytkownicy: Baidu [Spider], Bing [Bot], Google [Bot]

Powered by phpBB® Forum Software © phpBB Group
Przejdź do powiązanej strony

Nawigacja:

Stopka: