WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Lista használata menüben



Az a elemek formázásával hozhatunk létre állandó szélességű és magasságú, tetszetős hátterű menüpontokat. Az li a: {display: block;} beállítás mellett.


A formázás lépései:

Kiinduló állapot:

Forráskód


<style> 
  nav {background-color:#e0e0e0;
       padding: 5px 10px 10px 0; width: 200px;}  
</style>     
...
<body> 
 <nav>
   <ul><li>
     <a href="http://webfejlesztes...."> CSS3 Színek</a> 
   </li><li>
    <a href="http://webfejlesztes...."> CSS3 Alapok</a> 
   </li><li>
    <a href="http://webfejlesztes...."> CSS3 Kijelölők</a> 
   </li></ul>
 </nav>    
</body> 

Eredmény*


A fontbeállítások:

Forráskód


<style> 
  Az előző plusz: 
  nav li a:link {color:#666600;
      font: small-caps  bold 18px Verdana, Geneva, sans-serif; 
     text-decoration:none; }
  nav li a:visited {color:#666600; text-decoration:none;} 
  nav li a:hover {color:#006666; text-decoration:none;} 
  nav li a:active {color:#660000; text-decoration:none;}
</style>     
...
<body> 
 Az előzővel egyezik.    
</body> 

Eredmény*


A listajelek eltüntetése:

Forráskód


<style> 
  Az előző plusz: 
  ul {list-style-type: none; }
</style>     
...
<body> 
 Az előzővel egyezik.    
</body> 

Eredmény*


A linkeket blokkszintűvé alakítva:

Forráskód


<style> 
  Az előző plusz: 
  nav li a { display: block;} 
  nav li {padding:1px; margin:0;}    
  nav ul {padding:5px; margin:0;} 
</style>     
...
<body> 
 Az előzővel egyezik.    
</body> 

Eredmény*


A linkdoboz méretezése és szövegigazítás:

Forráskód


<style> 
  Az előző plusz: 
    nav li a { display: block;  
    margin: 2px; width: 160px;  
    height: 25px;  
    text-align:right;} 
</style>     
...
<body> 
 Az előzővel egyezik.    
</body> 

Eredmény*


A linkdoboz háterének és szegélyének beállítása:

Forráskód


<style> 
  Az előző plusz: 
  nav li a { display: block; 
    background-color:#FFFFFF; 
    margin: 2px; width: 160px; 
    padding: 8px 18px 8px 8px; 
    height: 25px; text-align:right;
    border:1px solid #cccccc; }
</style>     
...
<body> 
 Az előzővel egyezik.    
</body> 

Eredmény*


Szegélykerekítés és árnyékolás:

Forráskód


<style> 
  Az előző plusz: 
  nav li a { display: block; 
  background-color:#FFFFFF; 
  margin: 2px; width: 160px; 
  padding: 8px 18px 8px 8px; 
  height: 25px; 
  border-radius: 15px  15px 15px 15px; 
  text-align:right;
  border:1px solid #cccccc; 
  box-shadow: 3px 3px 5px 0px #444444;}   
</style>     
...
<body> 
 Az előzővel egyezik.    
</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ő: css_listak_menuben_v_01.html