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

[lepmajster]

Jak uzyskac taki efekt, aby nie przesadzac z ilosci divow (kontenerow) ?

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

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
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
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
Oczywiscie pozycjonowanie absolutne odpada

Tak czy siak, dzieki za info
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ś 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
Oczywiscie pozycjonowanie absolutne odpada

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
Chociaz wiem, ze w miare dobrze to robie.

Nie ma za co

[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
Dzieki za rady, o takie wlasnie mi chodzilo

Pozdrawiam i mozna zamknac.

[pedro84]

Faktycznie o tym nie pomyslalem, musze zmienic rozmiar okna z 1080px do 1024px, ale to juz nie problem
Dzieki za rady, o takie wlasnie mi chodzilo

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 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
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 )
- MeasureIt (podobny do ColorZilla, tyle ze mniej funkcjonalny)
Pozdrawiam

EDIT: Zainstalowalem i...cos pieknego! Dzieki za to info Fajnie miec wszystko pod reka


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