CSS ja layout

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:)
8512
Äänestä

Muut lukivat myös

Vastaukset 8

Vanhimmat

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ä

Äänestä
  • 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.

    Äänestä

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

    Äänestä

  • ------- 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

    Äänestä

  • 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

    Äänestä

  • ------- 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!

    Äänestä

  • ------- 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

    Äänestä

  • 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?

    Äänestä

Kommentoi aloitusta


Kyselijä kirjoitti:

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:)

Anonyymi
5000

Ilmoita asiaton sisältö

  • Sisältää materiaalia, joka on loukkaavaa, herjaavaa, rasistista, uhkailevaa tai ahdistelevaa.

  • Materiaali sisältää nimiä, yhteystietoja tai muita henkilökohtaisia tietoja. Julkisuuden henkilöistä, julkisissa viroissa toimivista ihmisistä sekä yritysten vastuuhenkilöistä saa keskustella työhön liittyen. Myös yksityiselämään liittyvistä asioista voi keskustella siltä osin, kuin niistä on julkisesti kerrottu.

  • Sisältää lapsille haitallista tai heiltä kiellettyä materiaalia. Seksuaalinen sisältö on sallittua aiheeseen tarkoitetuilla palstoilla, joiden ikäraja on 18 vuotta.

  • Lainvastaista sisältöä voi olla mm. yksityiselämää loukkaavan tiedon levitys, kiihottaminen kansanryhmää vastaan, laiton uhkaaminen, alaikäisiin liittyvä seksuaalinen sisältö/grooming, petokset, identiteettivarkaudet, kunnianloukkaukset ja tekijänoikeusrikkomukset.

  • Sisältö ei liity palstan tai keskusteluketjun aiheeseen.

  • Viesti ei ole suomea tai ruotsia (pl. International Forums), se sisältää mainontaa, se sisältää tekijänoikeuksin suojattua materiaalia, se on massapostitus tai jokin muu syy.

Jaa keskustelu