Autor | Zpráva | ||
---|---|---|---|
paskal Profil |
#1 · Zasláno: 1. 10. 2004, 19:38:09
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 |
#2 · Zasláno: 1. 10. 2004, 20:15:41
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 |
#3 · Zasláno: 1. 10. 2004, 21:56:46
VT: Uplne jste "zkopiroval" moji beznou odpoved :)
|
||
Vít Dlouhý Profil |
#4 · Zasláno: 2. 10. 2004, 16:06:44
to halogan: Jiná mě nenapadla ;-)
|
||
Yuhů Profil |
#5 · Zasláno: 2. 10. 2004, 20:23:02
IMHO je ještě potřeba tomu #main nastavit šířku
|
||
paskal Profil |
#6 · Zasláno: 3. 10. 2004, 10:29:15
díky
|
||
Vít Dlouhý Profil |
#7 · Zasláno: 3. 10. 2004, 17:03:46
to Yuhů: Pravda.
|
||
Yuhů Profil |
#8 · Zasláno: 4. 10. 2004, 01:13:38
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 |
#9 · Zasláno: 4. 10. 2004, 01:46:32
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 |
#10 · Zasláno: 4. 10. 2004, 01:55:41
no jistě, díky za doplnění. To ale nejde vždy, obzvlášť, když je původní stránka patlaná na pixely.
|
||
Časová prodleva: 6 dní
|
|||
paskal Profil |
#11 · Zasláno: 9. 10. 2004, 22:02:30
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 |
#12 · Zasláno: 9. 10. 2004, 22:27:31
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 |
#13 · Zasláno: 10. 10. 2004, 10:50:08 · Upravil/a: paskal
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 |
#14 · Zasláno: 10. 10. 2004, 11:37:19
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 |
#15 · Zasláno: 10. 10. 2004, 11:41:02
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 |
#16 · Zasláno: 10. 10. 2004, 12:29:43
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 |
#17 · Zasláno: 10. 10. 2004, 12:56:16
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 |
#18 · Zasláno: 11. 10. 2004, 10:54:30 · Upravil/a: paskal
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 |
#19 · Zasláno: 12. 10. 2004, 01:26:17
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.
|
||
Časová prodleva: 5 dní
|
|||
paskal Profil |
#20 · Zasláno: 16. 10. 2004, 20:43:23
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 |
#21 · Zasláno: 17. 10. 2004, 04:23:58
záporný horní margin, myslím. Ale nevím, zkus.
|
||
mat Profil |
#22 · Zasláno: 17. 10. 2004, 13:29:26 · Upravil/a: mat
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).
|
||
Časová prodleva: 10 dní
|
|||
paskal Profil |
#23 · Zasláno: 27. 10. 2004, 21:42:18
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 |
#24 · Zasláno: 28. 10. 2004, 08:14:14
já ale nepsal, abys ten form obaloval ještě nějakým divem...:)
|
||
paskal Profil |
#25 · Zasláno: 28. 10. 2004, 10:18:04
jasně, já jen testoval,co a jak funguje ...
|
||
Fred Profil |
#26 · Zasláno: 28. 10. 2004, 11:05:29
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;} |
||
Časová prodleva: 3 dny
|
|||
lukysy Profil |
#27 · Zasláno: 31. 10. 2004, 19:25:56
Pěkný pokrok!
Btw jsem rád, že nejsem němčínář, protože bych ty všechny linky tady nezbaštil... |
||
bojars Profil |
#28 · Zasláno: 31. 10. 2004, 22:56:59
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 |
#29 · Zasláno: 1. 11. 2004, 15:49:00
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 ;-)
|
||
Časová prodleva: 14 dní
|
|||
Mingan Profil |
#30 · Zasláno: 15. 11. 2004, 19:47:31
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?
|
||
Téma pokračuje na další straně.
|
Toto téma je uzamčeno. Odpověď nelze zaslat.
0