Autor Zpráva
spaisee
Profil
Pánové,

rozhodl jsem se firmě, ve které pracuji, dát trošku dohromady web, protože ta věc o jedné stránce, co fungovala pouze v IE a měla 18000 řádků 'kódu' se mi nelíbila. Už jsem se skoro dostal ke kýženému výsledku, ale pořád mám pár nejasností.

Jedná se o www.janicek.org.

- jak zajistit, aby se ve všech prohlížečích zobrazovalo zaoblení u patek stejně, tj. v konstantní vzdálenosti od patky (Chrome, Firefox - ano; Opera, IE - ne)
- jak si pojistit, aby ta flash hovadina v záhlaví nemusela být velikostně definována jak v CSS, tak v samotné HTML a to ještě dost kostrbatě?
- v CSS je k vidění spousta provizorií, aby se mi celkově nerozjel layout; ať jsem se snažil, jak jsem se snažil, tak prostě každý prohlížeč chápe margin a padding jinak - nebo je jinak chápu já? Našli byste nějaké obecné doporučení, radu, třeba kde dělám chybu?
- web je CSS validní http://goo.gl/AZtcF, ta upozornění samozřejmě ještě doladím, ale co ty chyby v HTML validitě http://goo.gl/hSc1b?
- udělal bych to dynamicky, ale šéfovi se nechce utrácet

Díky za případnou pomoc. :)

Edit 10:28: Ještě, abyste nemuseli lovit, odkaz na CSS
Medvídek
Profil
spaisee:
Ohledně různých marginů a paddingů, zkus se kouknout sem: http://www.jakpsatweb.cz/css/mody-prohlizecu.html
panther
Profil
spaisee:
jak zajistit, aby se ve všech prohlížečích zobrazovalo zaoblení u patek stejně
nejlépe dát #main dolní 10px padding, a kulaté rohy dát na pozadí tohoto boxu (obrázek bude mít rozměry 700x10px a budou na něm jen ty červené růžky, bílou získá z barvy pozadí tohoto boxu).

jak si pojistit, aby ta flash hovadina v záhlaví nemusela být velikostně definována jak v CSS, tak v samotné HTML a to ještě dost kostrbatě?
v CSS máš akorát rozměry toho bloku. Na tom není nic špatného. Ještě tam přidej obrázek, cože na tom flashi vlastně je pro ty, kteří mají flash blokovaný. Teď tam vidím červený obdélník, který jen blokuje místo. Uvidím aspoň obrázek bez animace.

Zároveň, e-mail a telefon zkus udělat tak, aby se dal kliknout (mail) nebo zkopírovat.

ale co ty chyby v HTML validitě
na validitě nezáleží, validátor můžeš klidně ignorovat. Tíží-li tě i přes to, zkus český validátor.
spaisee
Profil
panther:
- Díky, spodek se pokusím opravit pouze rožky. Původní plán byl, že by venkovní části rožků (ty červené) měly být průhledné kvůli pozadí, které nemělo být plnou barvou. Teď je to vlastně jedno.

- Obrázek do pozadí doplním - původně tam byl, ale jak jsem šachoval s velikostí toho flashe, tak jsem ho sundal. Teď přemýšlím, jestli tam není taky proto, aby při prvotním přehrátí flashe skočil červený screen a ne ten obrázek, protože to probliknutí podkladového obrázku se mi nelíbilo.

- telefon a mail zkusím opravit, ale bylo to vlastně poprvé, co jsem čuchl k flashi. Budu se s tím muset ještě trošku naučit, trošku na to kápnout. Ale díky za radu.. :)

- validátor mě tíží jen kvůli rýpalům.

Díky za rady, něco v tomhle smyslu jsem potřeboval. Je to moje první jakás takás prezentace, tak se cítím ještě značně nesvůj.. :)
panther
Profil
spaisee:
Je to moje první jakás takás prezentace, tak se cítím ještě značně nesvůj
ještě jsem ti chtěl něco doporučit, zapomněl jsem na to.

- logo udělej klikací - navrát na úvodní stránku
- udělej hover v menu a nějak zvýrazni aktivní položku v menu
- udělej položky v menu klikatelné po celé výši a šíři, nejen v oblasti textu

Ke kódu se záměrně vyjadřovat nechci, byť spousta věcí s ním souvisí - např. menu dělané sadou divů namísto použití <menu>. Doporučenou četbou budiž ti web o sémantice.
spaisee
Profil
panther:
- Logo klikací udělám (konečně jsem totiž vyřešil automatický rámeček kolem obrázkového odkazu).
- Hover (pravděpodobně inverzní gradient) taky bude, jen jsem měl vždy problém s IE, ale třeba na to kápnu.
- Smím se zeptat jak? :) Jakože udělat z celého divu odkaz? Tam jsem taky trochu u IE tápal.

Všechno si píšu a hodlám si to odškrtat... :) Jinak menu jsem zkoušel, ale nikdy jsem se s ním pořádně nedomluvil. Ale třeba jsem za tu dobu načerpal nějaké další zkušenosti. Taky zkusím. A díky za odkazy.. :)
panther
Profil
spaisee:
Jakože udělat z celého divu odkaz?
přidej odkazu display: block, padding a výšku stejnou jako výšku řádku, aby byl text vertikálně centrován.

Padding z divu samozřejmě odeber. Správně by to neměl být div, ale menu, které má nějaké položky. Jestli chceš studovat, HTML menu by mělo vypadat nějak takto. Navíc koukám, že u každé položky (u tebe divu) máš třídu, která je zbytečná (zbytečná je vždy, pokud ji potřebuješ mít u všech daných elementů, nebo u všech vyjma prvního/posledního). Zaměřuj kontextově, tedy #menu div, pokud menu předěláš tak, jak by mělo být, pak položka bude zaměřena jako menu li, atd.
spaisee
Profil
panther:
- logo je klikací
- obrázek do záhlaví doplněný
- položky v menu jsou klikatelné v celé výši a šíři

Akorát hover položky se v IE a Chrome zobrazuje jinak - oba si jinak vykládají padding - Chrome mi vykreslí hoverované pozadí 20px za div, ve kterém se položka nachází a IE ho vykreslí o 2 - 3px odshora méně. Proč?
Trejpa
Profil
spaisee:
IE ho vykreslí o 2 - 3px odshora méně. Proč?
Běžná Mezera pod obrázkem.

<embed … style=vertical-align:middle>

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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