Linkkien keskitys ym.

Kummaa

Olen juuri opettelemassa CSS:ää. Tässä on osote, missä voitte tarkastella mun ongelmaa:

http://www.elottomat.org/sivupolut/testi
http://www.elottomat.org/sivupolut/testi.css

Eli:

-Tuo otsikko menee liian alas, jolloin yläpuolelle jää liikaa tyhjää tilaa. Haluaisin sen ylemmäksi. Miten se käy?
-Linkit ei oo keskellä. Miten saisin ne keskelle?
-Yhteystiedot menee tuon laatikon yläreunaan. Tahtoisin ne laatikon keskelle.
-Onko tässä rakennelmassa muuten jotain perustavanlaatuisesti vialla ja olenko käsittänyt jotakin ihan väärin?

Kiitos avusta. CSS vaikuttaa yllättävän helpolta opetella, mutta välillä näyttää tulevan ihan ihme ongelmia.

5

616

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • hiukna vilkaisin ja

      mieleen jäi ainakin

      -Tuo otsikko menee liian alas, jolloin yläpuolelle jää liikaa tyhjää tilaa. Haluaisin sen ylemmäksi.

      Sinähän olet (itse?) sen CSS:ssä määritellyt
      absoluuttisesti juuri tuohon.

      -Linkit ei oo keskellä. Miten saisin ne keskelle?
      -Yhteystiedot menee tuon laatikon yläreunaan. Tahtoisin ne laatikon keskelle.

      No laatikko on 19 px korkea ja teksti 10,
      ei taida systeemi pystyä tekemään puolikkaita
      pikseleitä

    • ChainX

      Tee DIVeille pääsäiliö. Helpottaa esim. keskitystä.
      Käytä position: absoluten sijaan float: left tai right;. Lukitsee DIV:n edellisen säiliön vasempaan tai oikeaan reunaan.
      Älä käytä tai käytä mahdollisimman vähän padding määrettä.

      Alla olevaa koodia soveltamalla pitäisi mm. keskittäminen onnistua ja samalla saat ehkä vähän vinkkiä myös float:n kätevyydestä.



      Tämä teksti on keskellä sivua tai edellistä DIV:ä 500x50px kokoisessa laatikossa.



      laatikko1
      laatikko2
      laatikko3
      laatikko4
      laatikko5

      • Kummaa

        Äh. Olen just vasta opetellut kirjoittamaan css:ää Dream Weawerilla erilliseen css-tiedostoon. Tossa sun esimerkissä noi menee suoraan siihen html- koodin sekaan?

        Voitko kertoilla siis, missä muodossa noi laitetaan sinne css-tiedostoon? Kun voisin opetella yhden asian kerrallaan...


      • ---------
        Kummaa kirjoitti:

        Äh. Olen just vasta opetellut kirjoittamaan css:ää Dream Weawerilla erilliseen css-tiedostoon. Tossa sun esimerkissä noi menee suoraan siihen html- koodin sekaan?

        Voitko kertoilla siis, missä muodossa noi laitetaan sinne css-tiedostoon? Kun voisin opetella yhden asian kerrallaan...

        Nopeesti mitä sinun koodiasi vilkasin, niin siellä on turhia määreitä (siis laitat palstamääreet tyhjälle) Tuommosia ei sit kannata käyttää.

        CSS ei kannata kirjoittaa noin html sekaan muuta kuin esimerkeissä.

        laatikko5

        Tuo menee ihan näin

        laatikko5

        Ja sitten tyyleihin näin.

        #laatikko5 {
        float: left;
        width: 100%;
        height: 400px;
        text-align: left;
        background-color: violet;
        }

        Tuon voi tehdä myös class määreillä kuten sinä olet tehnyt. Tosin selvyyden takia kannattaisi käyttää id määreitä päädiveissä.


      • Kummaa
        --------- kirjoitti:

        Nopeesti mitä sinun koodiasi vilkasin, niin siellä on turhia määreitä (siis laitat palstamääreet tyhjälle) Tuommosia ei sit kannata käyttää.

        CSS ei kannata kirjoittaa noin html sekaan muuta kuin esimerkeissä.

        laatikko5

        Tuo menee ihan näin

        laatikko5

        Ja sitten tyyleihin näin.

        #laatikko5 {
        float: left;
        width: 100%;
        height: 400px;
        text-align: left;
        background-color: violet;
        }

        Tuon voi tehdä myös class määreillä kuten sinä olet tehnyt. Tosin selvyyden takia kannattaisi käyttää id määreitä päädiveissä.

        Joo, pitää kokeilla, että mitenkäs toi onnaa...


    Ketjusta on poistettu 0 sääntöjenvastaista viestiä.

    Luetuimmat keskustelut

    1. Riikka Purran kaudella nousi bensan hinta yli 2 euron

      Muistatteko kuinka edellisen vasemmistohallituksen aikana, ns. Marinin aikakaudella, bensiiniä sai 1,3 euron litrahinnal
      Maailman menoa
      126
      4783
    2. Veli Sofia teki urosmehiläisen työn

      Paljastaessaan kuinka TPS:ssä ei joukkuehenki toimi sooloilijoiden vuoksi, jonka takia koko seura ei pärjää kilpailussa
      Maailman menoa
      5
      3422
    3. Mitäs nyt sijoittajat?

      Pörssit laskevat maailmalla Iranin sodan takia ja muutenkin ovat olleet Trumpin vallan alla epävarmat. Ainoa, mikä on no
      Maailman menoa
      128
      3220
    4. Hjallis Harkimon, 72, Jasmine-rakas, 37, paljastaa suhteen alusta: "Vähän..."

      Liikemies, kansanedustaja Hjallis Harkimo ja tuottaja-juontaja Jasmine Pajari ovat pariskunta. He asuvat yhdessä Sipooss
      Suomalaiset julkkikset
      27
      2649
    5. Unisex-vessat

      Ahdistaa. Miksi kaikki pitää tasapäistää tasa-arvon nimissä? Tasa-arvo on sitä, että kunnioitetaan sukupuolien erilaisu
      Tunteet
      79
      2394
    6. Jutta Larm, 52, haluaa kumota tämän piintyneen ikämyytin

      Oletko samaa mieltä? Jutta Larm on 52-vuotias ja tehnyt pitkän uran yrittäjänä. Hän haluaa kumota tämän piintyneen ikämy
      50 plus
      18
      1779
    7. Henri Alen tilittää yllättäen Vappu Pimiän uudesta MasterChef -pestistä: "Vaikka hän ei..."

      Vappu Pimiä on uusi MasterChef Suomi -tuomari. Hän liittyi uudella MasterChef Suomi -kaudella arvovaltaiseen tuomaristoo
      Suomalaiset julkkikset
      9
      1404
    8. Vastuun ottaminen omasta hyvinvoinnista

      Olen huomannut tuttavapiirissäni ihmisiä, joilla on mt-diagnooseja. Sen sijaan, että millekään asialle yritettäisiin teh
      117
      1265
    9. Minkä kouluarvosanan 4-10 annat Beck-leffoille?

      Vähiin käy ennen kuin loppuu... Beck-elokuvia on tullut tv:stä jopa 2-3 viikossa. Nyt leffojen esitystiheys on muuttunut
      Elokuva
      9
      1243
    10. Jäit kiinni siitä

      että katselet minua. Käänsin pääni, minäkin etsin sinua, ja meidän katseemme kohtasivat. Eikä se haittaa - molemmat ky
      Ikävä
      4
      1158
    Aihe