tegame
21-03-2008, 01:55
Ho creato un menù di navigazione basandomi su CSS e Java script, ma ho un problme a di allineamento.
Potete vedere qua il tentativo:
http://www.orombelli.net/test-css/HTML/index.html
ed ecco qua il codice CSS che ho creato per il menu.
#doc {
width:76.92em;
*width:75.2em; /* IE */
width:1000px;
margin:auto;
text-align:left;
background-color: #fff;
}
.margini { padding: 6px }
#hd
{
display: block;
width: 988px;
/*height: 240px;*/
}
#hd,#bd {text-align:left;}
#tablist
{
padding: 6px 0px;
margin: 1px 0 0 0;
background-color: #4E4E4E;
background-image: url(../img/mainmenu_bgk_top.png);
background-repeat: repeat-x;
border-color: #999999 transparent #000000 transparent;
border-width: 1px 0 1px 0;
border-style: solid;
}
#tablist ul {float:right;}
#tablist li
{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a
{
text-decoration: none;
padding: 10px 5px 10px 5px;
margin: 0 0 0 0;
background-image: url(../img/mainmenu_separator.png);
background-repeat: no-repeat;
background-position: 0 12px;
}
#tablist li a:link, #tablist li a:visited
{
color: #eee;
font-weight: bold;
}
#tablist li a.current
{
background-color: #bafe39;
background-image: url(../img/mainmenu_bgk_2.png);
background-repeat: repeat-x;
background-position: 0 0;
color: #FFF;
border-color: #bafe39;
border-width: 1px 0 0 0;
border-style: solid;
}
#tabcontentcontainer
{
height: 15px;
padding: 6px;
margin: 0;
background-color: #bafe39;
background-image: url(../img/mainmenu_bgk_3.png);
background-repeat: repeat-x;
border-color: #bafe39 transparent #5fb43a transparent;
border-width: 1px 0 1px 0;
*border-width: 0 0 1px 0;
border-style: solid;
}
#tabcontentcontainer li
{
list-style: none;
display: inline;
margin: 0px;
padding: 0px;
}
#tabcontentcontainer li a
{
text-decoration: none;
padding: 3px 5px 3px 9px;
margin: 0;
background-image: url(../img/mainmenu_separator_2.png);
background-repeat: no-repeat;
background-position: 0 5px;
}
#tabcontentcontainer ul li a:hover {
text-decoration: underline;
color: #fff;
}
#tabcontentcontainer ul li a.link-partner-menu
{
background-color: #bafe39;
font-weight: normal;
font-size: 11px;
/*float: right;*/
margin: 0 5px 0 10px;
border-color: #FF6600;
border-width: 1px;
border-style: solid;
background-image: url(../img/sfondo_link_partner.jpg);
background-repeat: repeat-x;
background-position: 0 -4px;
color:#993300;
}
#tabcontentcontainer ul li a:hover.link-partner-menu
{
/*float: right;*/
border-color: #FFF;
border-width: 1px;
border-style: solid;
text-decoration: none;
color:#FFF;
}
#tabcontentcontainer li a:link, #tabcontentcontainer li a:visited
{
color: #000;
font-weight: bold;
}
.tabcontent{ display:none; }
.tabcontent .marginedx {float:left; margin:0 6px 0 0;}
.clearboth
{
clear: both;
margin: 0;
padding: 0;
}
qualche idea?
Potete vedere qua il tentativo:
http://www.orombelli.net/test-css/HTML/index.html
ed ecco qua il codice CSS che ho creato per il menu.
#doc {
width:76.92em;
*width:75.2em; /* IE */
width:1000px;
margin:auto;
text-align:left;
background-color: #fff;
}
.margini { padding: 6px }
#hd
{
display: block;
width: 988px;
/*height: 240px;*/
}
#hd,#bd {text-align:left;}
#tablist
{
padding: 6px 0px;
margin: 1px 0 0 0;
background-color: #4E4E4E;
background-image: url(../img/mainmenu_bgk_top.png);
background-repeat: repeat-x;
border-color: #999999 transparent #000000 transparent;
border-width: 1px 0 1px 0;
border-style: solid;
}
#tablist ul {float:right;}
#tablist li
{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a
{
text-decoration: none;
padding: 10px 5px 10px 5px;
margin: 0 0 0 0;
background-image: url(../img/mainmenu_separator.png);
background-repeat: no-repeat;
background-position: 0 12px;
}
#tablist li a:link, #tablist li a:visited
{
color: #eee;
font-weight: bold;
}
#tablist li a.current
{
background-color: #bafe39;
background-image: url(../img/mainmenu_bgk_2.png);
background-repeat: repeat-x;
background-position: 0 0;
color: #FFF;
border-color: #bafe39;
border-width: 1px 0 0 0;
border-style: solid;
}
#tabcontentcontainer
{
height: 15px;
padding: 6px;
margin: 0;
background-color: #bafe39;
background-image: url(../img/mainmenu_bgk_3.png);
background-repeat: repeat-x;
border-color: #bafe39 transparent #5fb43a transparent;
border-width: 1px 0 1px 0;
*border-width: 0 0 1px 0;
border-style: solid;
}
#tabcontentcontainer li
{
list-style: none;
display: inline;
margin: 0px;
padding: 0px;
}
#tabcontentcontainer li a
{
text-decoration: none;
padding: 3px 5px 3px 9px;
margin: 0;
background-image: url(../img/mainmenu_separator_2.png);
background-repeat: no-repeat;
background-position: 0 5px;
}
#tabcontentcontainer ul li a:hover {
text-decoration: underline;
color: #fff;
}
#tabcontentcontainer ul li a.link-partner-menu
{
background-color: #bafe39;
font-weight: normal;
font-size: 11px;
/*float: right;*/
margin: 0 5px 0 10px;
border-color: #FF6600;
border-width: 1px;
border-style: solid;
background-image: url(../img/sfondo_link_partner.jpg);
background-repeat: repeat-x;
background-position: 0 -4px;
color:#993300;
}
#tabcontentcontainer ul li a:hover.link-partner-menu
{
/*float: right;*/
border-color: #FFF;
border-width: 1px;
border-style: solid;
text-decoration: none;
color:#FFF;
}
#tabcontentcontainer li a:link, #tabcontentcontainer li a:visited
{
color: #000;
font-weight: bold;
}
.tabcontent{ display:none; }
.tabcontent .marginedx {float:left; margin:0 6px 0 0;}
.clearboth
{
clear: both;
margin: 0;
padding: 0;
}
qualche idea?