Bleděmodrý svět

Prosím o radu. U návrhu designu, který je na http://verkadesign.wz.cz/bs/modre.html mi nefunguje hover efekt
a když si stránku prohlížím ve zmenšeném okně, tak se mi menu posouvá dolů. Pozadí u hlavičky a patičky se ve zmenšeném okně nezobrazuje celé.
Hlavička a patička se v různých prohlížeších zobrazují různě široké a přitom mají stejnou šířku 980px. Odkazy v menu jsou v některých prohlížečích podbarvené jen po poslední písmeno odkazu.
Budu moc ráda, když mi poradíte.
Věrka

1.hover: zruš toto:

/*#menu a {
color: #003366;
}*/


a provoď tyto dva řádky takto:

a:link, a:visited, a:active {text-decoration: underline}
a:hover {color: #99ccff;}


2. Menu dole: všechny šířky máš relativní.

#hlavni {
position: absolute;
width: 95%;

#text {
width: 80%;
float: right;
padding: 10px;
}

#menu {
width: 20%;
float: left;
padding: 10px;
}

Tady vyjádřuji jen můj osobní názor. Nastav všem šířkám pevné parametry. Např. hlavní 750 px, text 500 px a menu 150px (pohraj si s tím). Když tam dáš ta procenta, tak se to bude při zmenšování okna chovat podivně.

jen se divím že se tim v dnesni dobe muzes uzivit ttvoje praci neni profesionalni..

DarkNight, co to je "profesionální"?

Co?
Grafika ktera ti proda zbozi bez toho aby ses musela snazit, optimalizace SEO, lepsi ovladani webu, lepsi rozhrani.. atd...

Hmm. to je otázka nabídky a poptávky. Když to někdo nechce, proč mu to cpát?
Taky je to otázka rychlosti a ceny. V neposlední řadě je to o známostech.
A pak třeba takové SEO je, podle mě, jenom šamanské šťěrchátko. Je s tím akorát spousta práce a výsledky nejasné.

Trošku více sebereflexe. Schválně jsem se mrknul na všechny Tebou vytvořené stránky. Žádná invence. Pouze kopírování stejného modelu.

- vstupní stránka = přežitek
- okraje fotek do ztracena
- všude počítadla a zbytečné ikonky validity
- všechny stránky zůstávají v rodině, není mezi nimi ani jedna "zakázková"

* když se člověk zběžně zadívá na hlavičku Posla ze Síria, hned vidí, že fotka psa je posunutá doleva. To by se webdesingerovi stávat nemělo. )

* a:link, a:visited, a:active {text-decoration: underline} - toto psát je zbytečnost, pokud neurčíš jinak přímo u a {}, tak je to implicitně nastaveno.

atd... atd...

=== Věra Oravová === http://verkadesign.wz.cz/bs/modre.html
1. "nefunguje hover efekt"
a { color: black; } znamena, ze prepises vsechny A a nejake A:hover uz na to nema zadny vliv
cili tady bych pouzil nejakou tridu, treba:
.obsah a {}
.menu a {}
.menu a:hover {}
jakpsatweb.cz - CSS - a:hover
jakpsatweb.cz - zdokonaleni odkazu
interval.cz - knihovna - ukazky menu

2. "když si stránku prohlížím ve zmenšeném okně, tak se mi menu posouvá dolů"
Tak ja mam firefox a mi se menu zobrazuje az pod obsahem. Misto CSS float bych zkusil position:relative / absolute / top
jakpsatweb.cz - CSS - position
jakpsatweb.cz - CSS - priklady
jakpsatweb.cz - (2 sloupcovy layout)
interval.cz - knihovna - 2 sloupcovy layout

3. "Pozadí u hlavičky a patičky se ve zmenšeném okně nezobrazuje celé."
Ano, v IE ti to dela. Je to nejaka chyba layoutu. Pravdepodobne mas nekde nastavene width:auto (cili nenastavene) a v pripade pevne sirky je nutne nastavit 100% lepe v pixelech, protoze 100% znamena 100% sirky stranky v nekterych prohlizecich nikoliv 100% aktualniho bloku.

4. "Hlavička a patička se v různých prohlížeších zobrazují různě široké a přitom mají stejnou šířku 980px."
Tvrzeni proti realite:
#hlavni {width: 95%;}
#hlavicka {width: 100%;}
#text {width: 80%;float: right;}
// tak jako float michat s pozicovanim, z toho vznika v IE milion problemu...
#menu {width: 20%;}
// ruzna velikost pisma + ruzna sirka stranky = ruzne siroke menu
.odkazvmenu {width: 140px;}
// tak to je nevyzpytatelne na prohlizece, kdyz mas jednu sirku 20% stranky a druhou 140px
#paticka {width: 100%;}
---
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h4...
// a co treba hromadna definice jako u a, a:hover?
h1, h2, h3, h4 {Verdana, Arial, Helvetica, sans-serif;}
h1{color:...}
---

5. "Odkazy v menu jsou v některých prohlížečích podbarvené jen po poslední písmeno odkazu."
.menu a {display:block; width:100%;}

Jinak:
- CSS dej do vedlejsiho souboru pres LINK v HEAD
- u menu vyuzij to ID v CSS: #menu a {} mesto toho, aby kazde A melo zbytecne tridu (class) navic typu "odkazvmenu" a ty nbsp, to jde resit paddingem a marginem
- paticka nbsp, to si delas legraci? co treba table width=100% cellpadding=0 cellspacing=0 a potom jen td align=left/right
Nebo muzes zkusit float / position.
- OravovaVera@seznam.cz - tady bych pouzil take entitu, jako je nbsp, pro zavinac je to & # 64; jedna se o ztizeni pro viry
- stranka ma velice peknou grafiku, az na to ostre zarive svetlo
- stranka ma velice pekne reseny source-code

=== DarkKNight === http://sparticka.xf.cz
Tva stranka je tak velice profesionalni :)
zkus ji dat do fora na interval.cz grafika.cz a jakpsatweb.cz a uvidime :)
Z meho pohledu je stranka Very lepsi.

=== Zdenek === http://katori.wz.cz
Kopirovani stejneho modelu by nevadilo, ale je tam par veci, ktere bych od profesionalnich stranek necekal. mezi ne patri i chyby, ktere zminujes.

zbi: Díky za rady. Už si s tím doma hraju. :-) Šířky jsmm tam uváděla v procentech, aby se to zmenšovalo.
Prý se to tak má dělat. Tak nevím co s tím. Taky nevím, jakou zvolit velikost obrázků, když mám design v procentech.

DarkKNight: Já se webdesignem neživím. Zatím opravdu dělám weby jenom pro sebe a pro známé. Že na profesionály zatím nemám, je mi jasné.
Proto jsem si taky napsala tady: www.alldesign.cz , jestli k nim můžu docházet na konzultace. Ale napsala jsem jim, že grafiku
se chci učit v PhotoShopu ne ve Flashi. Sama s tím asi nehnu.

Zdenek: Já umím v Photo Shopu jenom používat sem tam nějaký efekt. Kreslit v tom zatím neumím. proto ty stránky jsou na jedno brdo. :-(
Když se podívám na nějaké graficky povedené stránky, tak stejně skončím na tom, že neumím nakreslit něco podobného.
Proto spoléhám na All Design, že mě webdesign pořádně naučí - graficky i technicky.
Vstupní stránky mám ráda, rušit je nechci.
Okraje fotek v designu jsem udělala rozmazané schválně. Je ale pravda, že se to každému líbit nemusí.
Ikonky validity rozhodně zbytečné nejsou. Navíc jsem slyšela, že W3C začíná více prosazovat standardy.
Jo zakázku od firem jsem zatím nedostala. Možná něco přijde, jestli se mi podaří se ve webdesignu zlepšit. :-)

peta: Tolik podrobných rad?! Moc děkuji.

Věrka

=== Věra Oravová === http://verkadesign.wz.cz/bs/modre.html
Tak ja grafiku taky neumim, na me stranky radeji nekoukat.
Jeste mne napadlo, k tomu menu, muzes pouzit & nbsp; (pevnou mezeru), ono se to pak nezalamuje.
Jinak to mas graficky celkem dobry, mozna logo bych posunul nahoru, ve FF tam vznika jakasi mezera. Jsou to jedny z tech hezcich stranek. pomer hezke skarede je asi 1:5, takze asi tak :)

& nbsp patri za predlozky, pokud clovek nechce zalamovat cely text, ma pouzit style="white-space:nowrap;"