Listaszerkezet kialakítása

1. példa a kiinduló oldalt mutatja, ami nem más mint a Webáruház fejléce fejezetben készített elő oldalunk.

Első lépésben elhelyezzük a linkeket a menüsorban, mégpedig lista szerkezetben. Csupán HTML kód változik. Ezt mutatja a második példa.

1. Példa:

Forráskód

...<style type="text/css"> 
 {margin:0; padding:0;}
  #tarolo {position:relative; display:block; min-height:100%; width:100% }
  #fejlec {position:absolute; display:block; top:0; left:0; 
     height:50px; width: 100%; background-color:#662210; color:#ffddcc;}
  #menu {position:absolute; display:block; top: 50px; left: 0; 
     height:30px; width: 100%; text-align:center; 
     background-color:#aa2210; color:#ffddcc;}
  #balmenu {position:absolute; display:block; top:80px; left:0; 
     height:290px; width:100px; ...} 
  #tartalom {position:absolute; display:block; top:80px; left:100px;   
     background-color:#ffddcc; color:#662210; padding-bottom:40px; } 
</style>   ....
<body>
 <div id="tarolo">   
  <header id="fejlec"> Webáruház neve és lógója </header>
  <nav id="menu">Termkek | Vásárlás... </nav>
  <div id="tartalom"><p> Az oldal tartalma ...  </p>     
  </div>
     <div id="balmenu"> <br> <b>Kínálat</b> ...
     </div>  
 </div>  
</body>

Eredmény*

2. Példa:

Forráskód

...<style type="text/css"> 
....
</style>   ....
<body>
....
  <nav id="menu">
    <ul><li>
      <a href="#">Termékek</a> 
    </li><li>
      <a href="#">Vásárlás</a> 
    </li><li>
      <a href="#">Kapcsolatok</a> 
    </li></ul>
  </nav>
....
</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: webshop_menu_1.html