Come al solito premetto che mi sto avvicinando da poco al mondo CSS. Ho scaricato un tutorial per creare un menù con roll-over formato da 5 tasti, adesso volevo vedere di riuscire a modificarne le dimensioni e portare il numero di tasti da 5 a 4. Sono andato un po' ad intuito modificando i vari valori, però ciccia. Non visualizzo più nulla.
Di seguito i tag CSS utilizzato e quello XHTML usato sulle quattro pagine. Qualche consiglio?
body {
background: #FFFFFF
}
div#nav {
margin: 50px 0 0 50px
}
div#nav ul {
width: 220px;
height: 15px;
overflow: hidden;
list-style-type: none;
padding: 0;
background:url(h-matrix.gif) no-repeat 0 -15px
}
div#nav li {
margin: 0;
padding: 0
}
div#nav li,div#nav a {
float: left;
width: 55px;
height: 15px
}
div#nav a{
text-indent: -9000px;
text-decoration: none;
padding: 15px 0 0 0;
overflow: hidden;
height: 0px !important;
height/**/: 15px;
background-image: url(h-matrix.gif)
}
li#m01 a{background-position: 0px 0px}
li#m01 a:hover{background-position: 0 -15px}
body#01 li#m01 a{background-position: 0 -30px}
li#m02 a{background-position: -55px 0px}
li#m02 a:hover{background-position: -55px -15px}
body#02 li#m02 a{background-position: -55px -30px}
li#m03 a{background-position: -110px 0px}
li#m03 a:hover{background-position: -110px -15px}
body#03 li#m03 a{background-position: -110px -30px}
li#m04 a{background-position: -165px 0px}
li#m04 a:hover{background-position: -165px -15px}
body#04 li#m04 a{background-position: -165px -30px}
Questo il codice associato ai 4 files HTML:
<head>
<title>Prova LayOut</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="lay.css" rel="stylesheet" type="text/css" />
</head>
<body id="home" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="nav">
<ul>
<li id="m01">01
<li id="m02">02
<li id="m03">03
<li id="m04">04[/list]
</div>
</body>
Rispondi quotando