...mutta silti tuskanhiet voi tuntea otsan vierustalla. Tässä olisi jälleen sivusto osoitteessa: http://www.blueandwhite.fi/new_look/
Ja aiheena yhteensopivuus. Jos sellaista nyt ylipäänsäkkään on. Erityisesti tuo navigointi linkkien astettelu sivustolla ja niiden yläpuolella oleva pienempi teksti. Mistä johtuu tai millä saan varmennettua niiden sijainnin eri selaimille? Tällähetkellä ne ovat kaikkein optimaalisimpia tosiaan Mozillalle. IE vie ne reilusti liian ylös ja Opera reilusti liian alas. Muutaman pikselin heiton ymmärtäisin. Mutta eihän tälläiseen heittoon voi vain tuuduttautua.
Kiitoksia esimerkeistä, huomioista ja ohjeista jo etukäteen. Erityisesti Höpö. Kiitoksia edellisestä.
ei enään niin epätoivonen
6
658
Vastaukset
Navigointilinkkien sijaintien vaihtelu johtuu ilmeisesti siitä, että eri selaimet antavat eri oletusarvoja p-tagin marginaaleille. Kokeile lisätä CSS-koodiin vaikkapa säännöt
#nav-header p, #nav-primary p
{
margin: 9px 0 0 0;
}
niin näyttää aika hyvältä. Sivupalkin "linkkeihin" (= uutiset, tiedotteet, aikataulut) pätee sama juttu, eli esimerkiksi
#nav-secondary p
{
margin: 15px 0 0 0;
}
korjaa asian.
Tämä ratkaisu on kuitenkin eräänlainen "pikakorjaus", eli saattaa hyvinkin olla olemassa jokin parempikin tapa.- alkuperäinen_
mieletöntä. Ehkä tässä alan itsekki sitten pikkuhiljaa oppimaan tätä CSS:n sielunelämää. Mutta tosiaan. Nyt toimii loistavasti. Erinnomasta. Kiitoksia.
- Höpö
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?
- alkuperäinen_
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?
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.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ää.Po. "on jäänyt koodaamatta muotoon & amp;".
Ketjusta on poistettu 0 sääntöjenvastaista viestiä.
Luetuimmat keskustelut
Suomi on täysin sekaisin
Jo ties monettako päivää hirveä itku ja poru jostain helvetin nilviäisistä. https://www.is.fi/taloussanomat/art-20000104504859Ensimmäisestä kohtaamisesta saakka
minulla on ollut hämmentynyt olo. Miten voit tuntua siltä, että olisin tuntenut sinut aina? Sinun kanssasi on yhtä aikaa151732Aivan täysin tahallinen teko
Ei mitään puolusteluja, eikä selittelyitä. Kuljettajalle kerrottiin asiasta siinä paikanpäällä, mutta silti hän ajoi ves941478Suomussalmi saatu vihdoin maailmankartalle!
Nyt kun Suomussalmi on vihdoin viimein saatu ennennäkemättömällä tavalla maailman tietoisuuteen niin voitaisiin järjestä531359Olet saanut minut sekoamaan
Tunteiden ristiaallokossa vellominen on ollut melkoinen kokemus. Ei kukaan ole saanut minua niin raiteiltaan kuin sinä.231337Mainehaitta metsäkonefirmalle
Hukkajoen tapahtumista liikkuu paljon huhuja. Eikö kannattaisi julkaista raakkuja tuhonneen metsäkoneyrityksen nimi, kos531228Oho! Maajussi-Kallelta pakit saanut morsioehdokas Miss Suomi -kisoissa! Tunnistaisitko hänet nyt?
Hmm, tunnistaisitko?!? Onnea missihulinoihin! Lue lisää ja katso kuvat: https://www.suomi24.fi/viihde/oho-maajussi-01075Myönnän sinulle nyt
Että olen erittäin mustasukkainen sinusta jo nyt. Ikävä on tämä tunne, kun tietämättömyyden solista nousee myrkkyä miele541010Pysytäänkö nainen
edelleen yhtä viileän tyynenä kun nähdään. Uskotko että tahtoessani saisin murettua tyyneytesi hyvin helposti.57895Olen käyttäytynyt ristiriitaisesti
eikä minusta varmaankaan ota mitään selvää. Se johtuu siitä, kun järki sanoo ei, ei, ei ja sydän sanoo kyllä, kyllä, kyl61879