[HTML] położenie obiektów DIV Opcje

[xajart]

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

Kod

center {
  position: absolute;
  margin: 0 auto;
  width: 980px; 
}
head {
  position: relative;
  height: 200px;
  width: 980px;
  background-image: (url: jakis_obrazek);
}
contents {
  position: relative;
  width:  970px;
  padding: 5px;
}
footer {
  position: relative;
  ...
}

plik HTML (w kodzie PHP)

Kod

<div class="center">
  <div class="head"></div>
  <div class="contents"></div>
  <div class="footer"></div>
</div>

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?

[Skie]

ustawienie poszczególnych elementów używajac znowu relative czy float, czasami rozwala szablon zwłaszcza na różnych przeglądarkach

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

ustawienie takiej templatki zajmuje mi cały dzień

Jak robię nową stronę od 0 to mi zazwyczaj też tyle zajmuje (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

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.

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.

A z tego co wiem to im więcje się ma tych DIVów pozagnieżdzanych tym trudniej panować nad efektem wizualnym strony,

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.

[korek_a]

Kod

/*content*/
#content {display:block;margin:0 auto;width:740px;}
/*end:content*/

/*banerek*/
#top{
height:319px;width:740px;}
/*end:banerek*/
/*lewa szpalta*/
#left {display:block;float:left;width:484px;}
/*end:lewa szpalta*/

/*prawa szplanta*/
#right {display:block;float:right;width:256px;}
/*end:prawa szplanta*/

/*stopka*/
#footer {clear:both;display:block;position:relative;top:15px;width:739px;}[url=""]
  /*end:stopka*/[/url]

to mój prost myk

[erix]

Wszystkie przeglądarki wysokość i szerokość DIV'ów będą liczyć tak samo.

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

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

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.

[Skie]

Wszystkie przeglądarki wysokość i szerokość DIV'ów będą liczyć tak samo.

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

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

[xajart]

Czyli mówicie że się tym nie przejmować że budowanie templatki od podstaw zajmuje mi czasami cały dzień (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

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

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

Bujasz. [;

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

[greg.paw.90]

ja centruje w ten sposób:

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

[xajart]

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.

Ten post edytował xajart 16.07.2009, 15:52:57

[erix]

W nim.

PS. Masz na myśli kombinowanie z przezroczystością? (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

[com2pablo]

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:

Kod

<style type="text/css">
body {
background-color: #000;
background-image: url();
background-repeat: no-repeat;
}
#apDiv1 {
position:absolute;
width:278px;
height:133px;
z-index:1;
left: 0px;
top: 13px;
}
#apDiv2 {
position:absolute;
width:395px;
height:183px;
z-index:2;
left: 67px;
top: 127px;
}
#apDiv3 {
position:absolute;
width:921px;
height:98px;
z-index:10;
left: 0px;
top: 725px;
}
#apDiv4 {
position:absolute;
width:370px;
height:28px;
z-index:4;
left: 551px;
top: 55px;
}
#apDiv5 {
position:absolute;
width:193px;
height:152px;
z-index:5;
left: 544px;
top: 104px;
}
#apDiv6 {
position:absolute;
width:142px;
height:155px;
z-index:6;
left: 743px;
top: 104px;
}
#apDiv7 {
position:absolute;
width:178px;
height:28px;
z-index:7;
left: 550px;
top: 281px;
}
#apDiv8 {
position:absolute;
width:178px;
height:28px;
z-index:7;
left: 743px;
top: 281px;
}
#apDiv9 {
position:absolute;
width:370px;
height:120px;
z-index:8;
left: 551px;
top: 600px;
}
#apDiv10 {
position:absolute;
width:232px;
height:16px;
z-index:9;
left: 550px;
top: 581px;
}
#apDiv11 {
position:absolute;
width:553px;
height:460px;
z-index:11;
left: 1px;
top: 308px;
}
</style>
</head>

<body>
<div style="background-image: url(images/blask.png); height: 822px; width: 920px;"> </div>
<div id="apDiv1"><img src="images/logo.png" width="278" height="133" /></div>
<div id="apDiv2"><img src="images/top.png" width="395" height="183" /></div>
<div id="apDiv3"><img src="images/stopkatlo.png" width="920" height="97" /></div>
<div id="apDiv4"><img src="images/kontakt.png" width="370" height="28" /></div>
<div id="apDiv5"><img src="images/mapka.png" width="193" height="152" /></div>
<div id="apDiv6"><img src="images/linie.png" width="178" height="152" /></div>
<div id="apDiv7"><img src="images/onasoferta.png" width="178" height="28" /></div>
<div id="apDiv8"><img src="images/onasoferta.png" width="178" height="28" /></div>
<div id="apDiv9"><img src="images/m1.png" width="127" height="120" /><img src="images/m2.png" width="116" height="120" /><img src="images/m3.png" width="127" height="120" /></div>
<div id="apDiv10"><img src="images/flotasamochodowa.png" width="232" height="16" /></div>
<div id="apDiv11"><img src="images/wvbig.png" width="553" height="460" /></div></div>
</body>