XHTML 1.1 Strict layout: top + 3 kolumny + stopka, Czy to w ogóle możliwe? Opcje

[MistrzHTML]

Witam. Od razu zaznaczam, że moje pytanie kieruję do osób naprawdę b. dobrze znających CSS i XHTML. Usiłuję stworzyć layout z nagłówkiem, kolumnami po lewej i po prawej oraz zawartością strony na środku i ze stopką na dole. Rozwiązań tego typu problemu jest wiele w internecie, jednak jest małe "ale".

Chcę, żeby layout rozciągał się zawsze od lewej do prawej strony ekranu - dajmy na to: top wysokość 140px, kolumny po lewej i po prawej po 200px szerokości, stopka wysokość 40px. Osobiście nie lubię layoutów o stałych szerokościach, gdzie na wyższych rozdzielczościach (sam uzywam 1280x1024) stronka wyglada jak kreska na środku, a po bokach są kilometry pustki. Próbowałem już kilku sposobów, jednak nie udaje mi się osiągnąć zamierzonego celu: chcę mianowicie, by stopka znajdowała się ZAWSZE na dole strony (obojętnie czy zawartość strony to jedna, czy tysiąc linii tekstu). Żadne position: absolute nie wchodzą w grę, ponieważ na pozycję stopki muszą wpływać również wysokości dwóch bocznych kolumn. Najlepszy efekt, jaki udało mi się uzyskać to taki, że stopka jest dla stron niewymagających scrollowania zaraz pod widzialną krawędzią ekranu (stosowanie min-height: 100% kolumn). Próbowałem dawać stopce w takim razie position: relative; top: -40px, ale wtedy pobierane jest jej pierwotne położenie i pod nią i tak jest wolne miejsce.

Czy to jest w ogóle wykonalne? Wydaje mi się, że twórcy CSS zbłądzili trochę, bo cały ten standard jest tak mało intuicyjny, że szkoda gadać (chodzi mi o pozycjonowanie elementów). Po części winne są oczywiście widzimisię przeglądarek. Proszę o rady - dla stron niewymagających przesuwania stopka powinna znajdować się na dole, a pasek przewijania powinien być nieaktywny.

[gekon]

1. Temat: Layout a kochany ie
2. http://pornel.net/xhtml
3. http://pornel.net/transitional

Ten post edytował gekon 15.07.2007, 20:54:22

[MistrzHTML]

"Uważaj chłopcze podaję odpowiedź:" Tego się obawiałem. Tyle to ja potrafię zrobić - napisalem wyraźnie, że strona ma się rozciągać od lewej do prawej, a wysokość stopki ma być uzależniona od każdej z kolumn. Top 140px, stopka 40px wysokości, procentowo bym sobie poradził, ale mnie to nie urządza, bo nagłówek to obrazek z logo, stopka też jakaś grafika. W sumie obojętne mi czy XHTML czy HTML - to akurat nie ma tu większego znaczenia, dla XHTML trzeba dodać po prostu jedną własciwość.

Sformułuję pytanie tak: czy w ogóle w CSS da się zrobić taki layout? Gekon, jak pytam jak zrobić jabłecznik to nie odpowiadaj mi jak zrobić jabola

Ten post edytował MistrzHTML 15.07.2007, 21:47:55

[gekon]

A jaka to magiczna właściwość odróżnia XHTML do HTML? Nie czytasz uważnie a potem się mądrzysz:
1. stopka zawsze na dole strony: http://ryanfait.com/sticky-footer/ (pierwszy link)
2. 3 kolumny (przerobić bardzo łatwo na cala szerokosc) http://kurs.browsehappy.pl/Krok/Float (pierwszy link)

Dwa pozostałe linki są jak bonus edukacyjny odnośnie XHTMLa 1.1.

[MistrzHTML]

Dzięki, jeden z linków pomógł. Co do magicznej właściwości XHTML-a to inaczej interpretuje on wysokości okna - poczytaj po tym.

[gekon]

Do mistrzostwa jeszcze Ci trochę brakuje, lepiej Ty poczytaj o tych magicznych właściwościach: http://kurs.browsehappy.pl/Definicja/QuirksMode

[MistrzHTML]

Zrobiłem już te trzy kolumny ze stopką - wszystko jest cacy. Jak teraz rozciągnąć jakiś element na 100% szerokości środkowej kolumny tak, żeby wszystko nie weszło pod cała lewą kolumnę? Teraz mam na myśli konkretniej tabelę CSS. Lewa i środkowa kolumna mają floaty left, a prawa right. Nawet nie wiem czy dobrze, że tej środkowej dałem floata left. Te zabawy z CSS-em to zdecydowanie nie jest moja pasja...

[gekon]

Wróżenie z fusów piętro wyżej.

[MistrzHTML]

Takich ludzi jak ty, gekon, jest niestety na każdym forum wielu. Zakochani w swojej wiedzy plastusie, którzy robią wielką łaskę, że cokolwiek pomogą. Tak trudno ci odpowiadać normalnie to spadaj, ktoś inny mi odpowie. Zrozum, że nikomu nie imponujesz i zastanów się nad sobą.


Do normalnych forumowiczów:

3 kolumny layoutu jak już wspomniałem, lewa i środkowa mają po floacie left, prawa right. Chcę, by element, np. tabelka CSS, umieszczona w środkowej kolumnie rozciągała się na całą jej szerokość.

Ten post edytował MistrzHTML 16.07.2007, 00:31:49

[gekon]

A Ty zrozum, że nie wiem co masz w kodzie i nikt Ci nie pomoże jeżeli nie pokażesz mu kodu. To tak jakbyś przyjechał na rowerze do warsztatu i mówił: "Mam fajne auto, 3 drzwiowe, lewe i środkowe drzwi są zielone ale nie mogę zamontować na dachu takiego fajnego dzyndzelka." Swoją drogą od razu mogłem powiedzieć, że chodzi o kod. Ale dla mnie oczywiste jest, że jak się przychodzi do lekarza to pokazuje się to co boli.

Ten post edytował gekon 16.07.2007, 00:42:01

[MistrzHTML]

To nie możesz powiedzieć tego grzeczniej? Sorry, ale naprawdę denerwują mnie ludzie wywyższający się, a tak odbieram takie zachowanie. Każdy powinien się cieszyć, gdy może pomóc, a nie traktować pytającego jak pomiotka.

Wracając do tematu, by ustawić stopkę skorzystałem z pierwszego linka w drugim poście, który napisałeś, ale wywaliłem z niego DIVa o klasie push. Domyślam się tylko po co był, ale bez niego i tak działa świetnie.

Mój kod to:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Stronka</title>
<style type="text/css">
* {margin: 0px}
html, body {height: 100%}
body {font-family: Verdana, sans-serif; font-size: 12px}
div.zawartosc {min-height: 100%; height: auto; height: 100%; margin: 0 auto -40px}
div.srodek {float: left}
div.lewa {float: left; width: 200px}
div.prawa {float: right; width: 200px}
div.stopka {clear: both; height: 40px; text-align: center; color: #ffffff; background-color: #000000}
</style>
</head>
<body>
 
<div class="zawartosc">
 
<img src="./grafika/logo.gif" alt="" style="display: block" />
<div class="lewa">
LEWA KOLUMNA
</div>
 
<div class="srodek">
GŁÓWNA CZĘŚĆ
</div>
 
<div class="prawa">
PRAWA KOLUMNA
</div>
 
</div>
 
<div class="stopka">
STOPKA
</div>
 
</body>
</html>
[HTML] pobierz, plaintext 

W części głównej chcę wstawić DIVa z display: table, ale kiedy dam mu width: 100% przesuwa się pod lewą kolumnę (nie mieści i float go wyrzuca ). Jak to ugryźć?

[gekon]

Uwaga będę się czepiał:
1. każdy atrybut w CSS powinien mieć na końcu średnik (nawet jak jest zaraz przed '}'). Dlaczego? Bo przeglądarka ma prawo uznać ze to, np. koniec całego arkusza stylów i nie renderować reszty.
2. uwierz mi, że lepiej będzie jeżeli użyjesz XHTML 1.0 [bo na HTML 4.01 chyba Cię nie zdołam namówić] (XHTML nawet nie jest HTMLem, to XML. Nie chce mi się tłumaczyć wynikających z tego różnic, poza tym nie o tym jest post.)
3. Po to dałem Ci link przykładu z kolumnami żebyś z niego skorzystał. Nie mówię tego bo chcę Ci dogryźć ale po prostu w informatyce trzeba korzystać z gotowych (czyli sprawdzonych) rozwiązań, tym bardziej, że są za darmo.

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Stronka</title>
<style type="text/css">
* {margin: 0px;}
html, body {height: 100%;}
body {font-family: Verdana, sans-serif; font-size: 12px;}
#zawartosc {min-height: 100%; height: auto; height: 100%; margin: 0 auto -40px;}
 
#wrap{ float: right; width: 90%; }
#category { float: right; width: 20%; background-color: #F00000;}
#content { float: left; width: 80%; background-color: #00F000;}
#sidebar { float: right; width: 10%; background-color: #0000F0;}
#stopka {clear: both; height: 40px; text-align: center; color: #ffffff; background-color: #000000; }
</style>
</head>
<body>
 
<div id="zawartosc">
 
<img src="./grafika/logo.gif" alt="" style="display: block" />
	<div id="wrap">
		<div id="content">
			<table>
				<tr>
					<td>CONTENT</td>					
				</tr>				
			</table>			
		</div>
		<div id="category">
			<p>CATEGORY</p>
		</div>
	</div>
 
	<div id="sidebar">
		<p>SIDEBAR</p>
	</div>
 
</div>
 
<div id="stopka">
STOPKA
</div>
 
</body>
</html>
[HTML] pobierz, plaintext 

[MistrzHTML]

Hehe nie wiem dlaczego myślisz, ze miałbym uważać, że chcesz mi dogryźć tymi gotowymi przykładami Są w internecie to korzystam. Takim "dogryzanie" to też możesz mnie raczyć, bo o to chodzi, żeby dawać rady. Średniki na końcu - od teraz będę stosował. Z ciekawości chciałem zastosować display: table zamiast zwykłej tabelki. Z display: table można robić naprawdę ciekawe rzeczy, jak np. łatwo komórki czy całe wiersze tworzyć jako podświetlane odsyłacze (jedyna wada to jak zwykle IE). Nie rozumiem po co ten drugi wrapper. Moim wrapperem był DIV klasy zawartosc. Po prostu zmieniłem sobie nazwy klas na polskie nie-odpowiedniki. teraz zastanawiam się czy faktycznie nie użyć procentowych szerokości kolumn, chociaż nie takie było moje założenie. Jeżeli tak zrobię to problem rozciągania na cała środkową kolumnę minie, bo jej szerokość zostanie zdefiniowana.

A jak jest z tymi klasami/identyfikatorami? Niektórzy piszą, że jak obiekt jest jeden to id... inni, że id lepiej zarezerwować dla JavaScriptu. Osobiście skłaniam się ku tym drugim, bo denerwuje mnie fakt, że po dodaniu #nazwa w pasku adresu przeniesie mnie do wysokości danego DIVa

Dodam tylko, że jestem otwarty na wszelkie sugestie, nie jestem niereformowalnym gburem tylko człowiekiem, który chce głębiej poznać CSS i najnowsze standardy.

[gekon]

1. Po co wrapper? Czytaj http://kurs.browsehappy.pl/Krok/Float
2. Display 'table' jest problematyczne i nie obsługiwane przez IE. Po co Ci ta tabelka nie wiem. Ale myślę, że nie potrzeba Ci do tego właśnie display.
3. Hover dla IE; poszukaj 'whatever:hover'
4. Id jest identyfikatorem, i słusznie mówią Ci, którzy twierdzą, że służy do unikalnych elementów. JS powinien być tylko dodatkiem.

Czytaj więcej.

Ten post edytował gekon 16.07.2007, 01:29:37

[MistrzHTML]

Ale czy mój div o klasie zawartosc to nie jest juz wystarczajacy wrapper?

[gekon]

Ty z uporem maniaka bronisz się przed przeczytaniem tego artykuły, tam jest wszystko wyjaśnione... ta dzisiejsza młodzież.

[MistrzHTML]

No już dobrze, przeczytam cały. Ech, ten dzisiejszy moher...

[kwiateusz]

MistrzHTML opanuj sie na forum wymagane jest aby do innych forumowiczów odzywać sie z szacunkiem. Z tego co widzę @gekon stara Ci sie pomóc, ale to Ty masz problem i zamiast poczytać to co on Ci daje na siłę starasz sie to ominąć, a potem masz pretensje ze nikt nie chce Ci przepisać tamtych artów.

Tak więc opanuj sie.

btw. idealnie dobrałeś nick

[MistrzHTML]

Pozostawię wypowiedź pana o niezwykle męskim nicku bez komentarza.

Ten post edytował MistrzHTML 16.07.2007, 21:08:18

[strife]

Pozostawię wypowiedź pana o niezwykle męskim nicku bez komentarza.

A co ma jego nick do Twojego zachowania? ~gekon Ci pomógł a Ty nawet nie raczyłeś mu podziękować tylko walnąłeś jakiś głupi tekst:

No już dobrze, przeczytam cały. Ech, ten dzisiejszy moher...

Takich ludzi jak ty, gekon, jest niestety na każdym forum wielu. Zakochani w swojej wiedzy plastusie, którzy robią wielką łaskę, że cokolwiek pomogą. Tak trudno ci odpowiadać normalnie to spadaj, ktoś inny mi odpowie. Zrozum, że nikomu nie imponujesz i zastanów się nad sobą.

Ja radziłbym Ci następnym razem zastanowić się nad swoim zachowaniem. Pamiętaj, że to jest forum publiczne, a nie ławka pod blokiem. Jeśli nie umiesz się zachować następnym razem daruj sobie takie wypowiedzi jak te wyżej. Tym razem dostajesz upomnienie, następnym razem skończy się to inaczej.

Zamykam.