Jak na tento layout? – Standardy W3C, validita a doctype – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Jak na tento layout? – Standardy W3C, validita a doctype – Fórum – Programujte.comJak na tento layout? – Standardy W3C, validita a doctype – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Bummer0
Návštěvník
12. 8. 2008   #1
-
0
-

Zdravím.

Pokouším se o svůj první CSS layout ke stránkám, co budu tvořit. Bohužel jsem až do teď vždy používal tabulky a popravdě (Bill mi to odpusť) mám dost nutkání se k nim vrátit.
Layout, o který se snažím vypadá asi takhle:


Jeho minimální výška by se měla rovnat výšce okna prohlížeče. Výška hlavičky i patičky je neměnná, výška třech zbylých panelů je stejná a mění se podle obsahu.

Pomohl by mi s tím někdo tady prosím? Chtěl bych se něčemu přiučit, ale už mi došla trpělivost donekonečna prohledávat Google a hledat, co dělám špatně.

Předem díky

Nahlásit jako SPAM
IP: 89.203.136.–
Reklama
Reklama
bukaj0
Věrný člen
12. 8. 2008   #2
-
0
-

Bummer
Doporučuji ti si prostudovat články In search of the One True Layout[1].

[1] http://www.positioniseverything.net/articles/onetruelayout/

Nahlásit jako SPAM
IP: 85.70.13.–
Jak se správně ptát? -> http://www.hash.cz/inferno/otazky.html[br][br] Po programování je člověk hladovej.
Bummer0
Návštěvník
14. 8. 2008   #3
-
0
-

To bukaj : Tak jsem si to pročetl. Dobral jsem se k tomu, že to rozhodně asi nebude žádná sranda a že ten, co to psal, se asi docela vyzná. :)
Takže se mi částečně s pomocí toho článku povedlo roztáhnout layout na výšku okna. Bohužel začala sabotovat patička a nevím, jak ji donutit, aby slezla dolů ke spodnímu okraji okna prohlížeče.
[IMG]http://img60.imageshack.us/img60/8797/layoutscreenshotqj4.png[/IMG]
XHTML:

<?xml version="1.0" encoding="windows-1250"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="cs" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="default.css" type="text/css" />
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="block_1">
1Lákamí vůněhulás úmyval rohlivý jednovod lek ...
</div>
<div id="block_2">
2Lákamí vůněhulás úmyval rohlivý jednovod lek ...
2Lákamí vůněhulás úmyval rohlivý jednovod lek ...
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>


CSS:
html, body {

height: 100%;
padding: 0px;
margin: 0px;
}

#block_1 {
float: left;
width: 300px;
background: #AAFFAA;
margin-left: 300px;
}

#block_1_content {
}

/* Kvuli starym verzim IE */
* html #block_1
{
display: inline;
}

#block_2 {
float: left;
width: 300px;
background: #CCFFCC;
margin-left: -600px;
}
#block_3 {
float: left;
width: 300px;
background: #EEFFEE;
margin-left: 0px;
}

/* IE5 MAC filter \*/
#block_1, #block_2, #block_3 {
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
/* end of IE5 MAC filter */

#wrapper {
margin: auto;
width: 900px;
min-height: 100%;
/* tohle tu pak nebude, PHP je lepší než hacky */
_height: 100%;
background: #EFFFEF;
display: block;

overflow: hidden;
/* Normally a Holly-style hack height: 1% would suffice but that
causes IE 5.01 to completely collapse the wrapper - instead we float it */
float: left;
/* NB. possibly only IE 5.01 needs to get this float value - otherwise 5.5
sometimes (I saw it happen many moons ago) makes the width of wrapper
too small the float: none with the comment is ignored by 5.01, 5.5 and
above see it and carry on about their business. It's probably fine to just
remove it, but it's left here just in case that many moons ago problem
rears its head again */
float/**/: none;
display: inline-block;
}

/* easy clearing */
#wrapper:after {
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* IE5 MAC filter \*/
#wrapper {
display: block;
}
/* end easy clearing */

#header {
display: block;
height: 30px;
background: #77FF77;
}

#footer
{
clear: both;
display: block;
height: 30px;
background: #77FF77;
}

/* Safari needs this - otherwise the ghost overflow, though painted
correctly obscures links and form elements that by rights should be above it.
An unintended side-effect is that it cause such elements to vanish in IE 5.01
and 5.5, hence the child selector hack */
* > #footer, * > form, * > #notes, * > .output {
position: relative;
z-index: 1000;
}

CSS je skoro celé vytažené z toho článku a mírně upravené.

Ještě by mě zajímalo, jak je nejlepší testovat weby na kompatibilitu v různých prohlížečích? Například jestli lze mít nainstalovánu více jak jednu verzi IE jinak, než přes virtuální pc.

Nahlásit jako SPAM
IP: 89.203.136.–
14. 8. 2008   #4
-
0
-

Na testovani ve vice verzich IE jsou hned dve reseni (mimo online testeru): IETester a MultiIE

Nahlásit jako SPAM
IP: 78.102.164.–
Prosím, jestli potřebujete s něčím poradit,zeptejte se na fóru. Jakýkoliv bezdůvodný pokus mě kontaktovat skončí okamžitým přidáním do ignore listu![br][br] Současný počet osob, které to nepochopily: 7
bukaj0
Věrný člen
14. 8. 2008   #5
-
0
-

Bummer
Bohužel začala sabotovat patička a nevím, jak ji donutit, aby slezla dolů ke spodnímu okraji okna prohlížeče.
V tom kódu, co jsi poslal jsem na to taky nepřišel :o) Nejjednodušší podle mě bude, když se sloupce obalí nějakým prvkem a tím se „odstíní“ od hlavičky a patičky. Schématicky:

body

#page { width: 900px; margin: 0 auto; position: relative; ... }
#header { ... }
#wrapper { padding-bottom: 50px; } ... #wrapper:after { content: "."; clear:both; ... }
-- padding-bottom = výška patičky
-- tady budou umístěny jednotlivé sloupce
#footer { position: absolute; height: 50px; ... }

Když tak google > css footer always down.

Nahlásit jako SPAM
IP: 85.70.13.–
Jak se správně ptát? -> http://www.hash.cz/inferno/otazky.html[br][br] Po programování je člověk hladovej.
Laik0
Stálý člen
14. 8. 2008   #6
-
0
-

Odporúčam: vybodni sa na Layouty a table...

Nahlásit jako SPAM
IP: 85.135.243.–
Ovládam CSS,(X)HTML,trochu PHP a rýpem sa teraz vo VB
Bummer0
Návštěvník
15. 8. 2008   #7
-
0
-

To Laik : A co bych podle tebe měl místo toho používat? :)

Nahlásit jako SPAM
IP: 89.203.136.–
Laik0
Stálý člen
15. 8. 2008   #8
-
0
-

používaj tento príklad:
http://www.jakpsatweb.cz/priklady/css-sloupce.html

Nahlásit jako SPAM
IP: 85.135.239.–
Ovládam CSS,(X)HTML,trochu PHP a rýpem sa teraz vo VB
Bummer0
Návštěvník
15. 8. 2008   #9
-
0
-

Tak fakt díky. Tenhle layout není za a) roztažený na výšku ani za b) nemá patičku tak jak potřebuji a uvedl jsem v prvním postu. Vlastně bych ani nemusel používat (X)HTML a mohl tam dát jen texťák ne?

Nahlásit jako SPAM
IP: 89.203.136.–
Laik0
Stálý člen
15. 8. 2008   #10
-
0
-

To Bummer : to sa dá dotvoriť...Otvoriš .html súbor a hráš sa s pixelmy (u width a height)....

Nahlásit jako SPAM
IP: 85.135.239.–
Ovládam CSS,(X)HTML,trochu PHP a rýpem sa teraz vo VB
Bummer0
Návštěvník
15. 8. 2008   #11
-
0
-

To Laik : Jenže tohle není jen o pixelech. Absolutní pozicování je hračka. Ale jakmile potřebuji, aby se něco roztahovalo podle velikosti okna a něco ne, tak už to taková sranda není.

Nahlásit jako SPAM
IP: 89.203.136.–
Laik0
Stálý člen
15. 8. 2008   #12
-
0
-

jo je

Nahlásit jako SPAM
IP: 85.135.239.–
Ovládam CSS,(X)HTML,trochu PHP a rýpem sa teraz vo VB
Bummer0
Návštěvník
15. 8. 2008   #13
-
0
-

Laik napsal:
jo je


Ok, jsem rád, žes mi to objasnil. Opravdu velmi přínosné.

Když je to tak jednoduché, tak nadhoď nějaký příklad, ne? Rád se vzdělám. A určitě i další stovky lidí, kteří se touto problematikou zabývají.

Nahlásit jako SPAM
IP: 89.203.136.–
Laik0
Stálý člen
15. 8. 2008   #14
-
0
-

omg...čert abych to spral...proste ti to vysvetlím...nebudem tu koumat nové príklady...Proste študuj jakpsatweb.cz...je to tam dobré urobené...

Nahlásit jako SPAM
IP: 85.135.239.–
Ovládam CSS,(X)HTML,trochu PHP a rýpem sa teraz vo VB
Bummer0
Návštěvník
15. 8. 2008   #15
-
0
-

Tak až tam najdeš řešení mého problému, tak řekni. Jakpsatweb.cz mám dostatečně nastudováno a nic takového tam není. Mimo to, informace tam jsou již notně zastaralé.

Doufám, že až budeš lidi tady žádat o pomoc, najde se někdo, kdo umí poradit stejně dobře, jako ty sám.

Nahlásit jako SPAM
IP: 89.203.136.–
plasmo0
Věrný člen
15. 8. 2008   #16
-
0
-

A co třeba si koupit knihu alá Xhtml a css velká kniha řešení(nebo tak se to jmenuje), css hotová řešení a mnoho dalšího :) a pokuď nechceš kupovat, gogli, eboku je dost ;-)

Nahlásit jako SPAM
IP: 82.150.166.–
Jak vzniká vynález? To všichni vědí, že je něco nemožné, a pak se objeví nějaký blázen, který neví, že je to nemožné, a udělá vynález. [br] Albert Einstein [br][br] http://plasmo.cz [br] http://bleskovaregistrace.cz [br] http://livetrading.cz
Bummer0
Návštěvník
15. 8. 2008   #17
-
0
-

Nj asi mi nic jiného nezbyde. Přecejen ve mně ještě žila malá naděje, že tu někdo něco podobného tvořil a ví, jak na to. :)

Nahlásit jako SPAM
IP: 89.203.136.–
Anonymní uživatel
~ Anonymní uživatel
0 příspěvků
16. 8. 2008   #18
-
0
-

Jestli chceš mít patičku vždy dole, musíš použít JavaScript.

Nahlásit jako SPAM
IP: 213.192.22.–
Bummer0
Návštěvník
16. 8. 2008   #19
-
0
-

To Anonymní uživatel : Myslíš, aby byla stále viditelná a byla přilepená naspod okna? To ne, měl jsem na mysli na konci stránky. (mimochodem - pokud jsem tě pochopil správně - na to ani není potřeba JS, CSS + Position: Fixed stačí :))

Nahlásit jako SPAM
IP: 89.203.136.–
Maniik0
Newbie
17. 8. 2008   #20
-
0
-
Nahlásit jako SPAM
IP: 82.119.109.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 3 hosté

Podobná vlákna

Jak udělat tento program? — založil Aleš

Layout — založil Nicolas

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý