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

580

    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. Tänään pyörit ajatuksissa enemmän, kun erehdyin lukemaan palstaa

      En saisi, silti toivon että sinä vielä palaat ja otetaan oikeasti selvää, hioituuko särmät ja sulaudummeko yhteen. Vuod
      Ikävä
      22
      5164
    2. Huomenta ihana

      Kauniskasvoinen ihanuus 😘 saan sut vielä
      Ikävä
      25
      4348
    3. Hei rakas...

      Miten on työpäivä sujunut? Rakastan sinua 💗
      Ikävä
      27
      2461
    4. Edelleen sitä on vaikea uskoa

      Että olisit oikeasti rakastunut muhun
      Ikävä
      34
      2244
    5. Toiveikas vai toivoton

      torstai? Ajatuksia?
      Ikävä
      37
      1998
    6. Vitsi mihin menit. Heti takasin.

      Mä näin sut tuu takasin! Oli kiire, niin en ehtiny sin perään!
      Ikävä
      15
      1918
    7. En ole koskaan kokenut

      Ennen mitään tällaista rakastumista. Tiedän että kaipaan sinua varmaan loppu elämän. Toivottavasti ei tarvitsisi vain ka
      Ikävä
      19
      1587
    8. Mukavaa päivää

      Mun rakkauden kohteelle ❤️ toivottavasti olet onnellinen
      Ikävä
      12
      1521
    9. Voi ei! Jari Sillanpää heitti keikan Helsingissä - Hämmästyttävä hetki lavalla...

      Ex-tangokuningas on parhaillaan konserttikiertueella. Hän esiintyi Savoy teatterissa äitienpäivänä. Sillanpää jakoi kons
      Suomalaiset julkkikset
      21
      1247
    10. Kerranki asiat oikein

      Ilkka ja muut pienpuolueeet...teitte hyvän työn kun valitsitte pätevän henkilön virkaan eikä kepulle passelia!! Jatkakaa
      Haapavesi
      10
      1174
    Aihe