Autor Zpráva
jirkpavlikml
Profil
Zdravím,
rozhodl jsem se na mém webu předělat design a celkově ho omladit, nicméně CSS moc neovládám, a tak to po implementovani do CMS začalo blbnout. V IE7 a Opeře je to OK, ale v IE6 a Firefoxu škoda mluvit :(
Jde o stránku http://njuw.mafia-jpas.net/
Chtěl bych se proto zeptat, jak toto v CSS řešit. Jde o ty tři sloupce a logo nad nimi. Ideální by byl nějaký článek který se tímto přímo zabývá, protože už jsem z toho celý zmatený. Co se týká toho stávajícího CSS, tak to není žádná sláva, ale na starším webu to funguje a není důvod to tam měnit. Ale když už dělám ten nový, rád bych, aby to bylo aspoň trochu pořádně.
Předem díky moc za rady a odpovědi :-)
tajny spion
Profil
1) prvni prohlizec, ve kterem web testujes by mel byt FF kvuli tomu, ze ma minimul (pokud vubec nejake) chyb (vykreslovaci jadro Gecko).
2) http://blog.html.it/layoutgala/
Manq
Profil
tajny spion
ze ma minimul (pokud vubec nejake) chyb
To víš odkud?
peteo
Profil
osobne som svoj web optimalitoval pre IE7 - a beží bezporuchovo i na FF a opere. Netreba skúšať výstrednosti a pôjde všade
malek
Profil
dik
Joker
Profil
tajny spion
prvni prohlizec, ve kterem web testujes by mel byt FF kvuli tomu, ze ma minimul (pokud vubec nejake) chyb (vykreslovaci jadro Gecko).
O tom by se dalo docela polemizovat, proč ne třeba Opera, která má minimálně stejně kvalitní jádro? Nebo IE6, který zatím stále používá nejvíc lidí?
(Nechci se o tomhle dohadovat, jen naznačit, že to není tak jednoduché)

Nic, k tématu:
Mně se líbí například Pixyho třísloupcový beztabulkový layout
Kdysi jsem se na něm docela hodně naučil, i když mi chvilku trvalo pochopit, jak to přesně funguje :-)
Viki
Profil *
Joker
Mně se líbí například Pixyho třísloupcový beztabulkový layout
Kdysi jsem se na něm docela hodně naučil, i když mi chvilku trvalo pochopit, jak to přesně funguje :-)


čau, taky jsem přívrženec tohoto layoutu, jenom mi to nedělá dobroru v IE, když je ve středním sloupci obrázek. Ale toto řeším v diskuzi v CSS, Pixyho 3 layout.
Petroff
Profil
Protože Opera Firefox a IE7 se - co se stylů týká - celkem shodnou (v tom důležitém), tak bych z nich vybral ten, který nejlíp znáš a hodí se i ladící prostředky (u mě vyhrál FF2 a jeho Firebug, event. WEB Developer).

IE6 má nejvíc bugů, a to znamená: čekej problémy

to <jirkpavlikml>
IE7 a Opeře je to OK, ale ... Firefoxu škoda mluvit
Tohle většinou znamená, že buď jsi "narazil" na CSS vlastnost nebo prvek/atribut implementovaný jinak (třebas <HR>.
Ale moc se mi tomu nechce věřit. Zrovna na http://njuw.mafia-jpas.net/ je vzhled stejný i ve FF.
TEDY - POTÉ CO JSEM ZHLÉDL SOURCE (http://www.mafia-jpas.net)- JE TO NEDOBRÉ:
- máš tam deklarace stylů mimo část <head></head> !!!!!!
- <body></body> chybí !!!
- tahle hrůza (vnořený odkaz):
<a href="http://www.netagent.cz"><script language="JavaScript" type="text/javascript">
<!--
document.write ('<a href="http://www.netagent.cz" target="_top"><img src="http://www.netagent.cz/agent.php?id=849&ur='+escape(document.refe rrer)+'&rw='+escape(window.screen.width)+'&rh='+escape(window.screen.h eight)+'&cd='+escape(window.screen.colorDepth)+'&pt='+escape(document. title)+'&lc='+escape(document.location)+'" width="1" height="1" border="0" alt="NetAgent" /></a>');
//--></script></a>
- běžně vkládáš blokové prvky ( DIV,H1) do prvků u nichž je přípustný jen řádkový obsah (A,SPAN,H1,P)
- zkřížené tagy:
<center><font size="1">Chcete autorizovaný nick? Pište <a href="mailto:antonin@mafia-jpas.net?=subject=Autorizovaný nick"><u>sem</u></a></center></font>

Prostě tyhle chyby odstraň nejdřív a pak se vrhni na styly :=)

Jinak ohledně http://njuw.mafia-jpas.net:
Pokud chceš, aby navigace (konkrétně pozice odrážek) byla schodná ve všech prohlížečích (v IE ti lezou až na hranu),
nastav vhodnou hodnotu levého paddingu:
.menu UL {MARGIN: 0px; PADDING: 0 0 0 10px}
tajny spion
Profil
Pro všechny
FF ma (velmi) kvalitni vykreslovaci jadro (Gecko) a tudis by se meli stranky optimalizovat pro ni (pocet lidi, kteri ji vlastni, stale stoupa)
Par triku (hacku) pro IE6 respektive 7 pak uz neni problem.
Operu a Safari jsem vynechal, protoze funguji podobne jako FF.

Tohle jsem se docetl v jedne skvele knize o CSS: Mistrovstvi v CSS (Computer Press)
Viki
Profil *
tajny spion

Tohle jsem se docetl v jedne skvele knize o CSS: Mistrovstvi v CSS (Computer Press)

Joo, taky jsem jí měl v ruce a moc se mi zamlouvala. V knihkupectví je k dostání za pěkněj balík, ale už jí mají i v knihovně, ale ještě ji ani pořádně nedali do katalogu a už si jí někdo vypůjčil. Ale pro mé začátky zatím stačí Pixyho Hotová řešení.
Viki
Profil *
a www.jakpsatweb.cz :)
jirkpavlikml
Profil
Petroff: Diky tobei vsem ostatnim za tipy, podivam se na ne :) Co se tyka samotneho aktualniho webu, ten je strasny, to ja vim :)
Petroff
Profil
to <jirkpavlikml>
Jak jsi psal, že v IE6 to nešlape, tak máš pravdu. Zkusil jsem s tím experimentovat, a 3sloupce už se mi zobrazují naprosto stejně jako v ostatních. Jestli chceš, tak ti pošlu HTML+styl.css (buď do fora nebo na email).
Ještě ta hlavička(logo) by si zasloužila pozornost - v některých prohl. se pod myší objeví červený ná(d)pis, v jiných ne. Jak to má být ?
jirkpavlikml
Profil
Ma to byt schovane za tim logem, je to tam kvuli tomu kdyby mel nekdo vyple styly a kvuli vyhledavacum (i kdyz vim ze se jim to asi moc nelibi, ale nevim jak se to da resit jinak - moza to je duvod proc z googlu nikdo nechodi, i kdyz cilova skupina ho asi ani moc nepouziva :)). Muj email je kdyztak jirka.pavlik@gmail.com :)
Petroff
Profil
Podívej se na http://exstream.atlasweb.cz/ ,tam jsem ti to umístil. Ta hlavička je OK i s vypnutými styly.

Kdybys na něco přišel, tak se klidně ozvi. Já si aspoň zkusím v praxi nově nabyté znalosti (začátečníka) v CSS. No a navíc jsem taky fanda dobrých her ;-]
Jinak ten obrázek použij vlastní=originál (já jsem to poslepoval od oka v programu Malování (s Photoshopem se teprve seznamuju).

Napadlo mě, že ještě udělám styl pro zvýrazněnou položku menu - stačil by na to čtvercovej obrázek s malou černou šipkou - nejlíp s průhledným pozadím. HTML by zůstal beze změn.
> Petr <
P.S. Zjistil jsem, že IE6 (na rozdíl od ostatních) vyžaduje aby byl soubor se styly ukládán ve stejném kódování jako HTML dokument (tedy uložit jako UTF-8). Jinak tu stránku zmrší....
jirkpavlikml
Profil
Super, diky moc! :)
Napises mi kdyz tak na moje ICQ - 178294631?
Petroff
Profil
Tak až do dnes jsem byl mimo.
Tak jsem si pořídil tu knížku Mistrovstvi v CSS (Computer Press) a na to jak je rozsáhlá 400str., je dost "ukecaná".
Pro začátečníky výhoda že v první části tutorial o používání css "od nuly" a podrobně. Také řada obecnějších statí (o prohlížečích/podpoře) a naopak specifických (věnuje se stylování dokumentů pro tisk).
Co se týče problémů s IE, uvádí ty základní bugy a jak je řešit, ale nic nevysvětlí ,
na rozdíl od knihy: CSS : filtry, hacky a pokročilé postupy (od Andyho Budda) která je moderní, spousta nápaditých a inspirativních ukázek,prostě SUPER.

Pak jsem ještě přišel na způsob, jak - místo studia - ovládnout styly praxí. Stačí si pořídit jednu z knih,ve kterých jsou jednotlivé ukázky udělány tak,že vás autor krok za krokem provází sestavováním kompletního ostylování nějaké stránky či prvků. Takhle ihned vidíte co ta či ona deklarace udělá, a já jsem přišel na to, že ideální je použít nástroj=Firebug nainstalovaný ve FF. Můžete s ním za chodu měnit/přidávat/ubírat styly, změnu okamžitě uvidíte např. mačkáním kláves(šipky,PgDwn,PgUp) si procházíte možnými hodnotami/názvy , u čísel změny +-1+-10 PROSTĚ PARÁDA.
Sám jsem použil knihy: Wyke-Smith:CSS : využijte kaskádové styly naplno!
a zvláště pak Eric Meyer o CSS - pokračujeme s kaskádovými styly profesionálně! , kde například v 1.části předvádí, jak převést starý web(tabulkový layout) do moderního designu. DOPORUČUJI
jirkpavlikml
Profil
Skoda ze ti nemuzu napsat nejak meail nebo soukromou zpravu, napsal bys m iteda kdyz tak na ICQ 178294631 nebo na email jirka.pavlik@gmail.com? :)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: