centrare menu orizzontale con sottomenu

**omodeo** · 04-12-2011, 21:30

non riesco centrare il menu alla pagina, per tutti i browser e risoluzioni

questo è html:

<!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=utf-8" />
<title>onlinecasevacanze</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(function(){
$('.dropdown').mouseenter(function(){
$('.sublinks').stop(false, true).hide();

var submenu = $(this).parent().next();

submenu.css({
position:'absolute',
top: $(this).offset().top + $(this).height() + 'px',
left: $(this).offset().left + 'px',
zIndex:1000
});

submenu.stop().slideDown(300);

submenu.mouseleave(function(){
$(this).slideUp(300);
});
});
});
</script>

</head>

<body>

<div id="logo">
[img]img/logo.jpg[/img]
</div>
<div id="container">

<ul>[*]HOME

[/list]

<ul>
[*]CASEVACANZE
[/list]

<ul>[*]FOTO
[/list]

<ul>[*]GUIDE

<li class="sublinks">
EMILIA-ROMAGNA

TOSCANA
CAMPANIA
PUGLIA
SARDEGNA

[/list]

<ul>[*]SERVIZI
[/list]
<ul>[*]CONTATTI[/list]
</div>

</body>
</html>

questo è css :
@charset "utf-8";
/* CSS Document */
body {
margin:0px auto 0px auto;
background-color:#FFF;
font-family:Verdana, Geneva, sans-serif;

}

#logo {
float:left;
margin:15px 0px 0px 41px;
}

#container
{

float:left;
text-align:center;
margin:0px auto 0px auto;
width:100%;

}

ul
{
list-style:none;
}

ul li
{
display:inline;
float:left;

}

ul li a
{
color: #F60;
background:#FFF;
margin-right:5px;
font-weight:bold;
font-size:12pt;
font-family:verdana;
text-decoration:none;
display:block;
width:135px;
height:25px;
line-height:25px;
text-align:center;
border: 1px solid #560E00;
}

ul li a:hover
{
color:#cccccc;
background: #F63;
font-weight:bold;
text-decoration:none;
display:block;
width:135px;
text-align:center;
border: 1px solid #000000;

}

ul li.sublinks a
{
color:#F60;
background:#FFF;
border-bottom:1px solid #cccccc;
font-weight:normal;
text-decoration:none;
display:block;
width:150px;
text-align:center;

}

ul li.sublinks a:hover
{
color:#000000;
background:#F63;
font-weight:normal;
text-decoration:none;
display:block;
width:150px;
text-align:center;

}

ul li.sublinks
{
display:none;

}

come devo procedere ?

grazie

**marty89** · 05-12-2011, 19:45

Ciao, una soluzione potrebbe essere questa.
HTML:

codice:

<div id="container">
    <div id="menu">
         ...
         codice menu
         ...
    </div>
</div>

CSS:

codice:

#menu{
    margin: 0 auto;
    width: 860px;
}

ul{
    ...
    margin: 0;
    padding: 0;
}

Spero che sia chiaro

**omodeo** · 06-12-2011, 09:44

ok sul css margin 0 è 0px ?

grazie

**ldetomi** · 06-12-2011, 10:57

0 non ha bisogno di unità di misura perché... è sempre 0!!!

sia che siano px, em, pt, %, ecc.....

**omodeo** · 06-12-2011, 14:51

ok.
ma quando inserisco 2 immagini una accanto all'altra affinche tutti i browser e risoluzioni la vedono centrati quali sono lel proprietà su css ?

**ldetomi** · 06-12-2011, 15:11

Devi creare un contenitore che contenga le 2 immagini e poi centri quello con "margin:0 auto;"

Discussione: centrare menu orizzontale con sottomenu

Strumenti discussione

Ricerca discussione

Visualizza

centrare menu orizzontale con sottomenu

Permessi di invio