CSS?

[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]

Minä jo luulin että kyseessä olisi Counter-Strike: Source .

[Gattaca]

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]

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ä.

[Gattaca]

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!
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]

Yksi solu ja vähän seuraavaa näytti vaikkapa tuolta:

Juu, toki noinkin. Tosin tyylimäärittelyillä pääsee samaan lopputulokseen, iisimmin jopa..

[Gattaca]

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]

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;
}

[Gattaca]

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.

[killkill]

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ä.

[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! Voi seuraajaparkaani sitten!

[Gattaca]

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.

[doctrine]

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;">