Divejä? apua tarvitsen

neitonen ei osaa

Kuulkaas te taitavammat immeiset tämän CSS jutun kanssa, voisitteko mahdolliseti auttaa pientä :D ?
Leikin tässä ajan kuluksi Photoshop Elements 7:lla ja sain kyhättyä tälläisen simppelin pohjan omalle webbisivulle, mutta kun sitten yritin kyhätä siihen boxeja, niin johan meni nakit ja muusit sekaisin.
Tässä tulos: http://www.freewebs.com/midnightheaven/midnightheavenstables/index.html
tarkoitus olisi siis saada kasaan:
navigation(5 linkin paikka) (eivät olleet oikeassa kohtaa koodauksessa)
alapuolelle päivitys laatikko
iso alue olisi tekstille johon linkit poppaisivat tekstiä
sitten joku sekalainen laatikko ja sen alapuolelle laatikko ulos meneviä linkkejä

yritin itse laittaa niitä eri nimillä, esim #updates ja #links styling osiossa mutta meni kaikki vaan ihan sekaisin ja tuntuu etten oikeen tajua mikä meni pieleen.
Heitti esim content framen ihan muualle kuin mihin sitä yritin asettaa px (käytin PSE7 niitä X, Y etc sijoittamiseen.
Olen yrittäny selata noita erilaisia HTML sivuja läpi avun tarpeessa muttei mitään apua löytynyt vaan erilaista selitystä miten tableja ei kannata käyttää ja miten divejä suositellaan...

Jos siis joku viitsisi auttaa kyhäämään Diveillä tuon ulkoasun niin olisin erittäin kiitollinen!

5

388

Äänestä

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • gfghjk,l..ö--ä'ä
    • melina_mimiedesign

      Hei
      Mä suosittelen että luet seuraavan kirjan: bulletproof web designing 2nd edition. Jos et koko kirjaa jaksa lukaista läpi niin ainaskin 4 ensimmäistä kappaletta :)
      Siinä kirjassa on opettu kaikki mahdollinen css:n käytöstä ja diveistä.
      Ja toinen nettisivu mistä on hyvä aloittaa on http://www.w3schools.com/ :)

      www.mimiedesign.com

    • CSS-mannn

      Kyhäsin tuossa pikaisesti jotain jolla voisit päästä alkuun (jatkuu "bodyn" kohdalta seuraavassa viestissä)
      -----------------------------------








      body {
      background-color: #7D7463;
      font-family: Tahoma;
      color:#ede4db;
      margin: 35px 0;
      }

      p {
      font-family:Tahoma;
      font-size: 12px;
      text-decoration: none;
      padding: 0;
      margin: 0 0 5px 0;
      }

      h1, h2, h3 {
      padding: 0;
      margin: 12px 0 12px 0;
      }

      h1 {
      font-family:Tahoma;
      font-size: 20px;
      text-decoration: none;
      }

      h2 {
      font-family:Tahoma;
      font-size: 16px;
      text-decoration: none;
      }

      h3 {
      font-family:Tahoma;
      font-size: 14px;
      text-decoration: none;
      }

      td {
      font-family:Tahoma;
      font-size: 13px;
      text-decoration: none;
      padding: 6px;
      }


      A:link, A:visited, A:active {
      cursor: default;
      text-decoration: underline;
      font-family: Tahoma;
      font-size: 12px;
      color: #ede4db;
      }

      A:hover {
      cursor: help;
      text-decoration: underline;
      font-family: Tahoma;
      font-size: 12px;
      color:#b5bb7d;
      }


      a.nav,a.nav:link,a.nav:visited {
      cursor: default;
      text-decoration: none;
      font-family: Tahoma;
      font-size: 12px;
      color: #ede4db;
      }

      a.nav:hover {
      cursor: help;
      text-decoration: none;
      font-family: Tahoma;
      font-size: 12px;
      color:#b5bb7d;
      }

      /* DIVIT */

      div#kehys {
      margin: 0 auto;
      width: 990px;
      }

      div#vasenkehys {
      float: left;
      margin: 0;
      width: 182px;
      height: 100%;
      }

      div.sisalto_reunat {
      margin: 0 0 25px 0;
      border: 1px solid #DFB878;
      }

      div.sisalto_reunat p {
      margin: 0 10px 10px 10px;
      }

      div.ruskeapalkki {
      margin: 2px;
      padding: 7px 0 7px 0;
      background: #56311F;
      text-align: center;
      }

      div.ruskeapalkki h3 {
      margin: 0;
      padding: 0;
      }

      div#keskikehys {
      float: left;
      margin: 0 25px 0 25px;
      width: 570px;
      height: 100%;
      border: 1px solid #DFB878;
      }

      div#keskiosantausta {
      float: left;
      margin: 2px;
      background: #9D8169;
      min-height: 600px;
      }

      div#keskiosansisalto {
      float: left;
      margin: 30px;
      }

      div#oikeakehys {
      float: left;
      margin: 0;
      width: 182px;
      height: 100%;
      }

      div#copy {
      float: left;
      margin: 7px 0;
      width: 100%;
      text-align: center;
      }

      div#copy p {
      font-family: Times;
      }

      /* DIVIT PÄÄTTYY */

      • CSS-mannn

        Linkki 1
        Linkki 2
        Linkki 3
        Linkki 4
        Linkki 5


        Otsikko
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor.












        Lorem ipsum dolor

        Nam felis elit

        Quisque tempor

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque.
        Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam.
        Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui.
        Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros,
        mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.


        Quisque tempor

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque.
        Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam.
        Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui.
        Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros,
        mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.












        Otsikko
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor.


        Otsikko
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor.






        © Nam felis elit, sollicitudin id, ultrices faucibus

      • neitonen ei osaa
        CSS-mannn kirjoitti:

        Linkki 1
        Linkki 2
        Linkki 3
        Linkki 4
        Linkki 5


        Otsikko
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor.












        Lorem ipsum dolor

        Nam felis elit

        Quisque tempor

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque.
        Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam.
        Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui.
        Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros,
        mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.


        Quisque tempor

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque.
        Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam.
        Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui.
        Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros,
        mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.












        Otsikko
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor.


        Otsikko
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor.






        © Nam felis elit, sollicitudin id, ultrices faucibus

        Suuret kiitokset!
        Luulin jo ettei kukaan auta :3

    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
      1
      1566

    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
      91
      1468

    3. Lahkokasteen ja kristillisen kasteen erot

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

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

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

    5. Mitä haluaisit

      Tehdä kaivattusi kanssa?
      Ikävä
      123
      822

    6. 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
      2
      777

    7. Kuka omistaa keltaisen vanhan aravan?

      Pitäs saada rakennuksen omistajaan yhteys, rappukäytävät on siivottomassa kunnossa. Hiekkaa ja roskia rappusissa, lisäks
      Haapavesi
      29
      750

    8. Pirkanlinna yleisötapahtuma

      Oli todella hyvä tilaisuus. Ja EERO. L. Aivan mahtava tyyppi. Veti rennosti ja asiallisesti. Ja yleisöltä hyviä kysymyks
      Ähtäri
      42
      741

    9. Känsäkoura ja hotelli

      Tietoa kuka ostanut?
      Kuhmo
      7
      704

    10. Nostetaanko nainen kissa pöydälle?

      Ja selvitetään nämä tunteet?
      Ikävä
      60
      683
    Aihe
    TietosuojaselosteKäyttöehdotEvästeasetuksetSäännöt