CSS?

Tietokonejutut, pelit ja muu nörtismi; autot, kaasupullot ja muut lelut
killkill

CSS?

Viesti Kirjoittaja killkill »

Mikä tässä tyylimäärittelyssä mättää?

body {
background-color: #006699;
background-image: url(pic/(poistettu).jpg);
background-repeat: repeat-x;
background-position: top;
}


W3C-validaattori herjaa seuraavasti:
* Line : 6 (Level : 1) You have no color with your background-color : body


Ei kai BODY tarvitse Color-selektoria? Eihän se kohdistu mihinkään..
Starflare

Re: CSS?

Viesti Kirjoittaja Starflare »

Minä jo luulin että kyseessä olisi Counter-Strike: Source :wink: .
Avatar
Gattaca
Kitisijä
Viestit: 4424
Liittynyt: 16.08.2005 16:12

Re: CSS?

Viesti Kirjoittaja Gattaca »

killkill kirjoitti:Mikä tässä tyylimäärittelyssä mättää?

body {
background-color: #006699;
background-image: url(pic/(poistettu).jpg);
background-repeat: repeat-x;
background-position: top;
}


W3C-validaattori herjaa seuraavasti:
* Line : 6 (Level : 1) You have no color with your background-color : body


Ei kai BODY tarvitse Color-selektoria? Eihän se kohdistu mihinkään...
Joo kuulostaa ufolta, että BODY tarttisi suoraan color-selektorin. Body-lohkon määritelmiä jo valmiiksi kaikki, hierarkisesti. Ja siinähän on jo background-color. Eikä ole pakko määritellä taustaväriä ollenkaan, jos jostain kummasta syystä ei haluaisi. Onko tuo heksaluku varmasti joku oikea väri? En viiti tarkistaa. Oletko koettanut laittaa värin nimenä, niitäkin on iso valikoima. Vittu kun olen unohtamassa kaiken, niin en muista pitäiskö standardin mukaan laittaa tuo väri lainausmerkkeihin. Ei kai, kun ei muistakaan herjaa.

Ja Line: 6???

Mutta mutta, jos tuo sattumoisin toimii ja useammassa selaimessa. niin miksi suotta kuunnella niuhojen validaattorien kitinöitä?
killkill

Re: CSS?

Viesti Kirjoittaja killkill »

Gattaca kirjoitti:Mutta mutta, jos tuo sattumoisin toimii ja useammassa selaimessa. niin miksi suotta kuunnella niuhojen validaattorien kitinöitä?
No, tuo on tavallaan "ammattiylpeyttäkin". Referenssien pitää olla myös konepellin alta sen näköisiä, että niitä kehtaa näytellä muillekin.
Ei ole kyllä ennen tällaista vastaan tullut. Täytyy käydä kai täikamman kanssa koko css läpi kun tulee ensin valmista.
Hermo meneen näihin nettisivuihin muutenkin. Joku lehden taitto on hermolepoa tähän verrattuna.. kun laittaa jotain paikalleen, se on siinä. Fontit ja niiden koot eivät muutu yms. Joku voi tietty sanoa että "voithan määritellä kirjasinkoot absoluuttisiksi?" No, se taas ei ole kovin asiakasystävällistä..

Mielestäni värimäärityksiä ei panna tyylitiedostoissa lainausmerkkeihin, kuten html:ssä.
Avatar
Gattaca
Kitisijä
Viestit: 4424
Liittynyt: 16.08.2005 16:12

Re: CSS?

Viesti Kirjoittaja Gattaca »

killkill kirjoitti:Mielestäni värimäärityksiä ei panna tyylitiedostoissa lainausmerkkeihin, kuten html:ssä.
Eipä niin. En minä ole käyttänyt enkä muualla nähnyt.

Tuohon ammattiylpeyteen standardien seuraamisessa:
Mun mielestä on välillä pikku pakko rikkoa standardeja ihan yksinkertaisissa perusjutuissakin. Esimerkki:

Pomoni tykästyi värillisten html-mouseoverbuttonien käyttöön framen valikossa. Minullekin kelpasi, nopeempi kuin tehdä jokainen tekstiä sisältävä kuva nappiin ja mouseoveriin erikseen. Lisäksi nappeja vaikka tapahtuman lähestyessä, tulosten tullessa ym. piti vaihtaa usein ja nopeasti.

Napit siis pystysuoraan toistensa päälle. Yksi solu ja vähän seuraavaa näytti vaikkapa tuolta:

<td>
<form>
<center><input type="submit" value=" linkinteksti " onClick="framed_update()" style="color:white;background:blue;cursor:hand;border:3 outset cyan" onMouseover="this.style.background='yellow';this.style.color='black';" onMouseout="this.style.background='blue';this.style.color='white';"></center>
</td>
</tr>
</form>
<tr>
<td>

Värimääritelmät napeille erikseen, koska erivärisiä nappeja käytettiin. Ja laiskana poikana en käyttänyt heksalukuja, jos mielestäni sopiva väri löytyi värin nimelläkin.

Mutta katsos tuota loppua:
</td>
</tr>
</form>

Eli siis </form> -tagi vasta </td> ja </tr> -tagien JÄLKEEN! :D
Validaattorit huutaisivat kauhusta!

Miksi tein niin? No, että napit sai tiiviisti päällekkäin, tarvittiin taulukko. Mutta taulukkokaan ei riittänyt, silti tuli buttonin jälkeen tyhjää.

Tietysti olisin voinut väkisin ährätä numeerisia arvoja buttonin ja solujen (solu vaikee CSSällä, kun siinä oli toinenkin taulukko) samalle korkeudelle, mutta taas se laiskuushyve. En viitsinyt, kun tagien "väärin" lomittain laitto teki sen automaattisesti.
killkill

Re: CSS?

Viesti Kirjoittaja killkill »

Gattaca kirjoitti:Yksi solu ja vähän seuraavaa näytti vaikkapa tuolta:
Juu, toki noinkin. Tosin tyylimäärittelyillä pääsee samaan lopputulokseen, iisimmin jopa..
Avatar
Gattaca
Kitisijä
Viestit: 4424
Liittynyt: 16.08.2005 16:12

Re: CSS?

Viesti Kirjoittaja Gattaca »

killkill kirjoitti:
Gattaca kirjoitti:Yksi solu ja vähän seuraavaa näytti vaikkapa tuolta:
Juu, toki noinkin. Tosin tyylimäärittelyillä pääsee samaan lopputulokseen, iisimmin jopa..
Hitsi, näytä! Tuo solun ja buttonin korkeuden pakotus samaksi siis. Edit: oletusarvoisesti selaimet ilman määrittelyä jättävät tyhjää buttonin alle. AmaRöörihän minä! Oletetaan vielä, että tuolla valikkosivulla on toinenkin taulukko, johon siis sama CSS-määritelmä ei saa ei saa päteä. Puhumattakaan muista sivuista.

Iisihän tuokin oli. Jos valmis pohja niin vaan kopypastea uusiin nappeihin. Mutta siis oli tarpeen laittaa toisenvärinenkin nappi vaikka tuloksiin lopuksi tms.
killkill

Re: CSS?

Viesti Kirjoittaja killkill »

Gattaca kirjoitti:Hitsi, näytä!
Mä tekisin sen näin. Tosin tuo on idioottisimppeli, eikä ole täydellinen - nyt linkki aktivoituu vasta tekstiä klikatessa, eikä koko nappula ole aktiivinen. Luullakseni erittäin simppeli kierrettävä.

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>NAPPULATESTI</TITLE>
<LINK href="koe.css" rel="stylesheet" type="text/css">
</HEAD>

<BODY>
<TABLE width="100" border="0" class="valikko" id="valikko">
<TR>
<TD class="valikko"><A href="http://www.urlyksi.com">YKSI</A></TD>
</TR>
<TR>
<TD class="valikko"><A href="http://www.urlkaksi.com">KAKSI</A></TD>
</TR>
<TR>
<TD class="valikko"><A href="http://urlkolme.com">KOLME</A></TD>
</TR>
<TR>
<TD class="valikko"><A href="http://urlnelja.com">NELJA</A>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

css:

/* valikkolaatikon perustyyli */
td.valikko {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CCCCCC;
background-color: #006666;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCCCCC;
border-right-color: #666666;
border-bottom-color: #000000;
border-left-color: #666666;
}
/* en varma onko tämä tarpeellinen */
.valikko:hover {
background-color: #006699;
}

/* linkkimäärittelyt, näissäkin saattaa olla päällekkäisyyksiä */
a, a:link, a:hover, a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
display: block;
}
a, a:link {
color: #FFFFFF;
}
a:hover {
background-color: #006699;
color: #FFFF00;
}
Avatar
Gattaca
Kitisijä
Viestit: 4424
Liittynyt: 16.08.2005 16:12

Re: CSS?

Viesti Kirjoittaja Gattaca »

killkill kirjoitti:
Gattaca kirjoitti:Hitsi, näytä!
linkki aktivoituu vasta tekstiä klikatessa, eikä koko nappula ole aktiivinen. Luullakseni erittäin simppeli kierrettävä.
Koko solustahan saa linkin esim. levittämällä siihen yhden pikselin läpinäkyvän giffin linkkikuvaksi. Edit: vaan sun esimerkissä sitten ei sellaisen giffin kanssa voisikaan laittaa kooditekstiä... ilman että laittais z-suunnan tasoja.. lopulta menis tavalliseksi kuvanapiksi, jota yritin välttää.

Kokeilin virítystäsi. Siistiä koodia! Tosin ei sen helppotöisempi kuin minunkaan. Toistan, että yleensä ainakin yhden napin piti olla erivärinen, siksi värimäärittelyt niissä erikseen. Ei suuri vaiva kopypasteta joka nappiin erikseen tai paremminkin koko nappikoodi ja yhteen vaihtaa värit.

Sinä siis luovuit tuossa html-buttoneista kokonaan. Niinpä tuossa ei toistaiseksi näy se kolmiulotteisen liikkeen vaikutelma, joka html-buttoneissa on.

Siihen liikevaikutelmaan pyrin, ja html-buttoneissahan se on valmiina ilman omaa työtä koodissa saati kuvien tekoa. Buttoneita myös nopea lisätä ja poistaa.

Varsinainen ongelma siis oli, miten ilman tuota taulukkoni tagien vääräoppisuutta saisi selaimen uskomaan, että EI halua tyhjää tilaa buttonin alle.
Viimeksi muokannut Gattaca, 05.10.2005 1:33. Yhteensä muokattu 2 kertaa.
killkill

Re: CSS?

Viesti Kirjoittaja killkill »

Gattaca kirjoitti:Niinpä tuossa ei toistaiseksi näy se kolmiulotteisen liikkeen vaikutelma, joka html-buttoneissa on
Eiköhän tuo onnistu, kun määrittelee noita border-attribuutteja eri tiloissa.. Jos css kiinnostaa, suosittelen Jukka K Korpelan kirjaa aiheesta (Docendo).
Parast'aikaa luvussa. Toki noilla perinteisilläkin kikoilla saa hyvää jälkeä.
Avatar
Gattaca
Kitisijä
Viestit: 4424
Liittynyt: 16.08.2005 16:12

Re: CSS?

Viesti Kirjoittaja Gattaca »

Joo, lisää pitäis munkin lukea.
Kyllä minä CSSää käytin, mutta harvemmin laitoin erikseen stylesheetin. Sivuille liitin tyylit suoraan. Sama hiirityöhän se, pasteaako sivulle tyylimääritelmät vai pasteaako linkin stylesheettiin. Kevyempi sivu tietty jos kaikki stylesheetissä. Sitähän aasi kai hiljan raportoi Kitystä, kun keskitti tyylit sivuilta pois ja yhteen paikkaan.

Tärkeä EDIT: stylesheetin tarkoitushan toki on, että sivuja muuttaessa ei tarvitse kaikkia räplätä! Ehkä minä en sitten ajatellutkaan niitä kohtia muuttavani! :D Voi seuraajaparkaani sitten! :D
Avatar
Gattaca
Kitisijä
Viestit: 4424
Liittynyt: 16.08.2005 16:12

Re: CSS?

Viesti Kirjoittaja Gattaca »

killkill kirjoitti:
Gattaca kirjoitti:Niinpä tuossa ei toistaiseksi näy se kolmiulotteisen liikkeen vaikutelma, joka html-buttoneissa on
Eiköhän tuo onnistu, kun määrittelee noita border-attribuutteja eri tiloissa..
Ehkä, mutta html:n button-elementissä on se jo valmiina ilman omaa työtä. Varmaan olis pitänyt innostua haasteesta, mutta helpompi kun sain ne valmiit buttonit käyttöön vain pikkasen sotkemalla taulukon tageja.

Tarkoitus siis korvata kuvanappien tekokin tilanteessa, jossa tarvittiin nopeaa nappien lisäämistä/vähentämistä/vaihtamista.

Nyt ei tule mieleen miten sun esimerkissä saisi linkkialueeksi sekä kooditekstin että "nappisi" alueen. Joko/tai sellaisen läpinäkyvän giffinkin kanssa. Hirvee z-tasoviritelmä tai menis tavalliseksi kuvanapiksi, jota siis tuossa vältin.
Avatar
doctrine
Kitisijä
Viestit: 17
Liittynyt: 18.08.2005 20:19

Re: CSS?

Viesti Kirjoittaja doctrine »

Gattaca kirjoitti:Miksi tein niin? No, että napit sai tiiviisti päällekkäin, tarvittiin taulukko. Mutta taulukkokaan ei riittänyt, silti tuli buttonin jälkeen tyhjää.
koitapas seuraavaa:

Koodi: Valitse kaikki

<FORM style="margin:0px;">
. . . I Will Code HTML for Food . . .
Vastaa Viestiin