Hieman apua!

Luultavasti yrittää tehdä laatikkoa, joka venyy sisällön mukaan.

Mutta siis. Leikitään, että kuvasi ovat; yla.gif, keski.gif ja ala.gif. leikitään myös, että ylä- ja alaosa ovat leveydeltään 100px ja korkeudeltaan 20px.Keskiosa on leveydeltään 100px ja korkeudeltaan 1px (turha tehdä korkeampaa kuvaa).





Jos yläosan ja keskiosan väliin tulee tyhjää, niin veikkaisin syynä olevan p-elementti. Tämä sikäli mikäli kokeilit firefoxilla (ie:llä luultavasti ei tule). Korjaantuu laittamalla esimerkiksi yksi div-elementti sen p-elementin ympärille.

Mikälivika ei ole p-elementissä, niin sitten olet määrittänyt esimerkiksi korkeudet väärin.

Jos et saa toimimaan, niin laita sivu nettiin ja anna osoite, niin katsotaan. Vaikea neuvoa tarkemmin, kun pitää sokkona arvailla.

foxytin kirjoitti:

Luultavasti yrittää tehdä laatikkoa, joka venyy sisällön mukaan.

Mutta siis. Leikitään, että kuvasi ovat; yla.gif, keski.gif ja ala.gif. leikitään myös, että ylä- ja alaosa ovat leveydeltään 100px ja korkeudeltaan 20px.Keskiosa on leveydeltään 100px ja korkeudeltaan 1px (turha tehdä korkeampaa kuvaa).





Jos yläosan ja keskiosan väliin tulee tyhjää, niin veikkaisin syynä olevan p-elementti. Tämä sikäli mikäli kokeilit firefoxilla (ie:llä luultavasti ei tule). Korjaantuu laittamalla esimerkiksi yksi div-elementti sen p-elementin ympärille.

Mikälivika ei ole p-elementissä, niin sitten olet määrittänyt esimerkiksi korkeudet väärin.

Jos et saa toimimaan, niin laita sivu nettiin ja anna osoite, niin katsotaan. Vaikea neuvoa tarkemmin, kun pitää sokkona arvailla.

Lue lisää

Mä oon tehnyt kuvankäsittely ohjelmalla taustakuvan jonka haluan jatkuvan kun tekstiä tulee lisää. Olen jakanut taustakuvan kolmeen osaan ylä, keski ja ala.
Nyt ei näy kuin yläosa ja tässä tulee koodia:

CSS:

body {
   background-color:#A0A4A4;
   font-family:'Trebuchet MS',Arial,Verdana,Tahoma,Sans-Serif;
   font-size:75%;
   color:#420F00;
   margin:0px 0px 20px;
   padding:20pt;
   text-align:center;
   
}



#runko {
   margin:0pt auto;
   text-align:left;
   width:780px;
   height:600px;
}

#yla   {
   background: transparent url(images/ylaosa.jpg) no-repeat scroll left top;
   height:120px;
   margin:0pt;
   padding:0pt;

#keski {
   background: transparent url(images/keskiosa.jpg) repeat-y scroll;
   height:400px;
   width:780px;
   
}

#ala   {
   background: transparent url(images/alaosa.jpg) no-repeat scroll left top;
   height:80px;
   
}

HTML:



   

      Yhteen
      
      
      

      
      
      







Yläosa






Keskiosa






Alaosa

Romantikko4 kirjoitti:

Mä oon tehnyt kuvankäsittely ohjelmalla taustakuvan jonka haluan jatkuvan kun tekstiä tulee lisää. Olen jakanut taustakuvan kolmeen osaan ylä, keski ja ala.
Nyt ei näy kuin yläosa ja tässä tulee koodia:

CSS:

body {
   background-color:#A0A4A4;
   font-family:'Trebuchet MS',Arial,Verdana,Tahoma,Sans-Serif;
   font-size:75%;
   color:#420F00;
   margin:0px 0px 20px;
   padding:20pt;
   text-align:center;
   
}



#runko {
   margin:0pt auto;
   text-align:left;
   width:780px;
   height:600px;
}

#yla   {
   background: transparent url(images/ylaosa.jpg) no-repeat scroll left top;
   height:120px;
   margin:0pt;
   padding:0pt;

#keski {
   background: transparent url(images/keskiosa.jpg) repeat-y scroll;
   height:400px;
   width:780px;
   
}

#ala   {
   background: transparent url(images/alaosa.jpg) no-repeat scroll left top;
   height:80px;
   
}

HTML:



   

      Yhteen
      
      
      

      
      
      







Yläosa






Keskiosa






Alaosa

Lue lisää

"vika" on yksinkertaisesti siinä, ettet ole määrittänyt ylä- ja ala kuville leveyttä. Selain ei osaa näyttää kuvaa, jos se on taustakuva, eikä sille annneta leveyttä.

foxytin kirjoitti:

"vika" on yksinkertaisesti siinä, ettet ole määrittänyt ylä- ja ala kuville leveyttä. Selain ei osaa näyttää kuvaa, jos se on taustakuva, eikä sille annneta leveyttä.

Ei ollut noita määrityksiä kaikissa ja sitten multa puuttui hakasulku yhdestä kohtaa CSS:ää. Ainoastaan nyt alaosa menee hieman oikealle eli ei ole ihan kohdillaan.

Romantikko4 kirjoitti:

Ei ollut noita määrityksiä kaikissa ja sitten multa puuttui hakasulku yhdestä kohtaa CSS:ää. Ainoastaan nyt alaosa menee hieman oikealle eli ei ole ihan kohdillaan.

Kun noilla kolmella osalla on niin paljon yhteisiä arvoja, niin voisi olla fiksua antaa niille samalla ne yhteiset arvot ja määrätä vain ne nimenomaiset arvot kullekin osalle erikseen:

    #yla, #keski, #ala { /* koskee kaikkia 3:a osaa */
       margin: 0;
       padding: 0;
       width: 780px; /* tai width: 100%; niin leveydeksi tulee rungon leveys */
       border: 1px solid Black;
       background: transparent scroll repeat left top;
    }
    #yla {
       background: url(images/ylaosa.jpg);
       height: 120px;
    }
    #keski {
       background: url(images/keskiosa.jpg);
       height:400px;
    }
    #ala {
       background: url(images/alaosa.jpg);
       height:80px;
    }


Tässähän on se hyöty että virhekanditaattien määrä pienenee ja muutoksia on helpompi tehdä kaikkiin osiin yhtä aikaa jos siltä tuntuu.

..että Foxi tottelee noiden divien korkeusmääräyksiä vähän eri tavalla. Eli siinä missä muut venyttävät divin korkeutta jos sisältöä on enemmän, fox taas pitää divin korkeuden ilmoitettuna.

Ongelma poistuu poistamalla korkeusmääritykset. Toisaalta voit myös antaa korkeuden sijasta minimikorkeuden:
   #keski {
      background: url(images/keskiosa.jpg);
      min-height:400px;
   }

IE6 ei ainakaan ymmärrä tuota määritettä, mutta haittaako se paljon? IE jättää sen vain kokonaan huomiotta. Jos siitä taas tulee ongelmia, voit tehdä IE:lle oman css:n johon laitat sisällöksi vaikkapa vain tuon
   #keski {height:400px;}

...




...

Höpö. kirjoitti:

..että Foxi tottelee noiden divien korkeusmääräyksiä vähän eri tavalla. Eli siinä missä muut venyttävät divin korkeutta jos sisältöä on enemmän, fox taas pitää divin korkeuden ilmoitettuna.

Ongelma poistuu poistamalla korkeusmääritykset. Toisaalta voit myös antaa korkeuden sijasta minimikorkeuden:
   #keski {
      background: url(images/keskiosa.jpg);
      min-height:400px;
   }

IE6 ei ainakaan ymmärrä tuota määritettä, mutta haittaako se paljon? IE jättää sen vain kokonaan huomiotta. Jos siitä taas tulee ongelmia, voit tehdä IE:lle oman css:n johon laitat sisällöksi vaikkapa vain tuon
   #keski {height:400px;}

...




...

Lue lisää

Ei tuon IE6-tyylin tietenkään tarvi olla ulkoisessa tiedostossa. Voit kirjoittaa sen tietty siihen head-osaan varsinaisten tyylimäärittelyjen jälkeen

      


tai vaikka ihan muiden tyylien sekaankin:

   #keski {
      background: url(images/keskiosa.jpg);
      height:400px;
      min-height:400px;
         
   }

Höpö. kirjoitti:

Ei tuon IE6-tyylin tietenkään tarvi olla ulkoisessa tiedostossa. Voit kirjoittaa sen tietty siihen head-osaan varsinaisten tyylimäärittelyjen jälkeen

      


tai vaikka ihan muiden tyylien sekaankin:

   #keski {
      background: url(images/keskiosa.jpg);
      height:400px;
      min-height:400px;
         
   }

Lue lisää

Toimii, paitsi jos viitsit katsoa niin FF:llä sivun alaosa kummallinen muilla taas on normaali.

Romantikko4 kirjoitti:

Toimii, paitsi jos viitsit katsoa niin FF:llä sivun alaosa kummallinen muilla taas on normaali.

Nyt päivitin, on siinä kyllä jotain outoaFF:llä ja Operalla.
http://www.topinrunokirja.com/uusi/

Romantikko4 kirjoitti:

Nyt päivitin, on siinä kyllä jotain outoaFF:llä ja Operalla.
http://www.topinrunokirja.com/uusi/

Lue lisää

Mitä outoa siinä nyt on? Tarkoitatko sitä ettei FF jätä alas tyhjää tilaa? Mun silmiin Opera ja IE6 näyttää keskenään samalla tavalla.

Höpö. kirjoitti:

Mitä outoa siinä nyt on? Tarkoitatko sitä ettei FF jätä alas tyhjää tilaa? Mun silmiin Opera ja IE6 näyttää keskenään samalla tavalla.

FF ei jätä alas tyhjää tilaa.

Romantikko4 kirjoitti:

FF ei jätä alas tyhjää tilaa.

..siinä antamassani jutussa sitten oli. Siis siinä että laittaa min-heighin ja IE:lle sitten erikseen korkeuden. Silloin FF:kin näyttää kuten muut.

Syytä tuohon alareunan puutteeseen en tiedä..

Höpö. kirjoitti:

..siinä antamassani jutussa sitten oli. Siis siinä että laittaa min-heighin ja IE:lle sitten erikseen korkeuden. Silloin FF:kin näyttää kuten muut.

Syytä tuohon alareunan puutteeseen en tiedä..

Lue lisää

vikaa, toimii. Kiitos!

Laita bodyyn paddingiä:

padding:20pt 0 100pt 0;

-Ridge- kirjoitti:

Laita bodyyn paddingiä:

padding:20pt 0 100pt 0;

Firefoxiin, edelleen ei alareunaa. IE:ssä ja Operassa kyllä antaa lisää alareunaa.

Romantikko4 kirjoitti:

Firefoxiin, edelleen ei alareunaa. IE:ssä ja Operassa kyllä antaa lisää alareunaa.

margin:0px 0px 200px 0;
padding:20pt 0 200pt 0;

Mites tuo vaikuttaa..?

-Ridge- kirjoitti:

margin:0px 0px 200px 0;
padding:20pt 0 200pt 0;

Mites tuo vaikuttaa..?

FF:llä toimii, mutta työntää IE:lle ja Operalle aika rajusti tyhjää alas. Käys katsomassa, päivitin toin sivun.

http://www.topinrunokirja.com/uusi/

Nyt on varmaan niin että FF näyttää oikein mutta muut eivät, mitenkä tuon kiertäisi niin että se näyttää muillakin oikein.

Romantikko4 kirjoitti:

FF:llä toimii, mutta työntää IE:lle ja Operalle aika rajusti tyhjää alas. Käys katsomassa, päivitin toin sivun.

http://www.topinrunokirja.com/uusi/

Nyt on varmaan niin että FF näyttää oikein mutta muut eivät, mitenkä tuon kiertäisi niin että se näyttää muillakin oikein.

Lue lisää

Toi nyt oli vaan esimerkki jollain mitoilla et näkee paremmin vaikuttaako se halutulla tavalla, mutta teeppä näin..

Ota runkosta turha korkeus määritys pois, se tuossa tekee haittaa, bodyyn margin:0px;
padding:20pt 0 50pt 0;

Myöskään noilla if ie6 ei tee mitään..

-Ridge- kirjoitti:

Toi nyt oli vaan esimerkki jollain mitoilla et näkee paremmin vaikuttaako se halutulla tavalla, mutta teeppä näin..

Ota runkosta turha korkeus määritys pois, se tuossa tekee haittaa, bodyyn margin:0px;
padding:20pt 0 50pt 0;

Myöskään noilla if ie6 ei tee mitään..

Lue lisää

»Myöskään noilla if ie6 ei tee mitään..»

Nillä OLI merkitys silloin kun ne vinkiksi annoin. Nimittäin jos sille #keski :lle antaa korkeusmääritykseksi min-height , niin silloin homma toimii Foxilla ja Operalla. IE:tä varten on tuo if EI6, koska se ei ymmärrä tuotä min-height -määrettä.

Höpö. kirjoitti:

»Myöskään noilla if ie6 ei tee mitään..»

Nillä OLI merkitys silloin kun ne vinkiksi annoin. Nimittäin jos sille #keski :lle antaa korkeusmääritykseksi min-height , niin silloin homma toimii Foxilla ja Operalla. IE:tä varten on tuo if EI6, koska se ei ymmärrä tuotä min-height -määrettä.

Lue lisää

Tuli vähän väärin kirjoitettua, mutta järkevintä tässäkin tapauksessa olis varmaan laittaa tuo footeri runkon alapuolelle ja antaa keskiosalle se tarvittava korkeus jos tuon kiinteä täytyy olla..

-Ridge- kirjoitti:

Tuli vähän väärin kirjoitettua, mutta järkevintä tässäkin tapauksessa olis varmaan laittaa tuo footeri runkon alapuolelle ja antaa keskiosalle se tarvittava korkeus jos tuon kiinteä täytyy olla..

Lue lisää

..mielestäni kyllä ihan Foxin bugista. Nimittäin silloin kun tuossa #keski -osassa on vähemmän tekstiä niin Fox näyttää sen tilan mutta kun tekstiä tulee enemmän se jättää tyhjän tilan alhaalta pois.



Aikaisemmin siellä oli jotain ongelmia ilman tuota min-heigh -määrettä. Siksi se oli siellä ja IE-korjauksena tuo if IE6.
En ny enää muista miten se silloin oli.

Höpö. kirjoitti:

..mielestäni kyllä ihan Foxin bugista. Nimittäin silloin kun tuossa #keski -osassa on vähemmän tekstiä niin Fox näyttää sen tilan mutta kun tekstiä tulee enemmän se jättää tyhjän tilan alhaalta pois.



Aikaisemmin siellä oli jotain ongelmia ilman tuota min-heigh -määrettä. Siksi se oli siellä ja IE-korjauksena tuo if IE6.
En ny enää muista miten se silloin oli.

Lue lisää

Ei ole bugi, vaan ominaisuus tulkata CSS merkkaus oikein. Jos elementille annetaan korkeus, niin silloin se tulee myös näyttää sen kokoisena, niin sanoo web-standardit. IE tulkitsee väärin ja venyttää tarvittaessa (yleensä tosin vain hyvä asia).

foxytin kirjoitti:

Ei ole bugi, vaan ominaisuus tulkata CSS merkkaus oikein. Jos elementille annetaan korkeus, niin silloin se tulee myös näyttää sen kokoisena, niin sanoo web-standardit. IE tulkitsee väärin ja venyttää tarvittaessa (yleensä tosin vain hyvä asia).

Lue lisää

Korjataanpas vähän, kun en kunnolla lukenut.

Eli tämä aikaisempi vastaus koskien juurikin siihen, että firefox ei venytä elementtiä, jos sille on annettu korkeus.

Luulin siis että tarkoitat juurikin sitä tuolla "bugilla" vaikka tarkoitit että ottaa tyhjän tilan pois.

foxytin kirjoitti:

Ei ole bugi, vaan ominaisuus tulkata CSS merkkaus oikein. Jos elementille annetaan korkeus, niin silloin se tulee myös näyttää sen kokoisena, niin sanoo web-standardit. IE tulkitsee väärin ja venyttää tarvittaessa (yleensä tosin vain hyvä asia).

Lue lisää

Korjataanpas aikaisempaa vastaustani. En taas lukenut ajatuksella, joten vastasin myös väärin.

Eli tuo aikaisemmassa viestissäni luulin sinun tarkoittavan sitä, että se on bugi, kun elementti ei veny, vaikka tarkoitit, että se on bugi, kun jättää tyhjän tilan pois.

foxytin kirjoitti:

Korjataanpas aikaisempaa vastaustani. En taas lukenut ajatuksella, joten vastasin myös väärin.

Eli tuo aikaisemmassa viestissäni luulin sinun tarkoittavan sitä, että se on bugi, kun elementti ei veny, vaikka tarkoitit, että se on bugi, kun jättää tyhjän tilan pois.

Lue lisää

Ja sitten korjataan vielä lisää :D

Kirjotin tosiaan toisen vastauksen jo päivällä, mutta jostain syystä se ei näkynyt. Nyt kirjoitin toisen ja tuli sitten näkyviin molemmat.

(viestin muokkaus/poisto ois ihan hyvä ominaisuus)

foxytin kirjoitti:

Ja sitten korjataan vielä lisää :D

Kirjotin tosiaan toisen vastauksen jo päivällä, mutta jostain syystä se ei näkynyt. Nyt kirjoitin toisen ja tuli sitten näkyviin molemmat.

(viestin muokkaus/poisto ois ihan hyvä ominaisuus)

Lue lisää

bugittaa kybällä..=)

foxytin kirjoitti:

Ja sitten korjataan vielä lisää :D

Kirjotin tosiaan toisen vastauksen jo päivällä, mutta jostain syystä se ei näkynyt. Nyt kirjoitin toisen ja tuli sitten näkyviin molemmat.

(viestin muokkaus/poisto ois ihan hyvä ominaisuus)

Lue lisää

Mahdollisuus poistaa omia viestejä on yksi rekisteröityjen nimimerkkien harvoista etuoikeuksista :)

Harmaalla pohjalla viestin otsikon alapuolella --> Poista oma viesti

Samalla poistuvat myös kaikki viestiin kirjoitetut vastaukset.