tyylitiedosto ja kuvat

ja alan gurut ei suosittele.

Laita uusi kuva samalle nimelle kuin vanha niin koodiin ei tartte tehdä mitään muutoksia.

php:llä tai ssi:llä voit liittää koodin sekaan toisen tiedoston, esim. kuva.txt:n, jossa lukee:



Sitte vaan muutat tuota kuva.txt:ssä olevaa filen nimeä.

background-image: url("/linkki/kuvaan.jpg");
background-repeat: repeat-x; (repeat-y / no-repeat)

repeat-x toistaa taustakuvaa vaakasuunnassa ja -y pystysuunnassa. no-repeat luonnollisesti ei toista kuvaa. Liitä ylläoleva esimerkiksi taulukkosi solun tyyliin.

Kelpaako tällainen viritys:




   Untitled
   





   
   
   
   
   
   
   
   
   
   







Ja sitten tyyli.css -tiedostoon vaikka tälleen:

   #kuvia {
      width: 520px;
      height: 50px;
      margin: auto;
   }
   #kuvia div {
      width: 50px;
      height: 50px;
      border: 1px solid Black;
      float: left;
   }
   #kuvia #yks {background: url(http://www.suomi24.fi/img/frontpage/menu_mail.gif);}
   #kuvia #kaks {background: url(http://www.suomi24.fi/img/frontpage/menu_conference.gif);}
   #kuvia #kolm {background: url(http://www.suomi24.fi/img/frontpage/menu_chat.gif);}
   #kuvia #neli {background: url(http://www.suomi24.fi/img/frontpage/menu_member.gif);}
   #kuvia #viis {background: url(http://www.suomi24.fi/img/frontpage/tv.gif);}
   #kuvia #kuus {background: url(http://www.suomi24.fi/img/frontpage/menu_dating.gif);}
   #kuvia #seitse {background: url(http://www.suomi24.fi/img/frontpage/mtr.gif);}
   #kuvia #kaheksa {background: url(http://www.suomi24.fi/img/archive/5/95/895/45895/enirologo.jpg);}
   #kuvia #yheksa {background: url(http://www.suomi24.fi/img/gg.gif);}
   #kuvia #kymme {background: url(http://www.suomi24.fi/img/partner/saunalahti.gif);}



P.S. tää foorumi tekee aina vähän omiaan. tuosta dtd:stä esimerkiksi häviää yksi lainausmerkki. Eli koodin toisen rivin loppu kuuluu olla näin:
   html4/strict.dtd">