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    

Inline lista (Menüsor)



Az előző oldalon megismert menü menüsorrá alakítható, ha a listaelemeket inline elemmé alakítjuk a li {display:inline;} stílusdeklarációval.

Annak érdekében, hogy a menüpontok egymás mellé kerülhessenek a fenti stílusdeklarációt ki kell egészíteni a következővel: li {display:inline; }


Példa:

Az előző oldalon látható példa átalakítása

Forráskód



<style> 
  ul {list-style-type: none; }    
  nav {background-color:#e0e0e0;
    text-align:center;
    padding: 5px 5px 5px 0;
    width:585px; height:55px; }     
  nav li {padding:1px; margin:0; display:inline; float:left;}    
  nav ul {padding:1px; margin:0;} 
  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;} 
  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> 
  <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*



* 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_menusorban_v_01.html