MOi!
XHTML validaattori herjaa id:stä
lainaus:
Error Line 21 column 175: ID "linkki_valikko" already defined.
...page=blogi">blogi</a></li><li><a id="linkki_valikko" href="index.php?page=uut
An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).
Eli id:tä ei voi määritellä kahteen kertaan?
Mites ton nyt ratkasee kun mulla hakee css:n tolla id:llä tai siis classilla joo mut onko muuta keinoa?
Muuta ID classiksi.
Kolmas konsti on tietenkin se, että käyttää ongelmallisissa sivun kohdissa suoraan tyylin määrittelyä style-argumentissa.
Pekka Mansikka kirjoitti:
Kolmas konsti on tietenkin se, että käyttää ongelmallisissa sivun kohdissa suoraan tyylin määrittelyä style-argumentissa.
...mikä tietysti on se huonoin tapa.
>Sebu
Tollasessa tapauksessa nuo <a>:t ei välttämättä edes tartte tollasta classia, ku ne voi määritellä CSS:ssä seuraavasti: (olettaen, että sun linkkilistan ul:llä on id #navigaatio)
ul#navigaatio li a {
/* tähän säädöt */
}Tämä siis tarkoittaa "#navigaation alla olevan li:n alla olevat a:t"
Paras tapa on tietty käyttää selektoreita oikeaoppisesti, kuten Cornix demonstroi, mutta kiinnostaisi tietää miksi et halunnut käyttää classia id:n sijasta?
lainaus:
...kiinnostaisi tietää miksi et halunnut käyttää classia id:n sijasta?
Ihan vaan kun oon tehnyt koko sivuston noilla id:illä, mutta joo muuttelin kuiteskin classiksi noi kaikki useampaan kertaan tulevat.
Kiitos vastauksista kaikille.
lainaus:
# Error Line 861 column 10: there is no attribute "onFocus".
onFocus="clearText(this); this.style.background='#F9F9F9'" onBlur="this.style.
✉
# Error Line 861 column 68: there is no attribute "onBlur"....s.style.background='#F9F9F9'" onBlur="this.style.background='#EEEEEE'" cols="
Enään neljä virhettä validista :)
Eli onBlur ja onFocus... miksi herjaa noista ja onko noista jotain validia versiota?
XHTML:ssä kaikki attribuutit kirjoitetaan kokonaan pienillä kirjaimilla.
Tuon taustavärin vaihtumisen voi kyllä toteuttaa CSS:llä käyttäen :focusta. Ja se on kannattavampaakin tehdä niin, vaikkei se nyt tietysti IE:ssä toimi. Siksitoisekseen JavaScriptin änkeminen suoraan sisällön ja rakenteen sekaan ei ole kovin siistiä pidemmän päälle: voit harkita IE:tä varten sitä, että teet scriptin joka alkaa toimia vasta sivun latautuessa ja lisää sitten jälkikäteen tuen taustavärin vaihtoa varten, esim:
<!-- tyylit, input.focus on IE:tä varten -->
<style type="text/css">
input.text { background-color : #EEEEEE; }
input.text:focus,input.focus { background-color : #F9F9F9; }
</style>
<!-- tämä lisää IE:tä varten JavaScriptin, joka lisää halutun classin tai poistaa sen -->
<!--[if IE]><script type="text/javascript">
window.onload = function() {
var inputs = document.body.getElementsByTagName('input');
for(var i = inputs.length - 1; i >= 0; i--) {
if(inputs[i].className == 'text') {
inputs[i].onFocus = function() { this.className = 'text focus'; };
inputs[i].onBlur = function() { this.className = 'text'; };
}
}
};</script><![endif]-->
</head>
<body>
...
<input class="text" type="text" value="Testikenttä" />HTML pysyy siistinä, tyyli on CSS:stä näppärästi keskitetysti kontrolloitavissa ja JavaScriptin ei pitäisi olla tajunnanräjäyttävän vaikea tajuta :) Mutta en ota vastuuta toimimattomuudesta, en näet testannut tätä koodinpätkää, kunhan kirjoitin vaan.
Esimerkkiä voi lähteä laajentamaan niin, että tuo clearTextin kutsu lisätään kaikille selaimille; valitettavasti tuo suora eventin asettaminen (esim. elementti.onFocus) tuohon tyyliin taitaa toimia vain yhden kerran / elementti, joten pitäisi joko hankkia jostain addEvent-skripti useamman lisäämiseksi näppärästi tai sitten vaan pitäisi kikkailla IE:lle JavaScript-pohjaisella ehdollisella kommentilla eri säädöt kuin muille selaimille (jos ei tahdo kirjoittaa esim. looppia kahdesti).
Puuh, että osaakin joskus asiat olla selitettynä monimutkaisen kuuloisia...
Kiitos Merri vastauksestasi! En tiennytkään että ton voi hoitaa css:llä
Aihe on jo aika vanha, joten et voi enää vastata siihen.