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

623

Äänestä

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

    Takaisin ylös

    Luetuimmat keskustelut

    1. Vesikin maksaa, miksei hengitysilma?

      Jatkuvasti itketään ettei ole rahaa mihinkään, mutta tilastojen mukaan rahaa on enemmän kuin koskaan, joten miksei asial
      Maailman menoa
      21
      1800

    2. Satuolennoista tarinointi ei kuulu peruskoulun tehtäviin

      Opetustunteja on muutenkin käytössä vain rajallinen määrä. Eli nämä satuhommat koulun ulkopuolelle vapaaehtoisiin harras
      Maailman menoa
      156
      1789

    3. Suomalainen perheenisä vaatii Suvivirren esittämisestä hyvityksiä

      Itse lapsena uskonnonopetuksesta vissiin traumoja saanut ihka suomalainen (!) perheenisä vaatii Espoon kaupungilta korva
      Maailman menoa
      347
      1514

    4. Mies profiloin sinut

      Etsit täysin hallittavaa mutta samalla poikkeuksellista ihmistä. Etsit jotain mitä et koskaan tule saamaan.
      Ikävä
      209
      1122

    5. Lahkokasteen ja kristillisen kasteen erot

      Raamatun mukaan Kristillisessä yhdessä kasteessa Jumala pesee ja puhdistaa ihmisen sydämen ja poistaa perisynnin kirouks
      Kaste
      422
      1118

    6. Mitä haluaisit

      Tehdä kaivattusi kanssa?
      Ikävä
      142
      1116

    7. Salainen kastekoulutus

      Millainen on helluntailainen kastekoulutus ja kauanko se kestää ?
      Kaste
      285
      995

    8. Känsäkoura ja hotelli

      Tietoa kuka ostanut?
      Kuhmo
      11
      985

    9. Heikki Paasosen Marita-vaimo jätti tunteikkaat jäähyväiset: "Tällä kertaa me..."

      Heikki Paasonen on naimisissa Marita Paasosen (os. Alatalo) kanssa ja heillä on kaksi pientä lasta. Nyt koitti aika jätt
      Suomalaiset julkkikset
      4
      969

    10. Pirkanlinna yleisötapahtuma

      Oli todella hyvä tilaisuus. Ja EERO. L. Aivan mahtava tyyppi. Veti rennosti ja asiallisesti. Ja yleisöltä hyviä kysymyks
      Ähtäri
      49
      928
    Aihe
    TietosuojaselosteKäyttöehdotEvästeasetuksetSäännöt