Az itt leírtakról bővebben, a kezdő weboldal témaköreiben olvashatunk.
Ha valamit elfelejtettünk, a következő részekből átmásolhatjuk
Navigációs és villogó táblázatok, listák
Függőleges navigációs villogó táblázat
Megjelenése weboldalon, azaz monitoron
Teszteléshez a táblázat szövege fölé húzzuk az egeret.
Megírása XHTML lapon
<div id="navdtabla">
<table width="110" border="4" cellpadding="2" class="navdtabla">
<tr><td> <a href="html fájl_001.html"> Téma 1 </a> </td></tr>
<tr><td> <a href="html fájl_002.html"> Téma 2 </a> </td></tr>
<tr><td> <a href="html fájl_003.html"> Téma 3 </a> </td></tr>
<tr><td> <a href="html fájl_004.html"> Téma 4 </a> </td></tr>
<tr><td> <a href="html fájl_005.html"> Téma 5 </a> </td></tr>
<tr><td> <a href="html fájl_006.html"> Téma 6 </a> </td></tr>
<tr><td> <a href="html fájl_007.html"> Téma 7 </a> </td></tr>
<tr><td> <a href="html fájl_008.html"> Téma 8 </a> </td></tr>
<tr><td> <a href="html fájl_009.html"> Téma 9 </a> </td></tr>
</table>
</div>
Megírása CSS lapon
#navdtabla { width: 140px; background-color: black; margin-left: 30px;}
.navdtabla {margin: 15px;}
.navdtabla td {text-align: center; font-size: 12px; font-weight: bold; background-color: red;}
.navdtabla a {color: #fff; text-decoration: none;}
.navdtabla a:hover {color: black; background-color: #fc0; padding: 0px 8px 0px 8px;}
Függőleges navigációs, háttérszínt váltó táblázat
Megjelenése weboldalon, azaz monitoron
Teszteléshez a táblázat szövege fölé húzzuk az egeret.
Megírása XHTML lapon
<div id="navszvtabla">
<table border="4" cellpadding="2" class="navszvtabla">
<tr><td><ul class="valtozoa"><li> <a href="#"> Téma 1 </a></li> </ul></td></tr>
<tr><td><ul class="valtozob"><li> <a href="#"> Téma 2 </a></li> </ul></td></tr>
<tr><td><ul class="valtozoc"><li> <a href="#"> Téma 3 </a></li> </ul></td></tr>
<tr><td><ul class="valtozod"><li> <a href="#"> Téma 4 </a></li> </ul></td></tr>
<tr><td><ul class="valtozoe"><li> <a href="#"> Téma 5 </a></li> </ul></td></tr>
<tr><td><ul class="valtozof"><li> <a href="#"> Téma 6 </a></li> </ul></td></tr>
<tr><td><ul class="valtozog"><li> <a href="#"> Téma 7 </a></li> </ul></td></tr>
<tr><td><ul class="valtozoh"><li> <a href="#"> Téma 8 </a></li> </ul></td></tr>
<tr><td><ul class="valtozoi"><li> <a href="#"> Téma 9 </a></li> </ul></td></tr>
</table>
</div>
Megírása CSS lapon
#navszvtabla {width: 160px; background-color: black; margin-left: 30px;}
.navszvtabla{width: 110px; margin: 15px; background: red;}
.navszvtabla td {text-align: center; font-size: 12px; font-weight: bold; }
.valtozoa, .valtozob, .valtozoc, .valtozod, .valtozoe, .valtozof, .valtozog, .valtozoh, .valtozoi {width: 110px; list-style: none; font-size: 12px; font-weight: bold; margin: 0px; padding: 0px;}
.valtozoa a, .valtozob a, .valtozoc a, .valtozod a, .valtozoe a, .valtozof a, .valtozog a, .valtozoh a, .valtozoi a {display: block; width: 110px; text-align: center; padding: 2px 0px 2px 0px; background: #3c4f38; text-decoration: none; color: #fff;}
.valtozoa a:hover, .valtozob a:hover, .valtozoc a:hover, .valtozod a:hover, .valtozoe a:hover, .valtozof a:hover, .valtozog a:hover, .valtozoh a:hover, .valtozoi a:hover {padding: 2px 0px 2px 0px; background-color: #fc0; color: black;}
.valtozoa a:hover{background-color: aqua;} - Megváltoztatjuk a háttérszínt
.valtozob a:hover{background-color: fuchsia;} - Megváltoztatjuk a háttérszínt
.valtozoc a:hover{background-color: lime;} - Megváltoztatjuk a háttérszínt
.valtozod a:hover{color: blue;} - Megváltoztatjuk a betű színét
Vízszintes navigációs villogó táblázat
Megjelenése weblapon
Teszteléshez, szövege fölé húzzuk az egeret.
| Téma 1 | Téma 2 | Téma 3 | Téma 4 | Téma 5 | Téma 6 | Téma 7 |
Megegírása XHTML lapon
<table width="90%" border="4" cellpadding="2" class="navviztabla">
<tr>
<td> <a href="#"> Téma 1</a> </td>
<td> <a href="#"> Téma 2</a> </td>
<td> <a href="#"> Téma 3</a> </td>
<td> <a href="#"> Téma 4</a> </td>
<td> <a href="#"> Téma 5</a> </td>
<td> <a href="#"> Téma 6</a> </td>
<td> <a href="#"> Téma 7</a> </td>
<tr>
</table>
Meghatározások megírása CSS lapon
.navviztabla {width: 90%; background-color: black;}
.navviztabla td {text-align: center; font-size: 12px; font-weight: bold; background-color: red;}
.navviztabla a {color: #fff; text-decoration: none; padding: 0px 8px 0px 8px;}
.navviztabla a:hover {color: black; background-color: #fc0; padding: 0px 8px 0px 8px;}
Navigációs, villogó lista függőlegesen
Megjelenése weblapon
Teszteléshez, szövege fölé húzzuk az egeret.
Megegírása XHTML lapon
<div id="navdlista"><ul class="navdlista">
<li> <a href="html fájl_001.html">Téma 1</a> </li>
<li> <a href="html fájl_002.html">Téma 2</a> </li>
<li> <a href="html fájl_003.html">Téma 3 </a> </li>
<li> <a href="html fájl_004.html">Téma 4 </a> </li>
<li> <a href="html fájl_005.html">Téma 5 </a> </li>
<li> <a href="html fájl_006.html">Téma 6 </a> </li>
<li> <a href="html fájl_007.html">Téma 7 </a> </li>
<li> <a href="html fájl_008.html">Téma 8 </a> </li>
<li> <a href="html fájl_009.html">Téma 9 </a> </li>
</ul>
</div>
Meghatározások megírása CSS lapon
#navdlista {width: 120px; padding: 10px 0px 10px 0px; background-color: black;}
.navdlista a {text-align: center;}
.navdlista{list-style: none; font-size: 12px; font-weight: bold; margin: 0px; padding: 0px; margin-left: 15px;}
.navdlista a {background: #3c4f38; display: block; width: 80px; text-decoration: none; color: #fff;}
.navdlista a {border: 1px solid #ccc; margin-top: 2px; padding: 2px 5px 2px 5px;}
.navdlista a:hover {background-color: #fc0; color: black;}
Navigációs, villogó lista vízszintesen
Megjelenése weblapon, azaz monitoron
Teszteléshez, szövege fölé húzzuk az egeret.
Megegírása XHTML lapon
<div id="nav">
<ul>
<li><a href="#">xxxxx A html</a> </li>
<li><a href="#">xxxxx B html</a> </li>
<li><a href="#">xxxxx C html </a> </li>
<li><a href="#">xxxxx D html </a> </li>
</ul>
</div>
Meghatározások megírása CSS lapon
#nav {width: 650px; height: 50px; float: left; margin: 10px; }
#nav {background: blue; border: 2px solid black;}
/* A mozilla böngésző miatt meg kell növelni a nav szakasz belső margóját. */
li {list-style: none; display: inline;}
li {margin-right: 35px; }
/* A hivatkozásokat, vizszíntesen középre helyezzük. Függölegesen, a felső és alsó margóval kell beállítani. */
ul { text-align: center; margin-top: 15px; margin-bottom: 10px;}
a { color: #fff; }
a {border: 1px solid #ccc; }
a { text-decoration: none; padding:0.25em 0.5em; }
a:hover {color: #f8dd47; background: #757575; }
Megegírása XHTML lapon
Megegyezik a függőleges listás felsorolásokkal, azzal a különbséggel, hogy a div szakasz azonosítóját és a kezdő ul címke azonosítóját kell megváltoztatni.
A következő azonosítók fognak szerepelni.
<div id="navvizlista">
<ul class="navvizlista">
Meghatározások megírása CSS lapon
.navvizlista {width: 690px; text-align: left; padding: 15px;}
.navvizlista li { font-size: 12px; font-weight: bold; }
.navvizlista li {list-style: none; display: inline; margin-right: 5px; }
.navvizlista a {background: #3c4f38; text-decoration: none; color: #fff;}
.navvizlista a {border: 2px solid #ccc; padding: 2px 5px 2px 5px;}
.navvizlista a:hover {background-color: #fc0; color: black;}
