CSS layout

**Smitka** · 07.09.2004, 14:54

Chtěl bych udělat pěknej css layout bez tabulek, tak aby vlevo a vpravo byla od okraje stránky 150px mezera a nahoře 70px.
Už víc než rok to řeším např. tak, že <body> nadefinuju marginy na 150 vlevo vpravo, 70 nahoře a dolů 0, potom tam hodim hlavní <div> s width a height na 100% ve kterym pak zobrazuju text. Případně používám paddingy.
Tento systém funguje krásně, ALE když definuji <!doctype ...> celý se to rozhodí, jako by to mělo absolutní pozici na top:0 a taky height to nastavuje podle šířky textu.
Klidně můžu mít validní kód podle xhtml 1 strict (i jakejkoliv jinej), a vždy to udělá neplechu.
Může mi to někdo vysvětlit

Klidně jako důkaz nahraju moje ukázku na moje stránky (doufam, že se pak neztrapnim, že mi to dělá jenom můj komp

).
Ozkoušeno na IE, Netscape, Opera, Mozilla, Konqueror.
Funkční variantu (bez doctype) používam na mojich stránkách
http://smitka.iglu.cz

**Jezevec** · 07.09.2004, 16:47

IE to rozhodi paac je tam bug => kdyz das doctype tak pouzije jinej zpusob renederovani stranky (on totiz xml/xhtml neumi, a kdyz tam doctype neni, tak to generuje jako html). Stim neudelas nic.

Na tom tvym webu vidim frame, fujtajbl.

Zapomen na px, pouzij jiny (relativni) jednotky (em treba). Jestli to doma najdu, mozna sem postnu link kde je asi to co chces ciste v css (ale v IE to nefucka).

Edit: v IE to nefucka, paac IE neumi position: fixed; (stejne jako spoustu dalsich css veci => ja na IE prdim).

**Smitka** · 07.09.2004, 16:50

Jo toho framu se brzo zbavim, až mi bude dobře fachat tem css layout.
Ale i v jinejch prohlížečích se to rozhazuje

**Jezevec** · 07.09.2004, 16:59

OK, priklad, bude to delsi. Menu vlevo a nahore, v pravo neni problem pridat. Je to jen testovaci stranka, takze obsah neres

. Kdyz bude ten text v block dost dlouhej, tak ti bude scrolovat. Otestovano v Mozille a validni je jak web tak css. V opere se to zobrazi trocha jinak, ale jeste furt OK, IE (6) to podela dokonale.

Kód:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="cz" xml&#58;lang="cz" xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
  <meta name="author" content="Jezevec" />
  <meta name="copyright" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" href="./style.css" type="text/css" />
  <title>main page</title>

</head>
<body><div class =" top_menu">

pokus</p></div><div class =" left_menu">


Novinky
Informace o síti
Jak co nastavit
Statistiky
Mapka WiFi Nodu
_______________
Linky
TPfree

czfree
Speednet
_______________
Browsery
Mozilla
Opera
</p>

<a href="http&#58;//validator.w3.org/check/referer">
  [img]pic/valid-xhtml10.png[/img]
</a> 


<a href="http&#58;//jigsaw.w3.org/css-validator/">
  [img]pic/valid-css.png[/img]
</a>

</div><div class="block">

ccc ccc ccc kokokokokokoko hlasdk jsalkd dkjfh kldjhfd lkjfdlskhf dslakhf hfksdajhf kdsajhf
kajdsfh kjdshf kldsajhfkds jhkdlhfdsk fjadskfjh dksfjh ksajdhf slkadjhf
alskhfieuhfakjfd vbaiufehoasdjf asdjfh dskjfh alkjdhf lakjdfkljad kjd
fkljsdhf jdfkslajdhf klj ad jfksjdhf alksjdhf skjadhfl
khfauefdcbdkjfbeufbksajdhf kjldhf asldf dskjahf alkjheufdkljhf alkdjhf
aslkjdhf laskjf akj hfksjdhf akljhdlkj fhaslkdjfh asklefuh adfbdfu beuf
bkdjfh lkaukehfdjfbauefb kjadfkl jaksdjfb le ufbadjfblkajsdf h

Příliš žluťoučký kůň ďábelské ódy.

</p>
    
    
</div></body></html>

Kód:

/* Styles  */

h1 &#123;
	text-align&#58; center;
&#125;

.left_menu &#123;
	position&#58; fixed;
	text-align&#58; center;
	overflow&#58; hidden;
	height&#58; 80%;
	top&#58; 5em;
	left&#58; 0em;
	width&#58; 9em; 
	z-index&#58; 100;
	float&#58; left;
	background-color&#58; #66CC00;
&#125;


.left_menu a &#123;
	display&#58; block;
&#125;

.left_menu a&#58;hover &#123;
	background-color&#58; #66AA00;
&#125;

.left_menu a&#58;focus &#123;
	background-color&#58; #88CC00;
&#125;

.left_menu a&#58;active &#123;
	background-color&#58; #BBCC00;
&#125;

.left_menu img &#123;
	position&#58; absolute;
	border&#58; 0;
	left&#58; 20%;
	width&#58; 88px;
	height&#58;31px;
	z-index&#58; 50;
&#125;

#xhtml &#123;
	bottom&#58; 1em;
&#125;


#css &#123;
	bottom&#58; 3em;
&#125;

.top_menu &#123;
	position&#58; fixed;
	text-align&#58; center;
	overflow&#58; hidden;
	height&#58; 5em;
	width&#58; 100%;
	left&#58; 0em;
	top&#58; 0em;
	z-index&#58; 100;
	background-color&#58; #66CC00;
&#125;


.block &#123;
	position&#58; absolute;
	text-align&#58; justify;
	top&#58; 7em;
	left&#58; 9em;
	margin-left&#58; 5%;
	margin-right&#58; 5%;
	z-index&#58; 1;
&#125;

**jedik** · 07.09.2004, 18:10

2Smitka: Misto toho iframu tak dej normalni div s overflow: auto ( http://www.jakpsatweb.cz//css/overflow.html )

2Jezevec: moc jsem se na to nedival ale proc tam mas ty z-indexy?

**Jezevec** · 07.09.2004, 18:51

Dyk sem psal, ze je to pokusna stranka

, sem tak ruzne laboroval co jak a v cem funguje. Takze to css jde samo ocesat o nepotrebny veci.

**Smitka** · 08.09.2004, 14:29

Overflow:auto normálně používam, css myslim zvládam docela dobře.
Mě se zatim nechce uzpůsobovat novej kód layoutu, kterej pořádně nefunguje, musel bych dost hodně přeskriptovat stránky a to je docela fuška. Proto si chci nejdřív připravit ten layout a pak teprv dodat obsah.
Je to v tom, že jsem měl dřív (před 2-3 rokama) stránky z framů (ne z iframu) a z tý doby mam hodně .htm souborů, který bych musel předělat, aby se daly pomocí php implantovat do <div>.

Pro IE se musej použít "fígle" který pak v jinejch prohlížečích nefachaj. To je věc, kterou na IE nenávidim. A většina uživatelů IE používá. A taky nerad dělam stránky zvlášť pro IE a pro všechno ostatní. Můj cíl je udělat právě univerzální supervalidní layout.

V současnýdobě mam asi 1/3 stránek převedenou do neframový verze, ale všechno ještě nefunguje. A dost jsem se zděsil, když jsem viděl jak mi po udání Doctype prohlížeče všechno rozházeli. Ale včera se mi už povedlo udělat layout, kterej jak se zdá funguje.

Ještě bych dodal zkušenost k těm z-indexům. Jsou hodně důležitý v opeře, když se maj objekty vrstvit přes sebe užitím pořadí v kódu (že se nejdřív nadefinuje jeden objekt s absolutní pozicí a po něm další a ten další se většinou sám vykreslí přes ten první), to mi dělalo v opeře problémy, ale když jsem definoval z-index tak to šlo v pohodě.

**jedik** · 08.09.2004, 19:28

Jestli temi IE "figly" myslis hacky(korekce boxmodelu atd) tak ty jsou vzdycky delany tak aby fungovaly vsude stejne. To je ostatne i jejich smysl, ze

**Smitka** · 09.09.2004, 14:24

Sorry,
objevil jsem svou chybu - překlep (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EM">), nevšim jsem si jí a zkusil jsem používat doctype pro xhtml a to pak dělalo v IE problémy.
Výsledný zdroják, který je doufám univerzální, vypadá takto:

Kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Layout pokus&copy;</title>
<style type="text/css">
body &#123;overflow&#58;hidden;margin&#58;0;padding-left&#58;150;padding-right&#58;150;padding-top&#58;70;paddnig-bottom&#58;0;color&#58;silver;font-family&#58;arial&#125;
.main &#123;width&#58;100%;height&#58;100%;z-index&#58;1;overflow&#58;auto;background-color&#58;navy&#125;
.left &#123;position&#58;absolute;left&#58;10;top&#58;70;width&#58;130;height&#58;150;background-color&#58;navy;text-align&#58;center&#125;
.right &#123;position&#58;absolute;right&#58;10;top&#58;70;width&#58;130;height&#58;150;background-color&#58;navy;text-align&#58;center&#125;
</style>
</head>


<body>

<div class="main">
<script type="text/javascript">
for &#40;i=0; i!=1000; i++&#41; document.writeln&#40;"text"&#41;;
</script>
</div>

<div class="left">LEFT MENU</div>

<div class="right">RIGHT MENU</div>
</body>
</html>

Jenom mi ještě vadí, že v tom skrolovacím <div> nefunguje u mozilly a opery kolečko myši. To snad pude vyřešit javascriptem použitím události onmousewheel a proměný wheeldelta (1 řádek = 120), ale ještě jsem nezkoušel jestli funguje v mozille a opeře.

2Jezevec: ten tvůj kód je perfektní v mozille, v ie funguje "čitelně" (ie neumí display:fixed), ale v opeře je to fakt dost špatný.

**Jezevec** · 09.09.2004, 14:48

MNo ted sem to zkouknul, v Mozille to bylo navrhovany, opera (7.50/377

mi zobrazi ikony validity pres text menu, IE po absovovanii SP2 na widle to kupodivu zobrazi taky jen s blbe umistenyma tema ikonama, tentokrat do textu + samozrejme nescroluje (takze s tim asi neco delali = dalsi verze ktera se bude chovat jinak a opet blbe).

IMO kdybych tam nacpal px jako jednotky tak by to bylo minimalne i v tej opere OK, v IE bych tomu asi nepomoh bez hacku.

**Smitka** · 09.09.2004, 15:09

Nebo by tu bylo takový ošklivý řešení - vrátit se k tabulkám...
Ty už ale vycházej z módy...

**jedik** · 09.09.2004, 16:56

ad kolecko mysi,
a nefunguje ani kdyz do te oblasti toho skrolovaciho divu kliknes a pak zaskrolujes? Delat to pres JS je fujfuj.

A proc je tam ted ten z-index?

ad tabulky,
To neni zalezitost mody, ale proste se nepouzivaji na layout kvuli tomu, ze proto nebyly navrhnuty(maji zobrazovat tabulkova data a nic jineho) a lidi na to prichsli az ted(a samozrejme az se browsery dostaly tam kde jsou ted). Nekde se zase treba tabulkovym layoutum nevyhnes, ale zlate pravidlo zni: Myslete v CSS, ne v tabulkach!

**Smitka** · 10.09.2004, 12:14

Skrolování:
právě i když tam kliknu tak to neskroluje (alespoň na mojem kompu, třeba mam blbý ovladače pro myš).
Taky se mi nechce to dělat JS, ale taky, aby se to skrolovalo.

**jedik** · 10.09.2004, 17:40

Původně odeslal Smitka

Skrolování:
právě i když tam kliknu tak to neskroluje (alespoň na mojem kompu, třeba mam blbý ovladače pro myš).
Taky se mi nechce to dělat JS, ale taky, aby se to skrolovalo.

Nj mas pravdu ale to je problem (a ted vsichni Operisti a IEckari urcite zajasaji) Gecka

Ale vi se o nem a je uz FIXED!

http://bugzilla.mozilla.org/show_bug.cgi?id=97283

Tipuju ze bude zahrnuta ve FF 1.0

**Smitka** · 14.09.2004, 14:42

Tak jsem to toho novýho layoutu přes víkend implantoval moje stránky.

Ie - bezva, Opera - bezva, Gecko - áááááá

Rozhazuje se mi layout, tak že ta hlavní část bejvá asi poloviční (nějaké sekce jsou normální), nebo mi hlavní část sama horizontálně o polovinu odskroluje = půlka stránky je čistá a v tý druhý je polovina obsahu, ale ta druhá polovina je useklá.
Ale když resiznu mozillu, tak se to vrátí do normálu a je to takový, jak to má vypadat.
Nevíte někdo, jak tento jev omezit

Nebo si dam na stránky detekci prohlížeče a Geckařům napíšu zprávu:
"Vážený návštěvníku, prosím změňte si velikost okna prohlížeče."

**jedik** · 14.09.2004, 16:58

Covece, dyt ty v tom iframu rves do spanu divy (resp. blokove elementy do radkovych)

Todle teda neni vubec korkektni. Taxe nediv

To, ze to OP a IE zobrazi dobre, je tim ze pracujuji v quirk modu - v tom iframu nemas zadny DOCTYPE.

A narvi si ty styly do externiho css. Takhle aby se v tom prase vyznalo

**Smitka** · 15.09.2004, 14:14

Ale néé, na webu je pořád stará verze ten novej layout mam zatim jenom na disku a v tejdnu ho nahraju na web, ale protože jsem modemář, tak to potrvá.
Ten novej je založenej přesně na tom kódu, kterej jsem uvedl pár příspěvků nahoru.
Ty divy ve spanu tam jsou jenom testově.

**jedik** · 15.09.2004, 14:18

No to se dost blbe posuzuje jen z takoveho popisu

To by chtelo videt ten kod presne. Muzou tam byt drobnosti, ktere hrajou dulezitou roli.

**Smitka** · 15.09.2004, 14:35

Hmm, pravda...
Zkoušel jsem to ale na novym firefoxu a tam to vypada dobře, tak jak má. Ta rozházená mozilla byla verze jenom 1.6, tak to moh bejt jenom nějakej bug, kterej je už opravenej.
Ale optimalizovat stránky jenom pro nejnovější verze prohlížečů taky není dobrý.

Jinak ten Doctype neni definovanej jenom v tom iframu, ale neni ani v "obalový" stránce, protože mi to s nim dělalo problémy.

Až to bude na webu, tak dam vědět.

**Jezevec** · 15.09.2004, 16:13

Co je to optimalizace ? To slovo proste neznam. Kod bud je validni a pak je chyba v prohlizeci, nebo neni a pak je chyba v nem. Nic mezi tim neni.

To ze ti to nejaka verze gecka zobrazi blbe neres, lidi kteri pouzivaji tohle jadro vetsinou umeji pouzit fci update, pripadne poptat se po netu na nejakej bug.
Osobne teda Mozillu/Firefox cpu vsem co jim delam neco s kompem. A zatim si nikdo nestezoval (zminim dialer + 100k Kc za telefon a v ty hruze uplne zapomenou ze nejaky modry e existuje

)

**Smitka** · 17.09.2004, 14:48

Tak jsem nahrál novel layout na web, ale ještš tam neni celej obsah, ale na posouzení to snad stačí.
Je to ještě jenom provizorně.

**jedik** · 29.09.2004, 15:12

Původně odeslal Jezevec

Co je to optimalizace ? To slovo proste neznam. Kod bud je validni a pak je chyba v prohlizeci, nebo neni a pak je chyba v nem. Nic mezi tim neni.

OT Bohuzel v jistych sferach mezi tim jeste existuji pojmy jako "Zadavatel projektu" ktere hrajou dulezitou roli

**Jezevec** · 29.09.2004, 19:30

Zadavatel tomu vetsinou prd rozumi, takze veme to, co mu realizator nabidne. Kdyz mu nabidne validni kod, tak ho veme, kdyz ne, tak to veme taky.

BTW: malem sem si uch..l smichem do gati, kdyz k nam prisel do firmy jeden manik predvadet web a mozilla na mojem kompu to samo nezvladla. Tomu se rika "dobra reklama", hlavne kdyz je to pred mym sefem

. Evidentne ho to znacne vyvedlo z konceptu. Navrch to ve finale nechodilo ani v IE

. Hlavne mel spoustu reci kolem, a ze prej delaj ted uz jen M$.net ...

**jedik** · 30.09.2004, 13:43

Ano nerozumi tomu, ale vidi jine "stranky", ktere skacou, hybaji se, zvuci, tanci, morfujou atdatd a to chcou proste taky. Proste "VELKOU SHOW"

A pokud ty to nejsi schopny nabidnout jdou automaticky k jinemu. To je bohuzel nepopiratelny fakt. To je praxe.

Jinak mas pravdu vsichni se akorat chlubi ze my pouzivame .net a my todle ale aby se aspon v jedniom naucili delat poradne to ne :/

**Smitka** · 01.10.2004, 14:32

Jak se stavíte k používání vlastností css, který jsou jenom rozšířením IE?
Např. barevný scrolovátka, když je napíšu do css souboru, tak nejsou považovaný za validní a to se mi nelíbí, ale ty scrolovátka jsou hezký.
Můžu použít "komentář" a v něm načíst nový styl, ale nepříde mi to jako moc čistý řešení.

Téma: CSS layout

Nástroje témat

Zobrazení

CSS layout

Informace o tématu

Users Browsing this Thread

Pravidla přispívání