Autor Zpráva
Manes
Profil *
#1 · Zasláno: 7. 3. 2008, 13:58:04
Odpovědět Citovat
Dal som validovatoje css, a dost ma zarazilo co mi vypisalo

Chyba: 9 Value Error : top only 0 can be a length. You must put an unit after your number : -100


Moje css: 
.style1 { 
color : #d12421;
} 
.style2 { 
color : #596975;
} 
.style3 { 
color : #ffffff;
} 
tridehead .style4 { 
color : #ffffff;
} 
.style5 { 
color : #77a100;
} 
.style6 { 
color : #679801;
} 
body { 
padding : 0;
margin : 0;
background-color : #171820;
background-image : url(images/pgbg.jpg);
background-repeat : repeat-x;
background-position : top ;
font-family : Tahoma, Arial, Helvetica, sans-serif;
font-size : 11px;
} 
p { 
padding : 0;
margin : 0;
} 
.toplinks { 
font-size : 11px;
font-weight : bold;
color : #ffffff;
text-decoration : none;
font-weight : bold;
padding-left : 8px;
padding-right : 8px;
} 
.toplinks:hover { 
color : #fe4849;
} 
.topmenubar { 
background-image : url(images/topmenubar.jpg);
background-repeat : no-repeat;
} 
.stred { 
background-image : url(images/festivaloffer.jpg);
background-repeat : no-repeat;
} 
.stred2 { 
background-image : url(images/fesival2.jpg);
background-repeat : no-repeat;
} 
.welcome { 
font-size : 11px;
color : #000000;
font-weight : bold;
padding-left : 85px;
padding-top : 195px;
background-image : url(images/main_header.jpg);
background-repeat : no-repeat;
} 
.onashead { 
font-size : 11px;
color : #000000;
font-weight : bold;
padding-left : 85px;
padding-top : 195px;
background-image : url(images/onas.jpg);
background-repeat : no-repeat;
} 
.tridehead { 
font-size : 11px;
color : #000000;
font-weight : bold;
padding-left : 85px;
padding-top : 195px;
background-image : url(images/tride.jpg);
background-repeat : no-repeat;
} 
.tlachead { 
font-size : 11px;
color : #000000;
font-weight : bold;
padding-left : 85px;
padding-top : 195px;
background-image : url(images/tlac.jpg);
background-repeat : no-repeat;
} 
.karhead { 
font-size : 11px;
color : #000000;
font-weight : bold;
padding-left : 85px;
padding-top : 195px;
background-image : url(images/kariera.jpg);
background-repeat : no-repeat;
} 
.kontakthead { 
font-size : 11px;
color : #000000;
font-weight : bold;
padding-left : 85px;
padding-top : 195px;
background-image : url(images/kontakty.jpg);
background-repeat : no-repeat;
} 
ul { 
padding : 0 8px;
margin : 0;
} 
li { 
background : url(images/arrows.gif) no-repeat 0 3px;
list-style-type : none;
padding : 0 0 0 10px;
margin : 0;
font-size : 11px;
font-weight : normal;
line-height : 13px;
} 
li a { 
font-size : 11px;
text-decoration : none;
font-weight : bold;
color : #1b242a;
} 
li a:hover { 
color : #1b242a;
text-decoration : underline;
} 
.more { 
font-size : 11px;
color : #ffffff;
font-weight : bold;
text-decoration : underline;
} 
.more:hover { 
color : #ffffff;
text-decoration : none;
} 
.black { 
font-size : 11px;
font-weight : bold;
color : #000000;
} 
.price { 
font-size : 16px;
color : #ce3903;
font-weight : bold;
} 
.news { 
font-size : 21px;
color : #ffffff;
padding-left : 10px;
} 
.news2 { 
font-size : 21px;
color : #000000;
padding-left : 10px;
} 
.menus { 
font-size : 12px;
color : #c7ccd0;
font-weight : bold;
padding : 8px;
background-image : url(images/menu_bg.gif);
background-repeat : repeat-y;
} 
.nohy { 
background-image : url(images/dottedlines.gif);
background-repeat : no-repeat;
background-position:top;
} 
.viacinfo { 
background-image : url(images/moreinfo.gif);
background-repeat : repeat-y;
} 
.menus2 { 
font-size : 11px;
color : #ffffff;
font-weight : bold;
padding : 8px;
} 
.menuheader { 
font-size : 16px;
color : #ffffff;
background-image : url(images/top.gif);
background-repeat : no-repeat;
} 
.kontaktuj { 
background-image : url(images/menu_bg.gif);
background-repeat : repeat-y;
} 
.moreinfo { 
font-size : 11px;
color : #ffffff;
font-weight : bold;
padding-right : 16px;
text-decoration : none;
} 
.moreinfo:hover { 
color : #ffff00;
} 
.footerlink { 
font-size : 11px;
color : #ffffff;
text-decoration : none;
font-weight : bold;
padding-left : 5px;
padding-right : 5px;
} 
.footerlink:hover { 
text-decoration : underline;
} 

.copyright { 
font-size : 11px;
color : #94b400;
text-decoration : none;
}



Veľmi pekne dakujem za pomoc :)
Chamurappi
Profil
#2 · Zasláno: 7. 3. 2008, 14:09:25
Odpovědět Citovat
Reaguji na Manesa:
To, co jsi sem vložil, ale není ten tvůj kód, že ne? Tipuji to na kód, který ti ukázal validátor po odfiltrování chybných částí.
Uvedená chybová hláška říká, že máš u nějakého rozměru hodnotu „-100“ bez jednotek. Doplň „px“. Jestli nepoužíváš quirk mód, tak ti samotné „-100“ stejně nefunguje.
Plaváček
Profil
#3 · Zasláno: 7. 3. 2008, 14:11:15 · Upravil/a: Plaváček
Odpovědět Citovat
Manes

Toto 
background-position : top
máš špatně. Pro background-position je nutno zadávat dvě hodnoty. První je horizontální pozice, druhá vertikální. Takže správný zápis zní takto: 

background-position : left top

nebo 

background-position : 0 0

nebo nezadávat vůbec, neboť 
left top
jest výchozí hodnotou.

Anebo si ušetřit prst a zkusit definici zkrátit: 
background: #171820 url("images/pgbg.jpg") repeat-x;


Tipuji.
Manes
Profil *
#4 · Zasláno: 7. 3. 2008, 14:19:19
Odpovědět Citovat
Opravil som to, ale stale hadze:
Value Error : top only 0 can be a length. You must put an unit after your number : -100

Tu je zdrojak css z textoveho harku: 
.style1 { 
color : #d12421;
} 
.style2 { 
color : #596975;
} 
.style3 { 
color : #ffffff;
} 
tridehead .style4 { 
color : #ffffff;
} 
.style5 { 
color : #77a100;
} 
.style6 { 
color : #679801;
} 
body { 
padding : 0;
margin : 0;
background-position : left top ;
font-family : Tahoma, Arial, Helvetica, sans-serif;
font-size : 11px;
} 
p { 
padding : 0;
margin : 0;
} 
.toplinks { 
font-size : 11px;
font-weight : bold;
color : #ffffff;
text-decoration : none;
font-weight : bold;
padding-left : 8px;
padding-right : 8px;
} 
.toplinks:hover { 
color : #fe4849;
} 
.topmenubar { 
background-image : url(images/topmenubar.jpg);
background-repeat : no-repeat;
} 
.stred { 
background-image : url(images/festivaloffer.jpg);
background-repeat : no-repeat;
} 
.stred2 { 
background-image : url(images/fesival2.jpg);
background-repeat : no-repeat;
} 
.welcome { 
font-size : 11px;
color : #000000;
font-weight : bold;
padding-left : 85px;
padding-top : 195px;
background-image : url(images/main_header.jpg);
background-repeat : no-repeat;
} 
.onashead { 
font-size : 11px;
color : #000000;
font-weight : bold;
padding-left : 85px;
padding-top : 195px;
background-image : url(images/onas.jpg);
background-repeat : no-repeat;
} 
.tridehead { 
font-size : 11px;
color : #000000;
font-weight : bold;
padding-left : 85px;
padding-top : 195px;
background-image : url(images/tride.jpg);
background-repeat : no-repeat;
} 
.tlachead { 
font-size : 11px;
color : #000000;
font-weight : bold;
padding-left : 85px;
padding-top : 195px;
background-image : url(images/tlac.jpg);
background-repeat : no-repeat;
} 
.karhead { 
font-size : 11px;
color : #000000;
font-weight : bold;
padding-left : 85px;
padding-top : 195px;
background-image : url(images/kariera.jpg);
background-repeat : no-repeat;
} 
.kontakthead { 
font-size : 11px;
color : #000000;
font-weight : bold;
padding-left : 85px;
padding-top : 195px;
background-image : url(images/kontakty.jpg);
background-repeat : no-repeat;
} 
ul { 
padding : 0 8px;
margin : 0;
} 
li { 
background : url(images/arrows.gif) no-repeat 0 3px;
list-style-type : none;
padding : 0 0 0 10px;
margin : 0;
font-size : 11px;
font-weight : normal;
line-height : 13px;
} 
li a { 
font-size : 11px;
text-decoration : none;
font-weight : bold;
color : #1b242a;
} 
li a:hover { 
color : #1b242a;
text-decoration : underline;
} 
.more { 
font-size : 11px;
color : #ffffff;
font-weight : bold;
text-decoration : underline;
} 
.more:hover { 
color : #ffffff;
text-decoration : none;
} 
.black { 
font-size : 11px;
font-weight : bold;
color : #000000;
} 
.price { 
font-size : 16px;
color : #ce3903;
font-weight : bold;
} 
.news { 
font-size : 21px;
color : #ffffff;
padding-left : 10px;
} 
.news2 { 
font-size : 21px;
color : #000000;
padding-left : 10px;
} 
.menus { 
font-size : 12px;
color : #c7ccd0;
font-weight : bold;
padding : 8px;
background-image : url(images/menu_bg.gif);
background-repeat : repeat-y;
} 
.nohy { 
background-image : url(images/dottedlines.gif);
background-repeat : no-repeat;
background-position : left top ;
} 
.viacinfo { 
background-image : url(images/moreinfo.gif);
background-repeat : repeat-y;
} 
.menus2 { 
font-size : 11px;
color : #ffffff;
font-weight : bold;
padding : 8px;
} 
.menuheader { 
font-size : 16px;
color : #ffffff;
background-image : url(images/top.gif);
background-repeat : no-repeat;
} 
.kontaktuj { 
background-image : url(images/menu_bg.gif);
background-repeat : repeat-y;
} 
.moreinfo { 
font-size : 11px;
color : #ffffff;
font-weight : bold;
padding-right : 16px;
text-decoration : none;
} 
.moreinfo:hover { 
color : #ffff00;
} 
.footerlink { 
font-size : 11px;
color : #ffffff;
text-decoration : none;
font-weight : bold;
padding-left : 5px;
padding-right : 5px;
} 
.footerlink:hover { 
text-decoration : underline;
} 

.copyright { 
font-size : 11px;
color : #94b400;
text-decoration : none;
}


Diky :)
oogi
Profil
#5 · Zasláno: 7. 3. 2008, 14:54:57
Odpovědět Citovat
Nevím, jestli ti pomůžu, ale zkus doplnit jednotky u nul - tedy místo 0 dej 0px, to je asi jediná věc, která by tam mohla zlobit.
Plaváček
Profil
#6 · Zasláno: 7. 3. 2008, 15:04:27
Odpovědět Citovat
oogi

Nesmysl

Manes

Budeš muset ukázat celý kód, takhle je to hádání z kávové sedliny.
Bubák
Profil
#7 · Zasláno: 7. 3. 2008, 15:11:01
Odpovědět Citovat
Přečti si znova, co ti napsal Chamurappi dnes ve 14:09:25.
Nepoužíváš více stylovách předpisů?

Podle první chybové hlášky je chyba na řádku 9 a týká se CSS vlastnosti top, máš tam asi tohle:
top: -100;
Doplň jednodku, pravděpodobně tam chceš mít:
top: -100px;
Miloš
Profil
#8 · Zasláno: 7. 3. 2008, 20:50:19
Odpovědět Citovat
Plaváček
Toto
background-position : top
máš špatně. Pro background-position je nutno zadávat dvě hodnoty. První je horizontální pozice, druhá vertikální. Takže správný zápis zní takto:
background-position : left top

Opravdu? Já měl vždycky za to, že nezadám-li jednu hodnotu, druhá bude automaticky center.
Jednak viz http://kesolim.sweb.cz/TMP/bimg/
druhak viz Pixyho první kniha o CSS, strana 133/134:
top, top center a center top – totéž jako 50% 0%
left, left center a center left – totéž jako 0% 50%
center a center center – totéž jako 50% 50%
right, right center a center right – totéž jako 100% 50%
bottom, bottom center a center bottom – totéž jako 50% 100%
mantisa
Profil
#9 · Zasláno: 7. 3. 2008, 21:12:00 · Upravil/a: mantisa
Odpovědět Citovat
Pro background-position je nutno zadávat dvě hodnoty

Není nutno.

EDIT: Nevšiml jsem si Milošova příspěvku.

Manes

Jak již bylo řečeno několikrát... kód který jsi zaslal je validní
Měsíček
Profil
#10 · Zasláno: 7. 3. 2008, 21:18:43
Odpovědět Citovat
kód který jsi zaslal je validní

Není. Stačí se podívat na validátor.
Měsíček
Profil
#11 · Zasláno: 7. 3. 2008, 21:27:41
Odpovědět Citovat
Pro background-position je nutno zadávat dvě hodnoty

Nemyslel tím Plaváček spíše to, že by se mělo zadávat dvě hodnoty pokud jsou číselné? A slovní můžou být i jednotné (viz. odkaz od Miloše).

Protože pokud se zadá

.class {background-position: 40%;}

vydedukuje se z toho tohle:

.class {background-position: 40% 0%;}

Ale celkově se může říci, že může být hodnota jedna a můžou být i dvě.

Value: [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
Miloš
Profil
#12 · Zasláno: 7. 3. 2008, 21:31:18
Odpovědět Citovat
Měsíček
Nemyslel tím Plaváček spíše to, že by se mělo zadávat dvě hodnoty pokud jsou číselné?
Taky bych neřekl – viz zmíněná kniha na straně 134:
„Pouze jediná procentní či číselná hodnota určuje pozici obrázku pouze ve vodorovném směru, pro svislý směr se v tom případě použije 50%.“
mantisa
Profil
#13 · Zasláno: 7. 3. 2008, 21:31:47
Odpovědět Citovat
Asi se shodneme ale na tom, že zadávat obě hodnoty je "slušnost"

Měsíček

mně to ukázalo jako validní
Měsíček
Profil
#14 · Zasláno: 7. 3. 2008, 21:34:12
Odpovědět Citovat
mně to ukázalo jako validní

Ten druhý kód co poslal (prej opravený) tak ten mi ukazuje validátor jigsaw jako nevalidní .. :o)
Miloš
Profil
#15 · Zasláno: 7. 3. 2008, 21:45:23
Odpovědět Citovat
mantisa
Asi se shodneme ale na tom, že zadávat obě hodnoty je "slušnost"
Myslím že ne, protože stejně jako píšu třeba margin 10px, místo abych jak mlmoň vypisoval všechny čtyři strany, stejně tak mi připadá košér zapsat jen jednu souřednici obrázku na pozadí, je-li druhá součadnice center.
Dero
Profil
#16 · Zasláno: 7. 3. 2008, 21:47:40
Odpovědět Citovat
Asi se shodneme ale na tom, že zadávat obě hodnoty je "slušnost"

Rozhodně není dobrý argument. Pokud znám implicitní hodnoty css vlastností a vím, že jsou v prohlížečích bezchybně podporovány, oč slušnější je vypsat obě? Možná praktičtější - pokud na kódu pracuje více lidí, ale to je všechno.
mantisa
Profil
#17 · Zasláno: 7. 3. 2008, 22:53:11
Odpovědět Citovat
Dero

Myslel jsem to ve smyslu "čitelnosti". Pokud by pak po mně měl někdo ten kód třeba doplnit, určo by mu bylo milejší, kdybych tam nechal obě hodnoty. Takhle nemusí(m) "tolik" přemýšlet. :-)
Plaváček
Profil
#18 · Zasláno: 8. 3. 2008, 06:53:05
Odpovědět Citovat
Miloš

Ano, máš pravdu, specifikace skutečně povoluje jenom jednu hodnotu a se zbytkem se má poprat prohlížeč.

Maně si jenom vzpomínám, že dnes již zesnulý Netscape měl právě s background-position podivné potíže a od té doby se spoléhám na úplný zápis, kterým se nic zkazit nedá.

Omlouvám se přítomným za neúmyslnou mystifikaci.
Chamurappi
Profil
#19 · Zasláno: 8. 3. 2008, 16:39:38
Odpovědět Citovat
Reaguji na Plaváčka:
„dnes již zesnulý Netscape měl právě s background-position podivné potíže“
Neznal tuto vlastnost vůbec, bavíme-li se o verzi 4.
Plaváček
Profil
#20 · Zasláno: 8. 3. 2008, 17:30:40
Odpovědět Citovat
Chamurappi

Ne, byla to nějaká z šestkových verzí, ale to už je historie a navíc jsme dost mimo téma.
Časová prodleva: 16 let

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:

0