[HTML, CSS] Jak zarovanat CSS pozicovani na stred???

Potreboval bych poradit...jak zarovnat tohle na stred????

Kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Stranka</title> <style> #obsah {position: absolute; width: 610px; top: 100px; left: 150px; background-color: red} #hlavicka {position: absolute; width: 760px; height: 100px; top: 0px; left: 0px; background-color: green} #levy {position: absolute; width: 150px; top: 100px; left: 0px; background-color: blue} </style> </head> <body> <div id="hlavicka">Hlavička</div> <div id="levy">Levý sloupecL</div> <div id="obsah">Brm</div> </body> </html>

Neviem co presne chces zarovnavat... "margin:auto" si skusal?

EDIT: Ako teraz pozeram, tak tam mas absolutny positioning... to bude horsie. Hmm... co takto nejake % hodnoty do left?

Projed si

http://sovavsiti.cz/c02031.html (vsechny dily)
http://vmalek.murphy.cz/

Jinak pro tebe budou asi potrebne i odkazy

http://www.pixy.cz/blogg/clanky/css-3col-layout/
http://www.maciweb.net/blog/web/priklady/fixloimg.htm

a dalsi :)

Citace:

Původně odeslal sisi

Neviem co presne chces zarovnavat... "margin:auto" si skusal?

EDIT: Ako teraz pozeram, tak tam mas absolutny positioning... to bude horsie. Hmm... co takto nejake % hodnoty do left?

bych to rad zarovnal cely na stred...aby kdyz bude mit nekdo rozliseni na 1024 a vis, tak aby to bylo na prostredku...takhle to bude na kraji ne??
este se moc v CSS nevyznam...nakej podrobnejsi popis co s tim by tam nebyl???

No to by melo stacit vse obalit jeste do jednoho DIVu (ala Matrojska :) )

Kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Stranka</title> <style> #celek {position: absolute; width: 60%; left: 20%; background-color: yellow; border: 1px solid green;} #hlavicka {width: 100%; height: 100px; top: 0px; left: 0px; background-color: magenta} #levy {float: left; width: 20%; left: 0px; background-color: blue} #obsah {float: right; width: 80%; left: 20%; background-color: red} </style> </head> <body> <div id="celek"> <div id="hlavicka">Hlavicka</div> <div id="levy">Levý sloupec</div> <div id="obsah">Obsah</div> </div> </body> </html>

Vse jde resit elegantneji (treba bez absolutniho pozicovani) ale funguje to :)

PS1: pak si oddelej ten border u toho obalovaciho DIVu. Je tam jen pro nazornost ;)
PS2: pouzivej % ;)

No jo, ale co sem tak zkousel tak vsechny priklady co tady jmenujete sou delany na roliseni 1024x768... kdyz sem si zmensil okno, tak to vubec neslo...ani scrollovani poradne nefungovalo...

jaky sou ty elegantnejsi reseni????

co chci....

ja proste potrebuju vyresit stranku kde budou tyhle objekty...a aby kdyz si to nekdo otevre ve velkym rozliseni tak aby to bylo na prostredku...
ty priklady co pisete fungujou...zarovna se to, ale jakmile do toho chci vlozit dalsi, tak ty uz sou rozhozeny...respektive..kdyz vlozim treba jen hlavicku, tak to de, ale jakmile dam dva sloupce vedle sebe, tak uz to nejde.... :?

Citace:

Původně odeslal Miiisa

No jo, ale co sem tak zkousel tak vsechny priklady co tady jmenujete sou delany na roliseni 1024x768... kdyz sem si zmensil okno, tak to vubec neslo...ani scrollovani poradne nefungovalo...

jaky sou ty elegantnejsi reseni????

Ten zmeneny kod co jsem pastnul mi fici v IE5.x, IE6.x, FF0.8, OP7.5. Resize okna jsem pochopitelne zkousel. A scrollovani nechapu, kdy presne?

PS: Elegantnejsi reseni jsou treba precist si clanky na intevral.cz :) Tam jsou clanky ohledne sloupcovych designu rozebrany do posledni mrte (vcetne hacku).

A co treba tohle??? je to od kamose, jem jsem to trochu upravil...
to uz by slo...podle toho to udelam... :wink:

Kód:

<html> <head> <title>Titulek</title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=windows-1250"> <style type="text/css"> #stranka{ position:relative; width:780px; text-align:left; margin:auto; } #head { width:777px; height:80px; border-color:#000093; border-style:solid; border-left:0px; border-right:0px; border-top:0px; } #levyslo { float:left; width:140px; color:#FFDD80; border-width:2px; border-color:#000093; border-style:solid; background:#fb8743; } #main { float:left; width:628px; text-align:center; background:#f1fafd; border-color:#000093; border-style:solid; border-bottom:0px; border-right:0px; border-top:0px; } </style> </head> <body bgcolor="#c1e0ff" style="text-align:center;"> <div id="stranka"> <div id="head">HLAVICKA </div> <div id="levyslo"> <div id="pismo"> Odkaz Odkaz Odkaz Odkaz Odkaz Odkaz Bla bla bla keci keci sbrm brm brm </div> </div> <div id="main" style="height:400px">brm rbr </div> </div> </body> </html>

Az na to ze:

a, nemyslim ze davat text-align: center celemu uzlu body je zrovna nejchytrejsi. Jednoucelove mozna, ale do budoucna urcite ne.
b, zadne id #pismo neni definovano
c, nevim proc je tam relativni pozicovani?
d, nevim proc je u div s id #main dalsi doplnek stylu?
e, ten 2x float: left se mi taky nejak nezda

Ale kdyz nedbas na rady, delej si to jak chces....

ad a) zarovnani na stred se da kdykoliv odstranit...nikdo nerikal ze to budu delat presene takhle...

ad b) id pismo tam bylo, ale ja sem ho odstranil, aby bylo lip videt jak je napsany rozvrzeni ty stranky...

ad c) to taky nevim...protoze sem v tom este tolik nevyznam...

ad d) ten doplnek je tam proto, aby byl videt ram...jakmile se tam da text, tak se to odstrani a ram bude stejne velklej jako text...schvalne si to zkus odstranit...

ad e) float left s da u main odstranit...nemelo by se nic stat...

jinak po upravach by to melo vypadat nejak takhle...docela i funkcne...

Kód:

<html> <head> <title>Titulek</title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=windows-1250"> <style type="text/css"> #stranka{ position:relative; width:780px; text-align:left; margin:auto; } #head { width:777px; height:80px; border-color:#000093; border-style:solid; border-left:0px; border-right:0px; border-top:0px; } #levyslo { float:left; width:140px; color:#FFDD80; border-width:2px; border-color:#000093; border-style:solid; background:#fb8743; } #main { width:628px; text-align:center; background:#f1fafd; border-color:#000093; border-style:solid; border-bottom:0px; border-right:0px; border-top:0px; } </style> </head> <body bgcolor="#c1e0ff" style="text-align:center;"> <div id="stranka"> <div id="head">HLAVICKA</div> <div id="levyslo"> <div id="pismo"> Odkaz Odkaz Odkaz Odkaz Odkaz Odkaz Bla bla bla keci keci sbrm brm brm </div> </div> <div id="main" style="height:400px">brm rbr </div> </div> </body> </html>

kdyz vemes tohle a zmensis to, tak se nic nestane a rozmery zustanou stejny..kdyz vemes to tvoje, tak se to nejak hnusne nasklada pod sebe a navic se rozmery meni podle velikosti okna...takze to budu delat podle tohohle... :wink:

a, nj ale je to zdroj zbytecnych potencionalnich chyb.
b, ok
c, Ta je tam patrne pro odstraneni chyby v box modelu IE. Ten bug se jmenuje se Peekaboo. Je to tam dobre, neboj ;)
d, to ja vim. Ja jen proc to neni primo ve stylu ;)
e, tak tam nemusi pak byt vubec ze?

Dalsi chyba ;D
V IE je vlastnost float ocividne jinak (zle) zobrazena nez v Mozille. Bud tam das u #main float: right; a upravis sirky jednotlivych DIVu aby navazovaly tak jak chces nebo to vyres jinak.

Jinak co se tyce resizu tak jsi mel rict ze chces aby rozmery byly fixni. Potom to tve je dobre :)

d) ve stylu?? treba proto aby se to lip odstranovalo...

asi to stejne udelam s absolutnim pozicovani a necham to nalevo...protoze kdyz do toho hlavniho doplnim nakej text tak se roztajne a soupne se pod to menu...
ted sem to este skusil s float right u main a je to uplne v pohode i s dlouhym textem..takze ted uz by to melo nejt snad v pohode ne???

Takze ted by to melo vypadat nejak takhle.... ??? ??? :idea:

Kód:

<html> <head> <title>Titulek</title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=windows-1250"> <style type="text/css"> #stranka{ position:relative; width:780px; text-align:left; margin:auto; } #head { width:777px; height:80px; border-color:#000093; border-style:solid; border-left:0px; border-right:0px; border-top:0px; } #levyslo { float:left; width:152px; color:#FFDD80; border-width:2px; border-color:#000093; border-style:solid; background:#fb8743; } #main { float:right; width:628px; background:#f1fafd; border-color:#000093; border-style:solid; border-bottom:0px; border-right:0px; border-top:0px; } </style> </head> <body bgcolor="#c1e0ff" style="text-align:center;"> <div id="stranka"> <div id="head">HLAVICKA</div> <div id="levyslo"> <div id="pismo"> Odkaz Odkaz Odkaz Odkaz Odkaz Odkaz Bla bla bla keci keci sbrm brm brm </div> </div> <div id="main">brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brmbrm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brmbrm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm brm </div> </div> </body> </html>

Este chyba :)

Ve FF se ten pravy sloupec hodi az pod tim levym. Je to dano jinymi defaultnimi hodnotami padding, margin a border pro jine prohlizece. Nechce se mi zkoumat kterou s tehle vlastnosti to je ale nastav si je na presne ty hodnoty co potrebujes. A tim myslim left, right, top i bottom.

Napr.

Kód:

padding: 0px 0px 0px 0px; border: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;

PS: a taky by tomu slusel nejaky DTD.