CSS:
#columnasupizq{
width: 170px;
height: 100%;
margin 0 auto;
float:left;
background-image: url("verde1.jpg");
border-style: outset; border-width: 2px;
margin-right:25px;
}
////////////
#menu{
margin-left: auto;
margin-right: auto;
width: 760px;
}
#menu {
text-align: center;
margin:0 auto;
}
#menu ul { list-style-type: none;
}
#menu ul li.nivel1 {
width: 155px;
}
#menu ul li.primera {
border-top: solid 1px #FFF;
}
#menu ul li a {
margin:0 auto;
display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
border-top: none;
padding: 8px;
}
#menu ul li:hover{
position: relative;
background-color: #6CC;
color: #000;
}
#menu ul li a:hover, #menu ul li:hover > a.nivel1{
background-color: #6CC;
color: #000;
}
#menu ul li a.nivel1{
display: block!important;
display: none;
}
#menu ul li ul{
display: none;
}
#menu ul li a:hover ul, #menu ul li:hover > ul {
display: block;
top:-1px!important;top: -31px;
}
CODIGO:
<div id="columnasupizq">
<center>
<br>
<div id="boton">
Menú
</div>
<br>
<div id="menu" center>
<ul>
<li class="nivel1 primera"><a href="#" class="nivel1">Ver mi huella digital</a>
<ul class="nivel2">
<li class="primera"><a href="#">Opción 1.1</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Enviarnos un archivo</a>
<ul class="nivel2">
<li class="primera"><a href="#" class="nivel1">Opción 2.1</a></li>
<li><a href="#">Opción 2.2</a></li>
<li><a href="#">Opción 2.3</a></li>
<li><a href="#">Opción 2.4</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Descargar un archivo</a>
<ul class="nivel2">
<li class="primera"><a href="#">Opción 3.1</a></li>
<li><a href="#">Opción 3.2</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Descargar programas</a>
<ul class="nivel2">
<li class="primera"><a href="#">Opción 4.1</a></li>
<li><a href="#">Opción 4.2</a></li>
<li><a href="#">Opción 4.3</a></li>
</ul>
</li>
</ul>
</div>
Llevo más de 2 días intentando centrarlo, y no tengo resultados, ayuda por favor.
usa as etiquetas GeSHi ubicada a la derecha arriba de los emoticonos para publicar codigo y que sea mas legible... pasa una captura de pantalla de lo que tienes y lo que quieres...
Siento no haber puesto esas etiquetas, no sabía donde estaban.
Respecto a lo de captura de pantalla no hay mucho que decir, puedo describir lo que ocurre perfectamente, es un div vertical con el menú desplegable en su interior, y el problema es que el menu no está centrado y se sale del div un poco por la derecha.
Agradecería muchísimo la ayuda, llevo 3 días bloqueado con esto y no hay manera.
para centrar un "div" utiliza esto:
por ejemplo
tienes esto :
#menu{
margin-left: auto;
margin-right: auto;
width: 760px;
}
para centrar ese div has esto :
#menu{
width: 760px;
left:50%;
margin-left:-380px;
}
te preguntaras por que 380 px, se toma de referencia el 'width' y de divide entre 2, el resultado es el que pondras en margin-left.
espero esto te sirva, saludos!
Cita de: dainodaibouken en 28 Febrero 2014, 19:15 PM
para centrar un "div" utiliza esto:
por ejemplo
tienes esto :
#menu{
margin-left: auto;
margin-right: auto;
width: 760px;
}
para centrar ese div has esto :
#menu{
width: 760px;
left:50%;
margin-left:-380px;
}
te preguntaras por que 380 px, se toma de referencia el 'width' y de divide entre 2, el resultado es el que pondras en margin-left.
espero esto te sirva, saludos!
No me funcionó, el menú sigue descentrado, este es el CSS donde defino al div en cuyo interior quiero centrar el menú:
#columnasupizq{
width: 170px;
height: 100%;
margin 0 auto;
float:left;
background-image: url("verde1.jpg");
border-style: outset; border-width: 2px;
margin-right:25px;
}Es decir tiene un ancho de 170px, lo que hago es abrir este div, y poner dentro en menu con center pero me aparece desplazado a la derecha y queda mitad dentro y mitad fuera. :(
te falta aplicar 'position' te recomiendo que uses absolute. y otra cosa es que al div que quieres centrar debe aplicarse lo que te dije por ejemplo tienes el div #columnasupizq y adentro de ese div tienes #menu, entonces tienes que aplicar left y margin-left a #menu acuerdate tambien de la position de #columnasupizq que sea absolute.
#columnasupizq{
position:absolute;
width: 170px;
height: 100%;
margin 0 auto;
float:left;
background-image: url("verde1.jpg");
border-style: outset; border-width: 2px;
margin-right:25px;
}
#menu{
position:absolute;
width: 760px;
left:50%;
margin-left:-380px;
}
Saludos!
Lo siento pero sigo sin tener resultados, me desplazo todos los demás div a la derecha, menos el menú que no cambio su posición ni el div superior izquierdo, agradezco tu ayuda quizás me lo consigas arreglar, yo estuve discurriendo 2 días y nada, no conseguí mover el dichoso menú.
Y aún sigo bloqueado, de todas formas gracias por tu ayuda dainodaibouken :/
OOOOOOOOOOOOOOHHHHHHHHHHHHHHHHHHHHHHJJJJJJJJJJJ
POR FINN!!!! LO CONSEGUÍÍÍ!!!! Fue un orgasmo cerebral ver como encajaba el menú dentro del div unos 300 intentos y resultados negativos.
Al final la clave estuvo en el margin-left:-20px;
#menu { text-align: center;
width: 760px;
margin-left:-20px;
}
Puedo incluso quitar eso de width, gracias por tu ayuda, aunque no me lo solucionaste directamente, me hicistes probar cosas nuevas e intentarlo una y otra vez de nuevo, gracias.
oye pero ahi no estas centrando xD, puede que en tu monitor se vea bien, pero si lo ves en algun otro monitor con diferente resolucion seguro se va a descuadrar y se vera mal todo D:!
pero que bien que ya te quedo ^____^~~
Saludos.
jajaja no lo había pensado pero GRACIAS por recordarmelo xD
Da igual, de momento lo voy a dejar aparcado un buen tiempo, antes tomo las medidas de la pantalla y resto lo que haga falta que volver a intentar centrar eso xD