tab/schede in pagine web

**dark0s** · 27-02-2010, 19:15

Come si fanno i tab/schede in HTML o CSS all'interno delle pagine web, come ad esempio quelli presenti
nel sito html.it:

"html.it, siti, servizi, news, download, pmi, pa, blog...."

e via dicendo per selezionare il tipo di pagina web?

**miki003** · 27-02-2010, 20:24

Originariamente inviato da dark0s
Come si fanno i tab/schede in HTML o CSS all'interno delle pagine web, come ad esempio quelli presenti
nel sito html.it:

"html.it, siti, servizi, news, download, pmi, pa, blog...."

e via dicendo per selezionare il tipo di pagina web?

[list=1][*]Con Javascript[*]Con CSS[/list=1]

A te la scelta

**dark0s** · 27-02-2010, 21:11

con CSS come si può fare?

**miki003** · 27-02-2010, 23:36

ESEMPIO

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                        <title>CSS Navigation Menu</title>
<style type="text/css">
<!--
    body {
        margin:0;
        padding:0;
        font: bold 11px/1.5em Verdana;
}

h2 {
        font: bold 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}
#tabsJ {
      float:left;
      width:100%;
      background:#F4F4F4;
      font-size:93%;
      line-height:normal;
          border-bottom:1px solid #24618E;
      }
    #tabsJ ul {
        margin:0;
        padding:10px 10px 0 50px;
        list-style:none;
      }
    #tabsJ li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsJ a {
      float:left;
      background:url("tableftJ.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 5px;
      text-decoration:none;
      }
    #tabsJ a span {
      float:left;
      display:block;
      background:url("tabrightJ.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#24618E;
      }
    #tabsJ a span {float:none;}
    #tabsJ a:hover span {
      color:#FFF;
      }
    #tabsJ a:hover {
      background-position:0% -42px;
      }
    #tabsJ a:hover span {
      background-position:100% -42px;
      }

        #tabsJ #current a {
                background-position:0% -42px;
        }
        #tabsJ #current a span {
                background-position:100% -42px;
                color:#FFF;
        }
-->
</style>
                </head>

                <body>
                        <h2>Tab Menu</h2>
                        <div id="tabsJ">
                                <ul>
<li id="current"><span>Home</span>[*]<span>Products</span>[*]<span>Services</span>[*]<span>Support</span>[*]<span>Order</span>[*]<span>News</span>[*]<span>About</span>
[/list]
                        </div>
                </body>
</html>

Discussione: tab/schede in pagine web

Strumenti discussione

Ricerca discussione

Visualizza

tab/schede in pagine web

Re: tab/schede in pagine web

Permessi di invio