Elementuak kokatu

Elementuak kokatuz

Pertsona askok webguneetan elementuak antolatzeko taulak erabiltzen dituzte. taulak, taulak egiteko dira, ohitura oso txarra da hauek webgunea maketatzeko erabiltzea. Horregatik, hemen adibide sinple bat jarriko dugu. Adibide honetan oinarriturik, gauza asko egiteko aukera egongo da.

Goiko irudian agertzen dena sortzeko, bi atal ditugu. Alde batetik HTML-a eta bestetik CSS-a. Hau da, alde batetik edukia sartuko dugu eta bestetik edukia maketatuko dugu.

HTML-an hau jarri behar da:

<div class="eduki_taula">
  <div class="eduki_gelaxka">
    <div class="eduki_gelaxka_irudia">
      <a href="http://www.ikapp.info"><img src="http://www.ikapp.info/sites/default/files/ehi-ikurra.png" title="Izenburua" alt="alt"></a>
    </div>
    <div class="eduki_gelaxka_testua">
      <p><b>Izenburua</b><br/>
          asdacuygd vaug avasv</p>
    </div>
  </div>
 
  <div class="eduki_gelaxka">
    <div class="eduki_gelaxka_irudia">
      <a href="http://www.ikapp.info"><img src="http://www.ikapp.info/sites/default/files/ehi-ikurra.png" title="Izenburua" alt="alt"></a>
    </div>
    <div class="eduki_gelaxka_testua">
      <p><b>Izenburua</b><br/>
        asdacuygd vaug avasv</p>
    </div>
    </div>
    <div class="eduki_gelaxka">
      <div class="eduki_gelaxka_irudia">
        <a href="http://www.ikapp.info"><img src="http://www.ikapp.info/sites/default/files/ehi-ikurra.png" title="Izenburua" alt="alt"></a>
      </div>
      <div class="eduki_gelaxka_testua">
         <p><b>Izenburua</b><br/>
              asdacuygd vaug avasv</p>
      </div>
    </div>
  <div class="eduki_gelaxka">
    <div class="eduki_gelaxka_irudia">
       <a href="http://www.ikapp.info"><img src="http://www.ikapp.info/sites/default/files/ehi-ikurra.png" title="Izenburua" alt="alt"></a>
     </div>
    <div class="eduki_gelaxka_testua">
        <p><b>Izenburua</b><br/>
            asdacuygd vaug avasv</p>
    </div>
</div>
<div class="eduki_gelaxka">
<div class="eduki_gelaxka_irudia">
</div>
<div class="eduki_gelaxka_testua">
<p><b>Izenburua</b><br/>
asdacuygd vaug avasv</p>
</div>
</div>
<div class="eduki_gelaxka">
<div class="eduki_gelaxka_irudia">
</div>
<div class="eduki_gelaxka_testua">
<p><b>Izenburua</b><br/>
asdacuygd vaug avasv</p>
</div>
</div>
</div>
 
  • Eduki_taula izeneko div bat sortzen da, bertan dena sartzeko.
  • Ondoren, irudi eta testuak dituen beste div bat sorzten da.
  • Irudia a batean sartu dago eta a hau div batean.
  • Testua beste div batean.

Ondoren edukiari itxura emateko honako css-a erabil dezakegu:

/* Eduki guztia, alde guztietatik 10 pixel sartzeko */
.eduki_taula{
  padding: 10px;
}
/* gelaxka bakoitak, bere gurasoaren tamainaren erena izango du zabaleran eta 110pixeleko altura. Testu edo irudi handiagoak jartzekotan, hau handitu beharko litzateke */
/* elementuei float:left jartzen zaie, bata bestearen ondoan agertzeko. Lerro batean gehiagoi*/
.eduki_gelaxka{
  width: 33%;
  float: left;
  margin-top: 30px;
  height: 110px;
}
/* Testua irudaren ondoan agertzeko baino irudia eta testuaren artean 10 pixeleko tartea utziz */
.eduki_gelaxka_irudia{
  float:left;
  margin-right: 10px;
}