CSS ja layout

Kyselijä

Hei,

Olen saanut aikaiseksi tälläisen sivupohjan: http://www.pikku-ukko.net/sample/sample2.html
Virheitä koodista vielä löytyy... Eikä CSS ole täydellistä.

Olen kovasti yrittänyt saada alas sisältölootan alareunan ja selaimen alareunan väliin tyhjää. Olen yrittänyt laittaa margin arvoa bodyyn ja sille taulukolle. Ei vaikuta mitenkään.

Alas pitäisi vielä saada sijoitettua samantyyppinen taulukko jossa on se sivunnimi... Ei vaan ota onnistuakseen.

Voikohan joku ystävällisesti vähän auttaa?
Kiitos:)

8

485

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • -------

      Kokeiles laittaa sille sisältölootalle margin-bottom: 20px;

      tällöin jää 20px väli.

      Ongelma: Sisällön tausta loppuu kesken, näin siis operalla.

      Syy: olet määritellyt elementeille korkeuden ja operat ja muut mitkä noudattavat tarkasti määrityksiä, eivät venytä sitä. Sensisaan IE:llä se näkyy oikein, koska se venyttää korkeuden sisällön mukaan.

      Ratkaisu: Poista korkeusmääre sisältö diviltä

      • -------

        Juu ei toi toimikkaan, koska koodissasi on virheitä ja ihmeellisyyksiä senverran, joten periaatteessa koodi pitäisi uudestaan kirjoittaa, jotta ongelmat ratkeisi, tai voihan sen kiertääkin, mut ei hyvä. Katsoo jos tässä illanmittaan on aikaa, niin voin tehdä toimivan mallin jos haluat?

        Tämä pisti silmään.

        #paa{
        position: absolute;
        left:120px;
        top:140px;
        bottom:15px;

        et voi määrittää, samalla sekä sijaintia ylhäätä ja alhaalta, vain jokotai.


      • Kiitos:)
        ------- kirjoitti:

        Juu ei toi toimikkaan, koska koodissasi on virheitä ja ihmeellisyyksiä senverran, joten periaatteessa koodi pitäisi uudestaan kirjoittaa, jotta ongelmat ratkeisi, tai voihan sen kiertääkin, mut ei hyvä. Katsoo jos tässä illanmittaan on aikaa, niin voin tehdä toimivan mallin jos haluat?

        Tämä pisti silmään.

        #paa{
        position: absolute;
        left:120px;
        top:140px;
        bottom:15px;

        et voi määrittää, samalla sekä sijaintia ylhäätä ja alhaalta, vain jokotai.

        Tuo bottom:15px; näköjään jäi sinne kun testasin sitäkin vaihtoehtoa. Todella ohjeissa olikin että noita ei voi käyttää yhtäaikaa, mutta oli ihan pakko kokeilla...

        Kaikki apu on enemmän kun tervetullutta. Joten jos viitsit ja haluat, niin toimiva malli olisi ihana.


      • Kyselijä
        ------- kirjoitti:

        Juu ei toi toimikkaan, koska koodissasi on virheitä ja ihmeellisyyksiä senverran, joten periaatteessa koodi pitäisi uudestaan kirjoittaa, jotta ongelmat ratkeisi, tai voihan sen kiertääkin, mut ei hyvä. Katsoo jos tässä illanmittaan on aikaa, niin voin tehdä toimivan mallin jos haluat?

        Tämä pisti silmään.

        #paa{
        position: absolute;
        left:120px;
        top:140px;
        bottom:15px;

        et voi määrittää, samalla sekä sijaintia ylhäätä ja alhaalta, vain jokotai.

        Hei,

        Tässä kuva siitä mitä yritän saada tehtyä: http://www.pikku-ukko.net/sample/sample2.jpg


      • -------
        Kyselijä kirjoitti:

        Hei,

        Tässä kuva siitä mitä yritän saada tehtyä: http://www.pikku-ukko.net/sample/sample2.jpg

        Tässä on jonkinmoinen esimerkki, toivottavasti rivitys ei sekoa pahasti, otin joitain värejä sinun ekasta esimerkistä. Korkeus divin voit poistaa, mikäli et halua minimi korkeusrajoitusta, IE:n takia joutui hieman kikkailee, jonka takia korkeus divin tein enkä laittanut määreitä suoraan sis-diviin.

        Äkkiseltään näytti toimivan Opera 7.2/7.5, IE6, Mozilla 1.71, NC 7.1 ja Firefox 0.93

        IE 5.01/5.5 leiska hajoaa pikkasen, elementit eivät ole aivan kiinni toisissaan.

        Opera 6, alasivupalkki on alaspäin.

        Siis lähinnä kosmeettista haittaa.

           

           

           
              sisältö

              
           

           
           

        Ja tyylitiedosto tämän näköinen, poistin siitä fonttien jne.... määreet

           body   {
              background-color: #76A399;
              margin-left: 5%;   /* vasemmalle jäävä tyhjätila */
              margin-bottom:33px; /* alas jäävä tyhjätila */
           }

           #kehys   {
              width:810px; /* sivun leveys */
              position: relative;
           }

           #ban   {
              background: #B2CCC6 url(pu200000.gif) no-repeat;
              border:3px #88AFA6 solid;
              border-bottom: 0;
              height:120px;
              width:710px;
           }

           #vasen {
              width:120px;
              height:200px;
              border-left: 3px #88AFA6 solid;
              border-bottom: 3px #88AFA6 solid;
              background: #B2CCC6;
              float: left;
           }

           #sis {
              background-color: #E9F0EF;
              border: 3px #88AFA6 solid;
              padding: 10px;
              margin-left: 123px; /* (#vasen width border-left) */
           }

           #ala { /* Ala sivu palkki */
              width:50px;
              height:200px;
              background: #B2CCC6;
              position:absolute;
              right:-53px; /* width border */
              bottom:0;
              border: 3px #88AFA6 solid;
              border-left:0;
           }

           #ala2 { /* ala palkki */
              height:50px;
              background: #B2CCC6;
              border-left: 3px #88AFA6 solid;
              border-bottom: 3px #88AFA6 solid;
              margin-left: 160px;
              
           }

           #korkeus { /* Sis-divin minimi korkeus */
              min-height: 200px;
              height: auto !important;
              height: 200px;
           }

        Onkohan tämä edes yhtään sinnepäin minkälaista halusit


      • Kyselijä
        ------- kirjoitti:

        Tässä on jonkinmoinen esimerkki, toivottavasti rivitys ei sekoa pahasti, otin joitain värejä sinun ekasta esimerkistä. Korkeus divin voit poistaa, mikäli et halua minimi korkeusrajoitusta, IE:n takia joutui hieman kikkailee, jonka takia korkeus divin tein enkä laittanut määreitä suoraan sis-diviin.

        Äkkiseltään näytti toimivan Opera 7.2/7.5, IE6, Mozilla 1.71, NC 7.1 ja Firefox 0.93

        IE 5.01/5.5 leiska hajoaa pikkasen, elementit eivät ole aivan kiinni toisissaan.

        Opera 6, alasivupalkki on alaspäin.

        Siis lähinnä kosmeettista haittaa.

           

           

           
              sisältö

              
           

           
           

        Ja tyylitiedosto tämän näköinen, poistin siitä fonttien jne.... määreet

           body   {
              background-color: #76A399;
              margin-left: 5%;   /* vasemmalle jäävä tyhjätila */
              margin-bottom:33px; /* alas jäävä tyhjätila */
           }

           #kehys   {
              width:810px; /* sivun leveys */
              position: relative;
           }

           #ban   {
              background: #B2CCC6 url(pu200000.gif) no-repeat;
              border:3px #88AFA6 solid;
              border-bottom: 0;
              height:120px;
              width:710px;
           }

           #vasen {
              width:120px;
              height:200px;
              border-left: 3px #88AFA6 solid;
              border-bottom: 3px #88AFA6 solid;
              background: #B2CCC6;
              float: left;
           }

           #sis {
              background-color: #E9F0EF;
              border: 3px #88AFA6 solid;
              padding: 10px;
              margin-left: 123px; /* (#vasen width border-left) */
           }

           #ala { /* Ala sivu palkki */
              width:50px;
              height:200px;
              background: #B2CCC6;
              position:absolute;
              right:-53px; /* width border */
              bottom:0;
              border: 3px #88AFA6 solid;
              border-left:0;
           }

           #ala2 { /* ala palkki */
              height:50px;
              background: #B2CCC6;
              border-left: 3px #88AFA6 solid;
              border-bottom: 3px #88AFA6 solid;
              margin-left: 160px;
              
           }

           #korkeus { /* Sis-divin minimi korkeus */
              min-height: 200px;
              height: auto !important;
              height: 200px;
           }

        Onkohan tämä edes yhtään sinnepäin minkälaista halusit

        Kyllä tuo näyttää olevan sinne päin.
        Tuosta on hyvä jatkaa.

        Suuret kiitokset avusta!


      • Kyselijä
        ------- kirjoitti:

        Tässä on jonkinmoinen esimerkki, toivottavasti rivitys ei sekoa pahasti, otin joitain värejä sinun ekasta esimerkistä. Korkeus divin voit poistaa, mikäli et halua minimi korkeusrajoitusta, IE:n takia joutui hieman kikkailee, jonka takia korkeus divin tein enkä laittanut määreitä suoraan sis-diviin.

        Äkkiseltään näytti toimivan Opera 7.2/7.5, IE6, Mozilla 1.71, NC 7.1 ja Firefox 0.93

        IE 5.01/5.5 leiska hajoaa pikkasen, elementit eivät ole aivan kiinni toisissaan.

        Opera 6, alasivupalkki on alaspäin.

        Siis lähinnä kosmeettista haittaa.

           

           

           
              sisältö

              
           

           
           

        Ja tyylitiedosto tämän näköinen, poistin siitä fonttien jne.... määreet

           body   {
              background-color: #76A399;
              margin-left: 5%;   /* vasemmalle jäävä tyhjätila */
              margin-bottom:33px; /* alas jäävä tyhjätila */
           }

           #kehys   {
              width:810px; /* sivun leveys */
              position: relative;
           }

           #ban   {
              background: #B2CCC6 url(pu200000.gif) no-repeat;
              border:3px #88AFA6 solid;
              border-bottom: 0;
              height:120px;
              width:710px;
           }

           #vasen {
              width:120px;
              height:200px;
              border-left: 3px #88AFA6 solid;
              border-bottom: 3px #88AFA6 solid;
              background: #B2CCC6;
              float: left;
           }

           #sis {
              background-color: #E9F0EF;
              border: 3px #88AFA6 solid;
              padding: 10px;
              margin-left: 123px; /* (#vasen width border-left) */
           }

           #ala { /* Ala sivu palkki */
              width:50px;
              height:200px;
              background: #B2CCC6;
              position:absolute;
              right:-53px; /* width border */
              bottom:0;
              border: 3px #88AFA6 solid;
              border-left:0;
           }

           #ala2 { /* ala palkki */
              height:50px;
              background: #B2CCC6;
              border-left: 3px #88AFA6 solid;
              border-bottom: 3px #88AFA6 solid;
              margin-left: 160px;
              
           }

           #korkeus { /* Sis-divin minimi korkeus */
              min-height: 200px;
              height: auto !important;
              height: 200px;
           }

        Onkohan tämä edes yhtään sinnepäin minkälaista halusit

        Hei,

        Halusinkin vaihtaa sen alapalkin paikkaa. Onnistuinkin siinä, ainakin melkein. Nyt se näyttää oikeanlaiselta. Korkeuden suhteen paikka on ok. Mutta sitten se sivusuunnassa oleva paikka... Siihen tuntuu vaikuttavan sen sisältöosan marginaalit. Kuinka saisin sitä siirrettyä sivusuunnassa niin, että se alkaa samasta kohtaa kun se ylempänä oleva saman värinen osa?

        Linkki tässä: http://www.pikku-ukko.net/sample/sample3.html


      • Kyselijä
        Kyselijä kirjoitti:

        Hei,

        Halusinkin vaihtaa sen alapalkin paikkaa. Onnistuinkin siinä, ainakin melkein. Nyt se näyttää oikeanlaiselta. Korkeuden suhteen paikka on ok. Mutta sitten se sivusuunnassa oleva paikka... Siihen tuntuu vaikuttavan sen sisältöosan marginaalit. Kuinka saisin sitä siirrettyä sivusuunnassa niin, että se alkaa samasta kohtaa kun se ylempänä oleva saman värinen osa?

        Linkki tässä: http://www.pikku-ukko.net/sample/sample3.html

        Mutta operan 7.11 heittaa sen float komennolla olevan matalan lootan ihan alas, ei siis ole sen ylemmän päällä niin kuin pitäisi.
        Onko mitään vinkkiä kuinka saan korjattua?


    Ketjusta on poistettu 0 sääntöjenvastaista viestiä.

    Luetuimmat keskustelut

    1. Putin hoiti Suomen natoon ja myös Ruotsin

      Iso kiitos Vladimir Putinille. Hänen ansiosta pääsemme nyt Natoon. Putin halusi Naton lähelle ja nyt sai. Voimme tästä kiittää vain Putinia.
      Maailman menoa
      643
      7907
    2. Niinistö teki hetkessä Suomesta Venäjän ydinaseiden maalitaulun

      Kaiken lisäksi mies vielä lällätteli Putinille eilisessä tiedotustilaisuudessa ja käski katsomaan itseään peiliin. Kyllä vähän asiallisempaa käytöstä
      Maailman menoa
      451
      2190
    3. Voi Stefu ja sun kiivas luonteesi

      Sielä lentelee ullakkohuoneiston ikkunasta daamin vaatteet ja matkalaukut pitkin pihaa. Toisaalta,en ihmettele yhtään että tämä suhde päättyi näin,kyl
      Kotimaiset julkkisjuorut
      228
      2092
    4. Poliisi otti Stefun kiinni!

      Seiska tietää kertoa.
      Kotimaiset julkkisjuorut
      143
      1668
    5. Veikkaus: Miten The Rasmus pärjää Euroviisuissa?

      Euroviisuhuuma on ylimmillään, kun Suomi ja The Rasmus taistelee biisillään Jezebel. Bändi on tikissä, kunhan Lauri Ylösen ääni kantaa. Mitä veikka
      Viihde ja kulttuuri
      51
      1224
    6. Ohhoh! Martina Aitolehti ja seurapiirihurmuri-Jesper ekassa yhteiskuvassa - Sutinaa Mallorcalla!

      Martina Aitolehti ja seurapiirijulkkis-Jesper nauttivat toisistaan varsin vauhdikkaissa merkeissä Mallorcalla. Aitolehti ei ole esitellyt rakastaan vi
      Kotimaiset julkkisjuorut
      25
      1205
    7. Stefanilta tuli taas karu totuus Sofiasta

      Marokkolainen h*o*ra! Voi tsiisus kun mulla on hauskaa! Lumput lentää ikkunasta kun Stefu raivoaa h*uralleen🤣🤣🤣 Nyt ne popparit tulille, tästä tule
      Kotimaiset julkkisjuorut
      98
      1075
    8. Ootko onnellinen kun ei tarvitse

      nähdä tätä tyhmää naamaa enää koskaan? Multa se särkee sydämen, mutta minkäs teen. Vaikka olisi kuinka sinnikäs eikä hellittäisi, se ei aina auta.
      Ikävä
      65
      829
    9. Steppuli veressä

      Seiskan lööpissä Steppulilla naama ja nyrkit veressä. Ei tainnut ihan kamojen pihalle paiskominen riittää. Onkohan pistänyt kämpän tuusannuuskaks.
      Kotimaiset julkkisjuorut
      54
      724
    10. Oletko nähnyt eroottiset kohuleffat? Fifty Shades Of Grey -trilogia tv:stä

      Fifty Shades -trilogia starttaa, kun nuori opiskelijanainen Anastasia tapaa rikkaan liikemiehen. Seksisuhdehan siitä starttaa, höystettynä sadistisill
      Suhteet
      6
      715
    Aihe