« 1 2 »
Autor Zpráva
paskal
Profil
zdravím!

začal jsem předěláva stránky do css pozicování, ale nepřišel jsem na to, jak CELÉ stránky vystředit tak, aby to bylo uprostřed i když budu měnit rozlišení ...

našel jsem tady článek o centrování pomocí dvou divů nebo záporného okraje (umístění banneru), ale to se na celé stránky nedá dost dobře použít hlavně kvůli tomu, že při změně velikosti okna browseru mizí levé menu ...

díky za radu
Vít Dlouhý
Profil
body {text-align:center} /* Hack pro IE */
#main {text-align:left; margin:0 auto}

Do "#main" pak umístěte obsah stránky...
halogan
Profil
VT: Uplne jste "zkopiroval" moji beznou odpoved :)
Vít Dlouhý
Profil
to halogan: Jiná mě nenapadla ;-)
Yuhů
Profil
IMHO je ještě potřeba tomu #main nastavit šířku
paskal
Profil
díky
Vít Dlouhý
Profil
to Yuhů: Pravda.
Yuhů
Profil
teď jsem si ještě všimnul, že se původní tazatel zmiňuje o pozicovaném designu. V tom případě je ještě potřeba tomu vnitřnímu prvku nastavit

position: relative;

a pro kompatibilitu ve starších Mozillách ještě

min-width: /*tolik, co width*/;

jinak to při úzkém okně zajíždí pod levý okraj a nejde vyrolovat.

Takže celý kód:

body {text-align:center}
#main {text-align:left; margin:0px auto; width: 760px; min-width: 760px; position: relative; }

V praxi je pak ještě dobré nastavit tiskový styl na width: 640px, aby se to vešlo na A4.
llook
Profil
Tiskový styl bych tedy nedoporučoval zadávat v pixelech. Styl pro tisk by IMHO měl mít vždy gumovou šířku.
Yuhů
Profil
no jistě, díky za doplnění. To ale nejde vždy, obzvlášť, když je původní stránka patlaná na pixely.
paskal
Profil
tak jsem udělal poměrně hodně pokusů a použil vaše rady a narazil jsem na další potíže ... na http://newse.svetjinak.net najdete ukázkovou stránku, kde řeším ono pozicování a vystředění (nyní mi jde především o design, nic jiného nefunguje) ... otesoval jsem to v MSIE 6.0 a funguje to perfektně, v Mozilla Firefox 0.9.3 taky úplně perfektně, tedy vždy dobře i se změnou rozlišení, ale ...

v Mozilla Firebird 0.7 se objevuje oprvadu závažný problém a to ten, že se stránka ořízne a nelze vyrolovat levou část stránek ... použil jsem i min-width, ale vůbec se neprojevuje ... tedy, jak to řešit? ... má to cenu vůbec cenu řešit nebo se na to vykašlat?

jinak zjišťuju, že udělat dobrý css layout stránek je pěkná fuška (aby se to stejně zobrazovalo v běžných browserech a rozlišeních a velikostech okna) ...

další problém je, pokud si v nastavení browsetu změním písmo ... používám jednotky em a docela mi to rozhází design ... tuším ale, jak to řešit ... potřebuju hlavně poradit s tím levým menu a jak ho zviditelnit

v kodu té stránky najdete použité styly, důležité jsou ty id main-center, leve-menu, prave-menu a obsah ...

díky za radu
Fred
Profil
Moc jsem se v tom nerýpal, ale zkuste si připomíná mi to tuhle diskusi na intervalu http://interforum.interval.cz/ShowPost.aspx?PostID=8863 . Používám FB 0.7, protože novější české verze se bohužel hroutí po přidání některých extensions, na které jsem zvyklý a na těch stránkách co odkazujete vidím ten problém jen pokud zmenším stránku pod 800x600 . Použijte řešení co navrhl martinpav , ale změnte 640px na 750px a bude to fungovat
body {
min-width:750px ;
}
paskal
Profil
Fred: udělal jsem to a funguje to ... je ale podivné, že když to min-width dám do #body v stylopisu a pak to použiju jako identifikátor v tagu body (tedy jakýsi nepřímý zápis), tak to nefunguje ... ale co, hlavně že to funguje ... díky


dále jsem to testoval v:
Netscape 7 - stejná chyba
Opera 7 - funguje dobeř

ale navíc v obou těchto prohlížečích to rozhodní design ... nanačte některá pozadí a dělá takové podovné mezery ...

ještě to budu nějakou dobu zkoušet ... ale potom budu uvažovat opět o tabulkovém layoutu, který se zobrazuje naprosto korektně ve všech mnou zmiňovaných prohlížečích ...
Fred
Profil
Proč by jsi se vracel k tabulkám po tak dlouhé cestě, máš to moc pěkný. Teď jsem zkoušel jestli bookmarklety ze slayeroffice fungují v Netscape 7.2 a fungují, což by Ti mělo hodně pomoci dohledat chybky.
Styelsheet tweak:
http://slayeroffice.com/?c=/content/tools/style_tweak.html
Mouseover DOM Inspector :
http://slayeroffice.com/?c=/content/tools/modi.html
V Netscape 7.0 to nefunguje
PS : Prohlížel jsem to v Opeře, Netscapu, Firebirdu,IE6 a všude to vypadá stejně a bez problémů??
Fred
Profil
Aha pardon oni tam už jsou ty tabulky. Tak to ti musím říct, že když jsem přecházel z tabulek na css byl to porod a pořád ještě je, ale nevzdal jsem to, protože bych se cítil jako slaboch.
paskal
Profil
no, já dělám stránky čtyři roky tabulkama (http://svetjinak.net a http://erinel.svetjinak.net) a nyní se zkouším přeorientovat na css pozicování (http://newse.svetjinak.net) ... takže jsem zkombinoval pozicované divy v css s tabulkama v navigaci (zatim nevim, jak to udělat bez tabulek - zdá se mi to zbytečně komplikované) ... teď jsem to odladil pro MSIE, Mozilly, N 7 ... ale ta Opera 7, to je neštěstí ... možná to bude těma tabulkama a vyřešilo by se to tak, že bych nepoužíval tabulky vůbec - to pro mě ale znamená velký psychický blok :-)

určitě se tím budu dál zabývat a zatím v plánu to vzdát, protože vím, že jsem zatim určitě neszkusil všechny možnosti css na řešení oněch chyb

zkusim ty tvoje odkazy a uvidim ... dyk
Fred
Profil
No lehký to není, taky s tím bojuju, zkus ještě mrknout sem http://css-discuss.incutio.com/?page=ThreeColumnLayouts
, je to soupis různých řešení třísloupcových layoutů
paskal
Profil
už jsem konečně pochopil význam relativního a absolutního pozicování - to bylo zatím to nejtěžší ... jinak jsem se rozhodl, že to bude celé v css - celé levé menu je již překódováno do css a zobrazuje se korektně všude

narazil jsem ale asi na chybu v MSIE 6 - pokud nastavím divu pouze height, bere minimálně 10px, menší výšku nebere v úvahu a rozhodí to tím pádem design (já to vyřešil tím, že jsem vložil obrázek vysoký tolik, kolik jsem potřeboval a funguje to všech browserech)

pokud bys byl tak ochotný, zkoukni prosím kód toho levého menu (u konce zdroje) a řekni, zda je to vyřešeno ideálně nebo by to šlo ještě zlepšit? dyk

jinak ten link na seznam pozocovaných layoutů je super - napiš yuhůovi, aby to přidal jako odkaz na jakpsatweb.cz
Yuhů
Profil
paskale, přemýšlíme oba stejně. Ten link se mi ocitnul v pracovní verzi jakpsatweb-u okamžitě poté, co jsem to tady uviděl.
paskal
Profil
snad můžu říct, že jsem už hodně pokročil - všechno (tedy úvodní ukázková stránka) je v css, je to kompeltně validní HTML 4.0 TRANS a validní je i css ... ale je zas ten problém s tím, že v MSIE 6.0 nebere v úvahu výšku divu menší než 10px ... takže když se na ty stránky podíváte přes MSIE, tak se v sekci "Přihlášení" ukazují formulářová pole s velkou mewzerou nahoře ... když to ale zkusím v Mozillách a Nescapu, tak je to v pohodě ... orestujete sami a uvidíte, že je to pravda (snad :o) ... máte na tohle nějakou radu, jak tu mezeru v IE zmenšit? ... dyk
Yuhů
Profil
záporný horní margin, myslím. Ale nevím, zkus.
mat
Profil
Mám pocit, že ten margin snad nemusí být záporný (tedy u formuláře), ale chce to nějakou jeho definici - zkus přidat do stylu něco v tomhle smyslu: form {margin: 2px 1px} a formulář by měl mít ve všech prohlížečích "okraj" nahoře a dole 2px a po stranách 1px. Mě to tak funguje (v MSIE tedy a v offline verzi indexu tvojeho webu).
paskal
Profil
mat: díky, funguje to, ale musí se to udělat přímo u tagu förm (pokud ten form uzavřu do divu a budu to aplikovat na ten div, tak to nefunguje)
mat
Profil
já ale nepsal, abys ten form obaloval ještě nějakým divem...:)
paskal
Profil
jasně, já jen testoval,co a jak funguje ...
Fred
Profil
Pěkně jsi pokročil, gratuluji. Ještě zlus vyhodit ty inline styly ven z kódu do souboru .css bude se ti s tím líp dělat, nebo zatím aspoň do head. Vypadá to v pohodě , je tam drobná chybka zobrazení v FF tohle ji řeší : .leve-menu form{
margin:0;}
lukysy
Profil
Pěkný pokrok!

Btw jsem rád, že nejsem němčínář, protože bych ty všechny linky tady nezbaštil...
bojars
Profil
V tejto súvislosti ma napadá jedna otázočka:
Teraz, keď som niečo skúšal robiť, tak aby obsah bol centrovaný, urobil som to takto:
* {
margin: 0;
padding: 0;
}
.docbody{
padding: 1% 1% % %;
}
.obsah{
width: 97%}

... atď.

však to nie je celkom hovadina.
paskal
Profil
no já to mám v externím .css, ale pomocí fce include ho načítám celej do stránky ... dělám to tak proto, abych mohl zavést volbu skinu, pomocí proměnné dosám název aktuálního stylopisu a ten naickuduju ... ale i tak by to šlo udělat externě, ale z jakéhosi důvodu jsem vložil přímou deklaraci ;-)
Mingan
Profil
Paskal: Kde na tebe nenarazím :-) Jinak nějak si nedovedu moc představit jak mluvíš o té registraci pod logem. Jak to myslíš? V jednom řádku?
« 1 2 »
Toto téma je uzamčeno. Odpověď nelze zaslat.