ei enään niin epätoivonen

mieletöntä. Ehkä tässä alan itsekki sitten pikkuhiljaa oppimaan tätä CSS:n sielunelämää. Mutta tosiaan. Nyt toimii loistavasti. Erinnomasta. Kiitoksia.

Koska eri selaimilla on oma käsityksensä siitä millaista tilaa käytetään elementtien ympärillä ja sisällä, niin tarkkaa taittoa tehdessä hyvä tapa on nollata kaikki heti alussa. Css-osan alkuun:
   * {margin:0 ; padding: 0;}

Sen jälkeen määritellään ne tarvittaessa kohdalleen. Kyllä kaikki selaimet sentään ymmärtävät minkä kokoinen on pikseli, ja muutkin mitat:)

Ja kyse on tosiaan ihan selainten omasta käsityksestä. Missään ei ole määritelty MITEN paljon esimerkiksi lohkoelementtien ympärille kuuluu jättää tyhjää. Minkään selaimen tulkinta ei siis ole väärin. Siksi kannattaa poistaa selainten omat tulkinnat ja määrätä kaikki itse.


Vilkaisin taas vaihteeksi koodia...

No kyllä sen meta-tagin noinkin saa sulkea. Ihan oikea tapa se on, mutta toinen tapa on sulkea se samalla tavalla kuin link-elementinkin. Mutta tällä nyt ei ole mitään merkitystä, kunhan sanoin.

Mutta sitten vilkaisin validaattorilla.
kolme päävirhettä:
br -elementeissäsi on kummallista häikkää. Mitä ihmettä olet tällä ajatellut:
   uutisettiedotteetaikataulut

Xhtml:ssä br -tagi kirjoitetaan (tai vaihtoehtoisesti mutta miksi kukaan sitä noin hankalasti kirjottaisi). Johtuukohan tuo moka muuten editoristasi.. jos se vaikka laittaa automaattisesti lopetustagit kun ollaan tekemässä xhtml:ää. Jos näin on niin tarkasta aina mitä se editori huseeraa.

Tyhjää tilaa ei kannata tehdä rivinvaihdoilla. Niihin käytetään aina css:ää.



Kuvasta puuttu alt -attribuutti.

Ja sit se target -määrite linkissä. Olin siis väärässä kun sanoin että turhaan laitat transitionaliksi koodin. Target on sallittu transitional -dtd:n olla muttei strictillä.
MUTTA MIKSI noissa linkeissä ylipäätään ON koko target?
   

Höpö kirjoitti:

Koska eri selaimilla on oma käsityksensä siitä millaista tilaa käytetään elementtien ympärillä ja sisällä, niin tarkkaa taittoa tehdessä hyvä tapa on nollata kaikki heti alussa. Css-osan alkuun:
   * {margin:0 ; padding: 0;}

Sen jälkeen määritellään ne tarvittaessa kohdalleen. Kyllä kaikki selaimet sentään ymmärtävät minkä kokoinen on pikseli, ja muutkin mitat:)

Ja kyse on tosiaan ihan selainten omasta käsityksestä. Missään ei ole määritelty MITEN paljon esimerkiksi lohkoelementtien ympärille kuuluu jättää tyhjää. Minkään selaimen tulkinta ei siis ole väärin. Siksi kannattaa poistaa selainten omat tulkinnat ja määrätä kaikki itse.


Vilkaisin taas vaihteeksi koodia...

No kyllä sen meta-tagin noinkin saa sulkea. Ihan oikea tapa se on, mutta toinen tapa on sulkea se samalla tavalla kuin link-elementinkin. Mutta tällä nyt ei ole mitään merkitystä, kunhan sanoin.

Mutta sitten vilkaisin validaattorilla.
kolme päävirhettä:
br -elementeissäsi on kummallista häikkää. Mitä ihmettä olet tällä ajatellut:
   uutisettiedotteetaikataulut

Xhtml:ssä br -tagi kirjoitetaan (tai vaihtoehtoisesti mutta miksi kukaan sitä noin hankalasti kirjottaisi). Johtuukohan tuo moka muuten editoristasi.. jos se vaikka laittaa automaattisesti lopetustagit kun ollaan tekemässä xhtml:ää. Jos näin on niin tarkasta aina mitä se editori huseeraa.

Tyhjää tilaa ei kannata tehdä rivinvaihdoilla. Niihin käytetään aina css:ää.



Kuvasta puuttu alt -attribuutti.

Ja sit se target -määrite linkissä. Olin siis väärässä kun sanoin että turhaan laitat transitionaliksi koodin. Target on sallittu transitional -dtd:n olla muttei strictillä.
MUTTA MIKSI noissa linkeissä ylipäätään ON koko target?
   

Lue lisää

Kiitoksia taas tosiaan kommenteista. Ja näinhän tämä on että mitä pidemmälle tämä sivu http://www.blueandwhite.fi/new_look/ etenee niin sen enempi tulee kysymyksiä vastaan.

Nyt onneksi ulkoasu on suurinpiirtein kunnossa kaikilla selaimilla katsottuna.

Tuo touhu oli kyllä aivan omaa säätöä kun katoin w3:sen validaattorista että nekin pitäisi sulkea. Mutta poistinpa mokomat tosiaan kokonaan kun eivät strictiin nyt muutenkaan kuulu.

Mutta tosiaan niitä uusia ongelmiakin syntyy. Kuten vasemmassa laidassa oleva vertikaalinen viiva mikä on tosiaan kuvatiedosto (#sidestripe) minkä voisi varmaankin tehdä myös ihan border määrityksillä? Jokatapauksessa ongelma on saada se jatkumaan aivan sivun alalaitaan saakka. Nyt tällähetkellä se niin toimiikin mutta samalla jättää ammottavaa tyhjää muodostaen pitkät vierityspalkit. Eikä sitä tietenkään haluta.

Toinen ongelma on IE:n kanssa (jälleen) saada toimimaan taustakuvan vaihdokset hover toiminnassa. Tai minkä tahansa vaihdoksen hoverissa... erikoista että se ei reagoi millään lailla kun Opera ja Mozilla tosiaan ovat taas kilttiä poikaa. Mutta kaikkea tällästä löytyy tosiaan.

alkuperäinen_ kirjoitti:

Kiitoksia taas tosiaan kommenteista. Ja näinhän tämä on että mitä pidemmälle tämä sivu http://www.blueandwhite.fi/new_look/ etenee niin sen enempi tulee kysymyksiä vastaan.

Nyt onneksi ulkoasu on suurinpiirtein kunnossa kaikilla selaimilla katsottuna.

Tuo touhu oli kyllä aivan omaa säätöä kun katoin w3:sen validaattorista että nekin pitäisi sulkea. Mutta poistinpa mokomat tosiaan kokonaan kun eivät strictiin nyt muutenkaan kuulu.

Mutta tosiaan niitä uusia ongelmiakin syntyy. Kuten vasemmassa laidassa oleva vertikaalinen viiva mikä on tosiaan kuvatiedosto (#sidestripe) minkä voisi varmaankin tehdä myös ihan border määrityksillä? Jokatapauksessa ongelma on saada se jatkumaan aivan sivun alalaitaan saakka. Nyt tällähetkellä se niin toimiikin mutta samalla jättää ammottavaa tyhjää muodostaen pitkät vierityspalkit. Eikä sitä tietenkään haluta.

Toinen ongelma on IE:n kanssa (jälleen) saada toimimaan taustakuvan vaihdokset hover toiminnassa. Tai minkä tahansa vaihdoksen hoverissa... erikoista että se ei reagoi millään lailla kun Opera ja Mozilla tosiaan ovat taas kilttiä poikaa. Mutta kaikkea tällästä löytyy tosiaan.

Lue lisää

Taitaapa olla niin, että Internet Explorer -parka ei ymmärrä hover-pseudoluokkaa muuten kuin linkkien yhteydessä. Senpä takia itse tekisin sivupalkin linkeistä taustakuvan kokoisia ja asettaisin taustakuvan vaihdoksen linkkien hoveriin. Lisäksi muuttaisin koko sivupalkin toteuksen toisenlaiseksi, eli käyttäisin mieluummin listoja hyödyntävää ratkaisua. Alla oleva koodi rakentaa pelkän linkkiluettelon, joten sen upottaminen sivupohjaan jää kotitehtäväksi :)

Niin, ja ihan vain siltä varalta, että et vielä tiennyt, lyhennysmerkintä "padding: 1px 2px 3px 4px;" tarkoittaa samaa kuin

padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;

HTML:
----------


uutiset
tiedotteet
aikataulut
tanssikurssit
bailatino


----------

CSS:
----------
*
{
margin: 0;
padding: 0;
}

#sivupalkki ul
{
/* Poistaa normaalit luettelomerkinnät, esim. pallot, neliöt. */
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 900;
/* Tekstirivin korkeus. Tässä sama kuin font-size. */
line-height: 14px;
/* Viiva viimeisen linkin alapuolelle. */
border-bottom: 1px solid #EEE;
/* Linkkien välisten viivojen leveys. */
width: 137px;
}

#sivupalkki li
{
/* Viiva jokaisen linkin yläpuolelle. */
border-top: 1px solid #EEE;
}

#sivupalkki a
{
/* Tekee linkeistä lohkomuotoisia. */
display: block;
color: #555;
background-color: #FFF;
text-decoration: none;
/* Kuvan navstripes.png koko on 137px * 25px. Seuraavassa width padding-left padding-right = 137px ja line-height padding-top padding-bottom = 25px. */
width: 124px;
padding: 4px 0 7px 13px;
}

#sivupalkki a:hover
{
color: #902C2C;
background: #FFF url(navstripes.png) no-repeat scroll 0 0;
}
----------

Sivulta http://css.maxdesign.com.au/index.htm löytyy paljon esimerkkejä erilaisista listoista ja vähän muustakin.

Mitä tuohon sivusi HTML-koodiin tulee, niin tällä hetkellä näkyy puuttuvan alt-määre kahdesta kuvasta ja lisäksi yksi &-merkki on jäänyt koodaamatta muotoon &. Jos kuvat ovat puhtaasti koristeellisia, niin yleensä kannattaa asettaa alt-tekstiksi alt="". Vain informatiivisille kuville täytyy määrätä vaihtoehtoinen esitystapa.

Erilliseen CSS-tiedostoon ei tarvitse eikä pidäkään laittaa ""-litanioita, pelkkä CSS-koodi riittää.

Whitelighter kirjoitti:

Taitaapa olla niin, että Internet Explorer -parka ei ymmärrä hover-pseudoluokkaa muuten kuin linkkien yhteydessä. Senpä takia itse tekisin sivupalkin linkeistä taustakuvan kokoisia ja asettaisin taustakuvan vaihdoksen linkkien hoveriin. Lisäksi muuttaisin koko sivupalkin toteuksen toisenlaiseksi, eli käyttäisin mieluummin listoja hyödyntävää ratkaisua. Alla oleva koodi rakentaa pelkän linkkiluettelon, joten sen upottaminen sivupohjaan jää kotitehtäväksi :)

Niin, ja ihan vain siltä varalta, että et vielä tiennyt, lyhennysmerkintä "padding: 1px 2px 3px 4px;" tarkoittaa samaa kuin

padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;

HTML:
----------


uutiset
tiedotteet
aikataulut
tanssikurssit
bailatino


----------

CSS:
----------
*
{
margin: 0;
padding: 0;
}

#sivupalkki ul
{
/* Poistaa normaalit luettelomerkinnät, esim. pallot, neliöt. */
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 900;
/* Tekstirivin korkeus. Tässä sama kuin font-size. */
line-height: 14px;
/* Viiva viimeisen linkin alapuolelle. */
border-bottom: 1px solid #EEE;
/* Linkkien välisten viivojen leveys. */
width: 137px;
}

#sivupalkki li
{
/* Viiva jokaisen linkin yläpuolelle. */
border-top: 1px solid #EEE;
}

#sivupalkki a
{
/* Tekee linkeistä lohkomuotoisia. */
display: block;
color: #555;
background-color: #FFF;
text-decoration: none;
/* Kuvan navstripes.png koko on 137px * 25px. Seuraavassa width padding-left padding-right = 137px ja line-height padding-top padding-bottom = 25px. */
width: 124px;
padding: 4px 0 7px 13px;
}

#sivupalkki a:hover
{
color: #902C2C;
background: #FFF url(navstripes.png) no-repeat scroll 0 0;
}
----------

Sivulta http://css.maxdesign.com.au/index.htm löytyy paljon esimerkkejä erilaisista listoista ja vähän muustakin.

Mitä tuohon sivusi HTML-koodiin tulee, niin tällä hetkellä näkyy puuttuvan alt-määre kahdesta kuvasta ja lisäksi yksi &-merkki on jäänyt koodaamatta muotoon &. Jos kuvat ovat puhtaasti koristeellisia, niin yleensä kannattaa asettaa alt-tekstiksi alt="". Vain informatiivisille kuville täytyy määrätä vaihtoehtoinen esitystapa.

Erilliseen CSS-tiedostoon ei tarvitse eikä pidäkään laittaa ""-litanioita, pelkkä CSS-koodi riittää.

Lue lisää

Po. "on jäänyt koodaamatta muotoon & amp;".