ei enään niin epätoivonen

iDusty

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

6

701

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • 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

    1. SDP jo 100 % suositumpi kuin persut

      Kertoo Hesarin uusin kannatuskysely. Demareiden kannatus on miltei tuplat verrattuna persuihinl. Suomen kansa ei selväst
      Maailman menoa
      262
      14465
    2. Valtavasti suomalaisia asunnottomina, mutta ei yhtään somalia

      tai muuta kehitysmaalaista. Mites tässä näin kävi? Tiedän hyvin, että esim. somaleita lentää ulos mm. Hekan asunnoista,
      Maailman menoa
      150
      3950
    3. PS ylivoimainen nousija myös HS:n gallupissa, SDP laskee taas

      https://www.verkkouutiset.fi/a/hs-gallup-sdpn-suosio-laskee-ps-nousussa/#0a7d2507 Ylivoimainen viime kuukausien nousija
      Maailman menoa
      129
      3775
    4. Kovia syytöksiä Stefan Thermaninsta.

      Jättänyt taas maksamatta kohuliikemies, hupparit ja muita ostamiaan tavaroita. On soiteltu liikkeestä ja Stefan iskenyt
      Kotimaiset julkkisjuorut
      169
      1659
    5. En minä kyllä enää odota sinua

      Olet siellä sen harmaan kanssa. Niin, annoit minun nähdä lämpimät tunteesi siitä huolimatta. Se merkitsi kyllä paljon. O
      Ikävä
      35
      1609
    6. Totuuspuolueen johtaja Jaana "prinsessa Leia" Kavonius on vangittu

      Kavonius määrättiin jo keväällä 2024 poissaolevana vangittavaksi todennäköisin syin epäiltynä 13 vainoamisesta ja 24 kun
      Maailman menoa
      393
      1607
    7. Jos joku luulee että kaikki käy

      Sanon vain tämän. Minun kanssani ei neuvotella. Minun kanssani eletään tasavertaisesti. Jos se on liikaa, niin ovi rinn
      Ikävä
      49
      1306
    8. Ei ole rohkeutta tulla jututtamaan

      Voidaan me nähdä ja tervehtiä, sitäkin harvoin, mutta iso kynnys on edes mennä lähelle ja kysyä kuulumisia. Ymmärrät var
      Tunteet
      8
      1091
    9. Joka kolmas työtön on työkyvytön

      Viime vuonna työnhakuvelvoitteen ulkopuolella oli noin kolmannes työttömistä työnhakijoista. Huhheijaa, mihin suomalais
      Maailman menoa
      111
      1005
    10. Sakin hivutus - ilmiö

      Miten tuollainen tuollainen ilmiö kuin ”sakin hivutus” syntyy? Mitä syitä ilmiön syntymiseen tarvitaan? Onko sakissa jok
      80 plus
      48
      992
    Aihe