[CSS][HTML]Optymalne rozlozenie divów Opcje

[lepmajster]

Jak uzyskac taki efekt, aby nie przesadzac z ilosci divow (kontenerow) ?
(IMG:http://img337.imageshack.us/f/img337/3317/szablon.jpg)
http://img337.imageshack.us/f/img337/3317/szablon.jpg
Nie chodzi mi o gotowca, tylko o sposob w jaki mozna taki efekt osiagnac?
Dodam ze taki szablon mam juz zrobiony na divach, tylko ze do uzyskania takiego efektu, musialem uzyc kilku dodatkowych divów-pojemnikow, dla kolejnych divow.
Zrobilem to tak:
1. div logo
2. div kontener, w nim znajduja sie kolejne divy/okienka (menu) z lewej stronu, ma float: left.
3. div kontener-srodek, znajduje sie w nim okno srodkowe i nad nim ten cienki pasek - przylepiony jest do lewego menu.
4. To wszystko powyzej zapakowalem w kolejnego diva, ktory ma float: left i do niego przelepione jest to menu z prawej strony.
5. Stopka z clear:both;
6. a calosc umiescilem w divie z ustawionym width, zeby przy zmianie wielkosci okna, divy nie rozjezdzaly sie.

Wszystko niby dobrze, ale jak popatrze w kod i na to zagniezdzenie divow, to mam watpliwosci, czy nie da sie zrobic tego lepiej/prosciej?

Prosze o wskazowki, moga byc napisane w ptk, tak jak ja to zrobilem, bo gotowca mi nie trzeba, tylko pomysl (IMG:style_emoticons/default/smile.gif)

Ten post edytował lepmajster 27.05.2010, 12:42:34

[pedro84]

A pokaż może kod jaki masz? Będzie lepiej odnieść się do tego co już zrobiłeś i zasugerować poprawki ;-)

[lepmajster]

Ostrzegam ze zabola oczy (IMG:style_emoticons/default/smile.gif)
Mialem to poprawic, ale dopiero jesli okaze sie ze ten sposob jest dobry, teraz nie ma sensu tego poprawiac, bo pewnie i tak bede musial od poczatku to robic.

[HTML] pobierz, plaintext 
<div id="calosc">
	<div class="kontener" id="lewaStronaZoknem">
		<div class="logo">
                <!--TU LOGO -->
                </div>
		<div class="kontener" id="lewaMenu">
			<div class="menu cienLewa">
				<!--TU OKIENKO Z LINKAMI/TEKSTEM -->
			</div>
			<div class="menu cienLewa">
				<!--TU OKIENKO Z LINKAMI/TEKSTEM -->
			</div>
			<div class="menu cienLewa">
				<!--TU OKIENKO Z LINKAMI/TEKSTEM -->
			</div>
		</div>
		<div class="kontener" id="srodek">
			<div class="okno" id="pasekReklama">
			<!--TU CIENKI PASEK NAD GLOWNYM/SRODKOWYM OKNEM -->
			</div>
			<div class="okno">
			<!--TU SRODKOWE OKNO Z TRESCIA -->
			</div>
		</div>
	</div>
	<div class="kontener" id="prawaStrona">
		<div class="menu cienPrawa" id="panel">
		<!--TU OKIENKO Z LINKAMI/TEKSTEM - PRAWA STRONA -->
		</div>
		<div class="menu cienPrawa">
		<!--TU OKIENKO Z LINKAMI/TEKSTEM - PRAWA STRONA -->
		</div>
	</div>
	<div class="stopka">
		<!--TU STOPKA -->
	</div>
</div>
[HTML] pobierz, plaintext 

no i css

[CSS] pobierz, plaintext 
<style type="text/css">
body {
	background: #000000 url(grad.gif) repeat-x;
	margin: 0px;
	padding: 0px;
}
.logo {
	overflow: hidden;
	margin: 0px 5px 10px 5px;
	padding: 0px;
	border: 1px solid #333333;
	width: 882px;
	height: 100px;
	background: #000000 url(logo.gif) center no-repeat;
}
.okno {
	overflow: hidden;
	margin: 0px 5px 10px 5px;
	padding: 5px 10px 10px 10px;
	border: 1px solid #333333;
	width: 680px;
	height: auto;
	background: #000000;
}
.stopka {
	clear: left;
	overflow: hidden;
	margin: 0px 5px 10px 5px;
	padding: 5px 10px 10px 10px;
	border: 1px solid #333333;
	width: 1044px;
	height: auto;
	background: #000000;
}
.menu {
	overflow: hidden;
	margin: 0px 5px 10px 5px;
	padding: 5px;
	border: 1px solid #333333;
	width: 160px;
	height: auto;
	background: #000000;
}
/* GRADIENT W MENU PO BOKACH
.cienLewa {
	background: #000000 url(grad_prawa.gif) repeat-y left;
}
.cienPrawa {
	background: #000000 url(grad_lewa.gif) repeat-y right;
}
*/
.kontener {
	border: 0px solid red;
	width: auto;
	height: auto;
	margin: 0px;
	padding: 0px;
	float: left;
}
#calosc {
	width: 1090px;
	height: auto;
	margin: 0px auto;
	border: 0px;
}
</style>
[CSS] pobierz, plaintext 

Nie odpowiadam za stan zdrowia psychicznego po przeczytaniu tego posta (IMG:style_emoticons/default/smile.gif)
A tak powaznie, wiem ze jest namieszane, ale nie o to tu chodzi, chodzi o ogolne zalozenie czy jest dobre?
Czy takim sposobem nalezy to zrobic, czy jest lepszy?

Ten post edytował lepmajster 27.05.2010, 13:01:06

[pedro84]

Generalnie mogłoby zostać, tylko... Czemu nie zrobisz sobie takich kontenerów dla bocznych kolumn i nie zrobisz bloków na liście?

[lepmajster]

Generalnie mogłoby zostać, tylko... Czemu nie zrobisz sobie takich kontenerów dla bocznych kolumn i nie zrobisz bloków na liście?

Moze i to byl by najlepszy pomysl, ale listy teraz uzywam do linkow w menu.
Nie wiem czy to by sie nie gryzlo?
Chyba ze zle Cie zrozumialem :/

PS. Czy ten div id="calosc", musi miec okreslona szerokosc, czy moze jakos inaczej daloby sie przytrzymac pozostale divy, tak zeby przy mniejszym oknie nie zjezdzaly w dol.
Chodzi o to, ze przy jakiej kolwiek zmianie szerokosci diva menu, trzeba tez edytowac tego diva calosc (IMG:style_emoticons/default/winksmiley.jpg)
Oczywiscie pozycjonowanie absolutne odpada (IMG:style_emoticons/default/smile.gif)

Tak czy siak, dzieki za info (IMG:style_emoticons/default/smile.gif)
Chociaz wiem, ze w miare dobrze to robie.

Ten post edytował lepmajster 27.05.2010, 13:37:35

[pedro84]

Moze i to byl by najlepszy pomysl, ale listy teraz uzywam do linkow w menu.
Nie wiem czy to by sie nie gryzlo?
Chyba ze zle Cie zrozumialem :/

Zrozumiałeś (IMG:style_emoticons/default/smile.gif) Generalnie masz ok, ja robię taki bloku kolumn na listach, bardziej semantyczny kod, ale i divy są ok.

PS. Czy ten div id="calosc", musi miec okreslona szerokosc, czy moze jakos inaczej daloby sie przytrzymac pozostale divy, tak zeby przy mniejszym oknie nie zjezdzaly w dol.
Chodzi o to, ze przy jakiej kolwiek zmianie szerokosci diva menu, trzeba tez edytowac tego diva calosc (IMG:style_emoticons/default/winksmiley.jpg)
Oczywiscie pozycjonowanie absolutne odpada (IMG:style_emoticons/default/smile.gif)

Generalnie, zawsze nadaję swoim kontenerom stałą szerokość + min-width: na ~1024px. Generalnie, 1024x768 jest minimalną rozdzielczością jaką biorę pod uwagę (oczywiście zależy od statystyk strony!).

Tak czy siak, dzieki za info (IMG:style_emoticons/default/smile.gif)
Chociaz wiem, ze w miare dobrze to robie.

Nie ma za co (IMG:style_emoticons/default/smile.gif)

[lepmajster]

Generalnie, zawsze nadaję swoim kontenerom stałą szerokość + min-width: na ~1024px. Generalnie, 1024x768 jest minimalną rozdzielczością jaką biorę pod uwagę (oczywiście zależy od statystyk strony!).

Faktycznie o tym nie pomyslalem, musze zmienic rozmiar okna z 1080px do 1024px, ale to juz nie problem (IMG:style_emoticons/default/winksmiley.jpg)
Dzieki za rady, o takie wlasnie mi chodzilo (IMG:style_emoticons/default/smile.gif)

Pozdrawiam i mozna zamknac.

[pedro84]

Faktycznie o tym nie pomyslalem, musze zmienic rozmiar okna z 1080px do 1024px, ale to juz nie problem (IMG:style_emoticons/default/winksmiley.jpg)
Dzieki za rady, o takie wlasnie mi chodzilo (IMG:style_emoticons/default/smile.gif)

Pozdrawiam i mozna zamknac.

Na laptopie pracujesz jak widzę, mam ten sam ból. Jeśli używasz FF może użyć dodatko Web Developer, masz w nim min. możliwość zmiany rozmiaru okna (nawet definiowania własnych parametrów).

[lepmajster]

Na laptopie pracujesz jak widzę, mam ten sam ból. Jeśli używasz FF może użyć dodatko Web Developer, masz w nim min. możliwość zmiany rozmiaru okna (nawet definiowania własnych parametrów).

Tak na lapku pracuje, ale to 1080px wzielem raczej tak na chybil trafil (IMG:style_emoticons/default/winksmiley.jpg) Na lapku uzywam 1280x800px, ale moj blad ze zupelnie zapomnialem o rozdzielczosciach, bo chyba rozdzielczosci 1080px nawet nie ma :/
Ale to jak pisalem, szczegol, odejmnie sie troche ze srodka (IMG:style_emoticons/default/smile.gif)
FF takze uzywam, ale o tym dodatku nie slyszalem i zaraz go zainstaluje, jedyne dodatki typowo "webmasterskie" jakie mam w FF to :
- Firebug (sprawa oczywista)
- ColorZilla (fajna wtyczka, nakierowujesz myszka na dany element na stronie, a ona pokazuje wszystko co chcesz - kolor, rozmiar, id, itp, bez potrzeby grzebania w zrodle strony. Przydatne jesli swoj szablon opierasz na czyms juz istniejacym (IMG:style_emoticons/default/winksmiley.jpg) )
- MeasureIt (podobny do ColorZilla, tyle ze mniej funkcjonalny)
Pozdrawiam

EDIT: Zainstalowalem i...cos pieknego! Dzieki za to info (IMG:style_emoticons/default/smile.gif) Fajnie miec wszystko pod reka (IMG:style_emoticons/default/winksmiley.jpg)


Ten post edytował lepmajster 27.05.2010, 16:18:41