html 4.01: solun leveys 100%?

ongelmasolussa 2 määrittele solun leveydeksi 100% eli koko ruutua....?

....mainitussa voisi olla ideaa.
Sun ei tarvitsi määritellä jokaisen kokosivun leveyden käyttävää solua erikseen joka solussa.
Vain niiden, jotka haluat olevan jonkin muun kokoisia.

Toinen vaihtoehto on se, että teet 2 taulukkoa allekain. Toinen taulukon aloitat ensimmäisestä ongelma solusta.
Tällä kertaa, määrittele molemmat solut prosentteina. Vie jonkin aikaa etsiä oikea prosenttimäärä mutta haluttu tulos saadaan aikaiseksi.

En ole talukoita kovin paljoa tehnyt mutta näistä kahdesta vaihtoehdosta, kannattaa kokeilla ensin tuota ekana olevaa...
Jälkimmäinen ainakin toimii mutta on hiukkasen hankala toteuttaa(nimim. kokemusta on).

Googlesta löytyy melko hyviä oppaita talukoiden tekemiseen. Muutamia jopa suomeksi.

Laita hakusanaksi html opas ja laita haku suomi luokan sivuille tai html guide ja hae koko maailmasta.
Noilla ainakin mä löysin tietoa.
Itsekin vielä melko alkutekijöissä....

jos ekalla ja tokalla tr:llä on vain yksi solu mutta keskimmäisillä riveillä on kaksi niin pitää joko halkaista eka ja vipa rivi tai käyttää colspania. niin ja lisäksi kuvien kokomäärityksessä ei oikeastaan saisi käyttää prosentteja, saattaa jotkut selaimet seota lopullisesti, osassa vain käyttäjät.

muiden koodin rippaamisessa on aloittelijalle monesti vaikeampaa kuin ihan ikioman merkkauksen kirjoittaminen, se siis kannattaa myös opetella. oppaita löytyy netistä runsaasti ja myös selvällä suomen kielellä.

muista validoida ennen julkaisua! suomenkielinen validaattori (kieliopin tarkastin) löytyy osoitteesta http://www.lempinen.net/lehtori

Jos siis lähdettïsiin siitä että kun käytetään css:ää niin ei käytetä mitään epämääräisiä html-attribuutteja. Eli tehdään rakenne html:llä ja ulkoasujippoilut css:llä.

Esimerkiksi nuo width ja height -arvot ovat ihan älytöntä antaa html:ssä, lopulta ei pirukaan enää ole selvillä missä mikäkin määritys on annettu.

Purin tuon sivun rakenteen puolesta tällaiseksi:



   ..




   
      ylin solu
   
   
      vasen liukuvärisolu
      linkkisolu
   
   
      ongelmasolu nro1
      ongelmasolu nro2
   
      alin rivi
   




.
.

Tässä vaiheessa sivu on siis erittäin selkeä, vai mitä. Pistin tuohon table -tagiin border-arvon ihan kehittelyvaiheen selkeyden vuoksi, se pitää poistaa myöhemmin.

Seuraavaksi aletaan tiputtelemaan sinne määritteitä. Muuta sinne ei kyllä tarvita kun sellaiset että pystytään css:llä kaikki päättämään muualla:


   
      ylin solu
   
   
      vasen liukuvärisolu
      linkkisolu
   
   
      ongelmasolu nro1
      ongelmasolu nro2
   
      alin rivi
   


.
.

Ja vieläkiin on ihan yhtä selkeä. Sitten pistetään css-osio kuntoon:



   body {
      margin : 0px;
      padding : 0px;
      background-color : #B7DC17;
   }
   table {
      background-color : white;
      width : 100%;
   }
   .ylin_solu {
      background-color : Blue;
   }
   .vasen_liukuvarisolu {
      width : 18%;
      height : 836px;
      background-color : Red;
   }
   .linkkisolu {
      height : 36px;
      background-color : #E6EF8C;
   }
   .ongelmasolu_nro1 {
      width : 500px;
      height : 600px;
      background-color : Aqua;
   }
   .ongelmasolu_nro2 {
      height : 600px;
      background-color : Fuchsia;
   }
   .alin_rivi {
      height : 200px;
      background-color : Lime;
   }


.
.

Alkaako jo näyttää yhtään sellaiselta kuin kaipaat? Pistin sinne taustavärit että näkee paremmin minkäkokoisia nuo solut ovat.

Ja sitten vaan lisätään sisältö sivulle:








   body {
      margin : 0px;
      padding : 0px;
      background-color : #B7DC17;
   }
   A:link {
      color: #A3BAD8
   }
   A:visited {
      color: #A3BAD8
   }
   A:active {
      color: #203775
   }
   A:hover {
      color: #203775;
      background-color: none
   }
   table {
      background-color : white;
      font-family : Verdana,sans-serif;
      font-style : normal;
      color : #203775;
      width : 100%;
      }
   .ylin_solu {
      padding-left : 18%;
      background-image : url(kuvat/ylapalkki.jpg);
      background-repeat : repeat-x;
   }
   .vasen_liukuvarisolu {
      height : 836px;
      text-align : center;
      vertical-align : top;
      padding-top : 40px;
   }
   .linkkisolu {
      height : 36px;
      padding-left : 40%;
      background-color : #E6EF8C;
      border-bottom-color : #5D7EA0;
      border-style : solid;
      border-width : 0px;
      text-align : left;
      vertical-align : middle;
   }
   .ongelmasolu_nro1 {
      width : 500px;
      height : 600px;
      padding-left : 40px;
      padding-top : 40px;
      background-image : url(kuvat/etusivupohja1.jpg);
      background-repeat : repeat-x;
      text-align : left;
      vertical-align : top;
   }
   .ongelmasolu_nro2 {
      height : 600px;
      background-image : url(kuvat/etusivupohja2.jpg);
      background-repeat : repeat-x;
      vertical-align : top;
   }
   .alin_rivi {
      height : 200px;
      background-image : url(kuvat/alapalkki.jpg);
      background-repeat : repeat-x;
      vertical-align : top;
   }

   ..



   
      
   
   
      
      
      Etusivu   ::
      Toiminta   ::
      Jäsenet   ::
      Yhteydenotto
   
   
      ongelmasolu nro1
      ongelmasolu nro2
   
   
      alin rivi
   





.
.

Siinäpä se, ja mielestäni aika selkeännäköinenkin se on. Jos nyt on ongelmia niin on paljon helpompi alkaa selvittämään missä mättää..

Css kannattaa tietenkin veilä laittaa ulkoiseen tiedostoon niin sen saa helposti kaikille sivuille.
Dokumenttityyppi myös tarvitaan mutta tuo nyt menee läpi jo vaikka xhtml strictinä jos niikseen tulee.
Turhaan muuten muutenkaan edes opettelet noilla siirtymävaiheen säännöksillä (transitional) tekemistä, tee samantien oikein.