Centrar menu

[60NZ4]

Hola amigos, tengo un problema con mi menu, ahora añado el codigo, pero basicamente es que me sale pegado a la izquierda y me gustaria que saliese centrado, pero conservando la estructura de que ocupe el 100% del ancho, seria mas o menos asi


Home|About|...|...---------------------------

y me gustaria que se centrase de esta forma

-------Home|About|...|...|...|-----------


no sabia como explicarlo espero que se entienda claro

aqui adjunto el css

Código CSS:

/*------------------------------------------------------------------*/
/*-----------------------------menu---------------------------------*/
/*------------------------------------------------------------------*/
        
#dhtmlgoodies_menu li a {
                height:30px;
                width:100px;  
                text-decoration: none;
                display: block;
                padding: 0 20px;
                line-height: 35px;
                color: #FFF;
            }
 
#dhtmlgoodies_menu li a:hover, #dhtmlgoodies_menu li.active a {
                background-color: #f5f5f5;
                border-bottom: 2px solid #DDD;
                color: #999;
}
 
#dhtmlgoodies_menu ul li ul{
display:none;
}
 
/* Submenu */
#dhtmlgoodies_menu ul{
border:1px solid #000;
background-color:#666;
padding:0px;
font-weight:bold;
list-style:none;
}
 
#dhtmlgoodies_menu ul.menuBlock1{ /* Barra de menú - elementos del menu principal*/
border:0px;
padding:1px;
border:1px solid #000;
background-color:#666;
overflow:visible;
}
 
#dhtmlgoodies_menu ul.menuBlock2{ /* Barra de menú - elementos del menu principal*/
border:0px;
padding:0px;
border:1px solid #000;
}
#dhtmlgoodies_menu a{
color: #FFF;
text-decoration:none;
padding-left:2px;
padding-right:2px;
}
 
/* Estilos del menú principal. El que esta siempre visible */
 
#dhtmlgoodies_menu .currentDepth1{
padding-left:5px;
padding-right:5px;
border:1px solid #666;
}
#dhtmlgoodies_menu .currentDepth1over{
padding-left:5px;
padding-right:5px;
background-color:#eee;
border:1px solid #000;
}
#dhtmlgoodies_menu .currentDepth1 a{
font-weight:bold;
}
#dhtmlgoodies_menu .currentDepth1over a{ 
color:#666;
font-weight:bold;
}
 
 
 
/*------------------------------------------------------------------*/
/*-----------------------------fin-menu-----------------------------*/
/*------------------------------------------------------------------*/
 

habia probado a añadir esto

#dhtmlgoodies_menu {
text-align:center;
}
pero no hace nada, y al final lo que he echo a sido en el html poner esto:

Código HTML:

<div id="dhtmlgoodies_menu">
            
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Products</a>
                            
                    </ul>
                
        </div>
 

asi me sale pero no se centra, tambien he probado ha hacerlo con una tabla de esta forma

Código HTML:

<div id="dhtmlgoodies_menu">
                <table border="0" cellpadding="0" cellspacing="0" style="text-align:center">        
                <tr><td>    
                
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Products</a>
                            
                    </ul>
</td></tr>
                </table>    
                
        </div>
 

De esta forma si me sale centrado pero solo los elementos del menu, no se ve el fondo de la linea entera que es lo que yo quiero que se vea...

es decir se centrado pero asi

Home|About|Services|Products
cuando yo queria asi

--------Home|About|Services|Products-------

----- se entiende que es la parte negra del menu (quien haya probado el codigo sabra lo que digo XD)

me trae loco esto amigos, ¿saben que es lo que tengo que tocar?

gracias :D

[Bokoa]

Debes ponerle el width que desees y un margin:0 auto; a div#dhtmlgoodies_menu

[60NZ4]

he metido esto

Código CSS:

#dhtmlgoodies_menu {
                width:50%;
                margin:0 auto;
            }
 

pero no resulta, hace precisamente lo dicho, encoje la banda que hablaba negra -----menu----- yo quiero eso..con lo que tu me dices solo sale el menu centrado y pierde la banda negra a todo el ancho de la pagina...no se si se entiende bien lo de los --- es la simulacion de la banda negra si habeis probado el codigo sabreis de que hablo

[Bokoa]

No se si te has fijado que tienes muchos CSS que no están en el HTML, por lo que parece faltar código. Voy a echarle un vistazo de todas formas.

EDITO:

Debes añadir estos dos CSS

Código:

#dhtmlgoodies_menu {
width:100%;
margin:0 auto;
padding:0;
text-align:center;
}

#dhtmlgoodies_menu ul li{
display:inline;
}

y quitar display: block; de #dhtmlgoodies_menu li a.


Un saludo.

[60NZ4]

lo he probado, pero no se ve bien, y no me lo centra, ¿a que te refieres con lo de que tengo mucho css que no esta en el html?

[Bokoa]

Me refiero a que por ejemplo

Código:

#dhtmlgoodies_menu .currentDepth1 a{
font-weight:bold;
}

no existe la clase .currentDepth1 en ningun sitio, al menos en la parte de codigo que me has pasado, y asi muchas otras.

En cuanto a lo de que no se te centra, lee bien mi mensaje anterior y sigue las instrucciones porque va perfectamente.

[kseso?]

Mire a ver si este artículo encuentra alguna forma de centrado que le ayude.

[60NZ4]

@Bokoa lo he mirado bien, no habia quitado el display:block; ya me sale bien , @Keseso? la mirare para ver si le puedo sacar algo muchas gracias a los dos