Prestaňte používať tabuľky na delenie stránky

 

HTML -> Ukážkové kódy v HTML -> Prestaňte používať tabuľky na delenie stránky

Ak stále používate značku table alebo dokonca frameset na rozdelenie stránky a oddelenie menu od textu stránky, tak by ste mali prejsť na značku div. Pomocou nej sa stránka zobrazí rýchlejšie a vyhnete sa problémom, ak si Vašu stránku bude niekto pozerať prehliadačom bez podpory značiek table alebo frameset.

V príklade si ukážeme ako jednoducho rozdelíme stránku na dve časti - menu a text.

<div style="position: relative; width: 10em; height: auto; left: 0; float: left; text-align: center;">
  ľavé menu<br>
  ľavé menu<br>
  ľavé menu
</div>

<div style="border-left: dashed 1px; position: relative; padding-left: 20px; padding-right: 10px; margin-left: 10em; width: auto;">
hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky
</div>

<div style="text-align: center; margin-top: 1em;">
<a href="http://www.kasman.sk">www.kasman.sk</a>
</div>




Celý tento kód môžeme prepísať ešte elegantnejšie, ak si ho rozdelíme na dva súbory: stranka.htmstyl.css

styl.css:
.lavy-stlpec {position: relative; width: 10em; height: auto; left: 0; float: left; text-align: center;}

.hlavny {border-left: dashed 1px; position: relative; padding-left: 20px; padding-right: 10px; margin-left: 10em; width: auto;}

.pata {text-align: center; margin-top: 1em;}


stranka.htm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  <LINK href='styl.css' type='text/css' rel=StyleSheet>
  </head>
  <body>

  <div class="lavy-stlpec">
    ľavé menu<br>
    ľavé menu<br>
    ľavé menu
  </div>

  <div class="hlavny">
  hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky, hlavná časť stránky
  </div>

  <div class="pata">
  <a href="http://www.kasman.sk">www.kasman.sk</a>
  </div>

  </body>
</html>



vytlačiť článok  hľadať súvisiace články 

Chat ku článku

Vyhľadávanie na stránke
Reklama
Náhodný obrázok
náhodný obrázok
Kontakty

Martin Kasman, M Software
Smreková 3095/23
Email: martin@kasman.sk

Telefón: 0908 270 294