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

628

Äänestä

    Vastaukset 5

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

    Takaisin ylös

    Luetuimmat keskustelut

    1. Miksi vanhusraiskaajaa ei ole palautettu?

      Ukkola kysyy Rantaselta, vaikka perussuomalaiset ovat olleet hallituksessa kolme ja puolivuotta. Rantasen vastaus on "
      Maailman menoa
      320
      1388

    2. Suomi meni ihan itse sössimään peruskoulunsa

      Nyt syytellään maahanmuuttoa, vaikka ihan itse lopetettiin vaatimaan oppilailta koulunkäynnin tarkoitus eli opiskelu ja
      Maailman menoa
      330
      1316

    3. Mitä kirjainta kaipaat?

      🤣🤣🤣🤣🤣
      Ikävä
      106
      1102

    4. Tuli paha mieli miten kaikki meni meillä

      Harmittaa myönnän sen, kun molemmilla oli selvästi toiveita ennen kuin sukset meni ristiin. Olen jäässä. 😔
      Ikävä
      50
      998

    5. Onko ikäerolla väliä?

      Mitä mieltä ootte? Meillä on 14 vuotta ikäeroa.
      Ikävä
      105
      981

    6. Mitä sä teet

      Juuri nyt?
      Ikävä
      106
      930

    7. Uusioperhe vai salasuhde?

      Mitä ensisijaisesti haluat? Pelkään, että menetän järjen sun kanssa 😉
      Ikävä
      111
      792

    8. Katri Helena rikkoi hiljaisuuden dramaattisella uutisella: "Elossa ja ilossa ollaan"

      Katri Helena on sinivalkoinen ääni. Hänen klassikkohittinsä ovat tärkeä osa suomalaista kansanperintöä. Katri veti jääh
      Suomalaiset julkkikset
      22
      787

    9. Miten vaikuttaa

      Jos kaivatustasi on moni muukin kiinnostunut?
      Ikävä
      70
      633

    10. Anni Ihamäki ja Ilkka-rakas vetivät tiukan rajan TTK:ssa: "Kyllä spekuloitiin"

      Anni Ihamäki on naimissa Ilkka Ihamäen kanssa. Aviopuoliso tunnetaan myös nimellä Hovimuusikko Ilkka. Heillä on kaksi yh
      Suomalaiset julkkikset
      5
      627
    Aihe
    TietosuojaselosteKäyttöehdotEvästeasetuksetSäännöt