Salve a tutti, sono nuovo del forum, volevo chiedervi gentilmente se potevate aiutarmi.
In pratica ho realizzato un menu verticale con una lista non ordinata (Ul), il problema sta nel fatto che non riesco ad attaccarlo al margine sinistro del div che lo contiene, nonostante utilizzi il margin-left: 0px;
Sapreste dirmi quale sia il motivo?
grazie mille.
saluti
Se non ci fai vedere cosa hai fatto solo il mago Merlino può aiutarti!
“Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.
Giovanni Falcone
(--index.html--)
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="stile.css" type="text/css" />
<meta charset="utf-8">
<title>Documento senza titolo</title>
</head>
<body>
<table width="100%" border="1">
<tbody>
<tr>
<td width="5%" height="235"> </td>
<td width="90%" align="center" valign="top">
<div class="immaginetestata"><img src="logo.gif" width="1000" height="196" alt=""/></div>
<!--inizio menu del sito-->
<ul id="menu">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Chi siamo</a></li>
<li><a href="#">Promozioni</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contatti</a></li>
</ul>
<!--fine menu del sito-->
</td>
<td width="5%"> </td>
</tr>
<tr>
<td width="5%" height="328"> </td>
<td>
<!--inizio menu verticale-->
<div id="contenitoremenuverticale">
<ul id="menuverticale">
<li><a href="#">Servizi di pulizia</a></li>
<li><a href="#">Derattizzazione</a></li>
<li><a href="#">Facchinaggio</a></li>
<li><a href="#">Sistemazione e manutenzione</a></li>
<li><a href="#">Lavori edili e costruzioni</a></li>
<li><a href="#">Portierato</a></li>
</ul>
<img src="preventivo-01.jpg" width="200" height="141" alt=""/> </div>
<!--fine menu verticale-->
</td>
<td width="5%"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>
(stile.css)
/* CSS Document */
body {background-color: #5B9323;
margin: 20px 0 0 0;
padding: 0 0 0 0;
}
.menu {
background-color: #FFFFFF;
width: 1200px;
}
ul#menu {
position:absolute;
top: 221px;
font-family: Verdana, sans-serif;
font-size: 11px;
margin: 0;
padding: 0;
list-style: none;
}
ul#menu li {
background-color: #FFF;
border-bottom: 5px solid #93C021;
display: block;
width: 200px;
height: 30px;
float:left;
/* elementi su singola riga */
}
ul#menu li a {
color: #000;
display: block;
font-weight: bold;
line-height: 30px;
text-decoration: none;
width: 150px;
height: 30px;
text-align: center;
}
ul#menu li.active, ul#menu li:hover {
background-color: #93C021;
border-bottom: 5px solid #B7B2AD;
}
ul#menu li.active {
margin-left: 70px;
}
<!--inizio menuverticale-->
ul#menuverticale {
font-family: Verdana, sans-serif;
font-size: 20px;
margin-left: 0px;
padding-left: 0px;
}
ul#menuverticale li {
background-color: #FFF;
border-bottom: 5px solid #93C021;
display:block;
width: 200px;
height: 30px;
margin-left: 0px;
top: 50px;
/* elementi su singola riga */
}
ul#menuverticale li a {
font-size: 15px;
color: #000;
display: block;
font-weight: bold;
line-height: 15px;
text-decoration: none;
width: 200px;
height: 30px;
padding-left: 3px;
padding-top: 8px;
margin-left: 0px;
}
ul#menuverticale li.active, ul#menuverticale li:hover {
background-color: #B7B3AE;
border-bottom: 5px solid #93C021;
margin-left: 23px;
}
ul#menuverticale li:hover {
margin-left: 20px;
font-style: normal;
}
#contenitoremenuverticale {
background-color: #FFFFFF;
margin-left: 70px;
margin-top: 0px;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 10px;
width: 995px;
height: 500px;
position: absolute;
top: 256px;
text-align:left;
float:left;
}
Questo è il codice html e css.
@carlomarangoni Potrebbe gentilmente aiutarmi? Grazie mille :-)
ho risolto, mettendo
*{
margin: 0;
padding: 0;
}
Grazie comunque...!
Permessi di invio
Rispondi quotando