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

574

    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. Ja taas ammuttu kokkolassa

      Kokkolaisilta pitäisi kerätä pois kaikki ampumaset, keittiöveitset ja kaikki mikä vähänkään paukku ja on terävä.
      Kokkola
      35
      4309
    2. Kuinka kauan

      Olet ollut kaivattuusi ihastunut/rakastunut? Tajusitko tunteesi heti, vai syventyivätkö ne hitaasti?
      Ikävä
      115
      1599
    3. Milli-helenalla ongelmia

      Suomen virkavallan kanssa. Eipä ole ihme kun on etsintäkuullutettu jenkkilässäkin. Vähiin käy oleskelupaikat virottarell
      Kotimaiset julkkisjuorut
      248
      1556
    4. Helena Koivu on äiti

      Mitä hyötyä on Mikko Koivulla kohdella LASTENSA äitiä huonosti . Vie lapset tutuista ympyröistä pois . Lasten kodista.
      Kotimaiset julkkisjuorut
      219
      1414
    5. Mitä siellä ABC on tapahtunut

      Tavallista isompi operaatio näkyy olevan kyseessä.
      Alajärvi
      37
      1317
    6. Ja taas kerran hallinto-oikeus että pieleen meni

      Hallinto-oikeus kumosi kunnanhallituksen päätöksen vuokratalojen pääomituksesta. https://sysmad10.oncloudos.com/cgi/DREQ
      Sysmä
      88
      1088
    7. Löydänköhän koskaan

      Sunlaista herkkää tunteellista joka jumaloi mua. Tuskin. Siksi harmittaa että asiat meni näin 🥲
      Ikävä
      132
      1072
    8. Kun näen sinut

      tulen iloiseksi. Tuskin uskallan katsoa sinua, herätät minussa niin paljon tunteita. En tunne sinua hyvin, mutta jotain
      Ikävä
      48
      1062
    9. Purra saksii taas. Hän on mielipuuhassaan.

      Nyt hän leikkaa hyvinvointialueiltamme kymmeniä miljoonia. Sotea romutetaan tylysti. Terveydenhoitoamme kurjistetaan. ht
      Maailman menoa
      267
      1041
    10. Yhdelle miehelle

      Mä kaipaan sua niin paljon. Miksi sä oot tommonen pösilö?
      Ikävä
      63
      1000
    Aihe