Witam.

Mam pytanie skierowane do osób które projektują strony na DIV'ach (zapewne większość). 

Chodzi mi mianowicie jak wy to robicie. Ja obecnie projektuje strony w sposób (który mnie nie zadawala, bo czasami są problemy z ich ustawieniem) a mianowicie wykorzystuje do tego CSS, ponieżej postaram się zobrazować takowy przykład:



plik CSS

plik HTML (w kodzie PHP)


W kodzie mogą być błędy bo pisałem go z głowy. 
Chodzi o to, że wszystko jest okej, ale kiedy próbuje np w DIV'ie contents budować treść na kilku divach (w stylu: nagłowek, treść, stopka czy inne pierdółki potrzebne na stronie), to już position absolute i relative były wykorzystane wyżej i ustawienie poszczególnych elementów używajac znowu relative czy float, czasami rozwala szablon zwłaszcza na różnych przeglądarkach i czasami ustawienie takiej templatki zajmuje mi cały dzień by poprawnie wyświetlała we wszystkich przeglądarkach, co gorsze kiedy jeden z divów ma ustawiona wartość auto (bo będzie się zmieniał w zależności od treści, a następujący po nim div (ustawiony poprzez float) ma też wartość auto, to kiedy jeden z nich będzie mniejszy od drugiego wówczas div który jest poniżej rozwala szablon przesuwajac wszystko. Opcji absolute nie mogę użyć bo jak użyję to bedzie poza divem center.


Znacie jakieś rozwiazania na to jak poprawnie to deklarować. No i czy można np DIVowi zadeklarować minimalną wartość dla DIV'a która powinnien mieć w wysokości ale kiedy ją przekroczy to by autoskalowanie się włączyło. A może rozwiązać to na zasadzie wstawienia w jeden DIV dwóch Divów, nakładajac je na siebie, jeden żeby miał ustawioną określoną wysokość (ale był ukryty), a na wierz drugi który będzie wyświetlał treśc ale będzie miał ustawioną opcję autoskalowalności (jak nadrzędny), wówczas to się będzie zmieniać tak jak chce (ale nie wiem czy przy takim rozłożeniu divow jest to do wykonania). Ale wtedy pojawia się kolejny problem ze skomplikowaniem kodu i używaniem dużej ilości DIVów zagniezdzonych. A z tego co wiem to im więcje się ma tych DIVów pozagnieżdzanych tym trudniej panować nad efektem wizualnym strony, by się nie rozjezdzał.

Macie jakieś propozycje jak to rozwiązać jest najlepiej?

Wszystkie przeglądarki wysokość i szerokość DIV'ów będą liczyć tak samo. Jeżeli rozwala Ci szablon to zapewne, jedynie przez złe dobranie wartości dla margin i padding, które są różnie liczone przez przeglądarki



Jak robię nową stronę od 0 to mi zazwyczaj też tyle zajmuje



w CSSie:
min-height, max-height, min-width, max-width

Ale nie wiem czy "nowe" IE to obsługują, bo IE 7 i starsze z tego co pamiętam to nie.



Niekoniecznie. Jeżeli DIVy nadrzędne są dobrze napisane, to rozłożenie podrzędnych to już zupełnie inna bajka. W każdym razie ja się nie spotkałem, by mieć problem z całością ułożenia strony z powodu zbyt dużej ilości DIVów.

to mój prost myk

Jak ja bym chciał, żeby naprawdę tak było... ;p


Do podstawowego szkieletu w Twoim przypadku nie trzeba stosować pozycjonowania. Szczerze mówiąc, jest to droga na łatwiznę i prolem będzie, gdy przybędzie zawartości i warstwy nie będą się rozciągać tak, jak zechcesz.

Chodziło mi tylko o szerokość/wysokość zdefiniowaną przez width i height, bez dodatkowych bajerów jak margin, padding, border itp. ;p

Czyli mówicie że się tym nie przejmować że budowanie templatki od podstaw zajmuje mi czasami cały dzień

Z tym rozjezdzaniem DIV'ów, to na ostatnim szablonie miałem taki problem:

div nadrzędny (np contents) zawiera w sobie 5 divów:



DIV1 | DIV 2
DIV1 | DIV 3
DIV4-| DIV 5

DIV 1 => widht: 600px; height: auto; (no i tutaj musiałem na sztywno zadeklarowąc wysokość)
DIV 2 => widht: 300px; height: 30px;
DIV 3 => widht: 300px; height: 50px;
DIV 4 => widht: 80px; height: auto;
DIV 5 => widht: 900px; height: auto;

No i problem był przy DIV 1, bo kiedy była wartość automatyczna i przekroczyła ona wysokość 80px (równą sumie wysokości DIV 2 i DIV 3). to DIV 4 wskakiwał mi pod DIV 3. Przez co rozwalało mi cały szablon, ale co dziwniejsze tylko w IE. Ale z tego co obczaiłem to opcje float: left, right mi taki cyrk odwalały.

Pewnie  problemu by z tym nie było gdybym rozbił to na dwa obiekty w których były by zagnieżdzone odpowiednio w pierszywm (1, 2 i 3) zaś w drugim (4 i 5 - z tym że obiekt piąty miałby kolejne obiekty w sobie pozagnieżdzane). 

Ale z tego co piszecie, to rozumie że nie ma się co bać wielokrotnego zagnieżdzania obiektów w sobie, pod warunkiem by najpierw dobrze ustawiać nadrzędne.

a co do wartości min-height, max-height, min-width, max-width - to takich eksperymentów nie chc używać, bo Skie jak sam napisałeś jest problem z tym pod IE.  


erix  - wiem ale jak masz obiekt center który ma służyć za wycentrowanie w poziomie templatki strony to trzeba mu nadać pozycje absolutną, zaś pozostałe obiekty już nie muszą mieć tej relatywnej bo z tego co mi się wydaje domyślnie ją mają (bo czy jest zadeklarowana czy nie to efekty na ogól są takie same). Chociaż kiedyś miałem taki dziwny bład, ze kiedy obiekt miał opcję float bez ustawienia pozycji na relative to wywalało mi go z obiektu centralnego, kiedy usuwałem float to był w centralnym, ale jak mu ustawiłem float i zadeklarowalem pozycje na relatywna to dalej byl w centralnym obiekcie. Wiem że wtedy na łatwizne poszedłem bo powinnienm szukać problemu powyżej, no ale byłem wówczas ograniczony czasowo by się w to bawić.

Bujasz. [;

W pionie, to bym się zgodził, ale w poziomie - da się i bez absolutnego.

ja centruje w ten sposób:

[HTML] pobierz, plaintext 
#main{
width: wartosc_px;
margin: auto;
overflow: hidden;
}
[HTML] pobierz, plaintext 

no okej z tym centrowaniem to też używam margin auto, ale jeżeli div nie będzie absolute, to te divy które są w nim zawarte - to czy one będą w nim czy na nim ? Bo to jest spora różnica.

W nim.

PS. Masz na myśli kombinowanie z przezroczystością?

Ja z kolei mam taki problem i bardzo proszę o pomoc. Divy pozycjonują się względem okna, a nie nadrzędnego diva a jaśniej to chciałbym żeby wartość left i top była odmierzana od krawędzi diva nadrzędnego a nie od okna no i div nadrzędny ustawiony zawsze na środku. Taki mam kod: