Problema centrar menu vertical desplegable

Iniciado por Kaxperday, 28 Febrero 2014, 09:06 AM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

Kaxperday

28 Febrero 2014, 09:06 AM Ultima modificación: 28 Febrero 2014, 18:25 PM por Kaxperday
CSS:

Código (css) [Seleccionar]

#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:

Código (html4strict) [Seleccionar]

<div id="columnasupizq">

<center>

<br>

<div id="boton">
Men&uacute;
</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.
Cuando el poder económico parasita al político ningún partido ni dictador podrá liberarnos de él. Se reserva el 99% ese poder.

engel lex

#1
28 Febrero 2014, 15:20 PM
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...
El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.

Kaxperday

#2
28 Febrero 2014, 18:27 PM Ultima modificación: 28 Febrero 2014, 18:30 PM por Kaxperday
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.
Cuando el poder económico parasita al político ningún partido ni dictador podrá liberarnos de él. Se reserva el 99% ese poder.

dainodaibouken

#3
28 Febrero 2014, 19:15 PM
para centrar un "div" utiliza esto:

por ejemplo
tienes esto :
Código (css) [Seleccionar]
#menu{
margin-left: auto;
margin-right: auto;
width: 760px;
}

para centrar ese div has esto :

Código (css) [Seleccionar]
#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!

Kaxperday

#4
28 Febrero 2014, 19:28 PM
Cita de: dainodaibouken en 28 Febrero 2014, 19:15 PM
para centrar un "div" utiliza esto:

por ejemplo
tienes esto :
Código (css) [Seleccionar]
#menu{
margin-left: auto;
margin-right: auto;
width: 760px;
}

para centrar ese div has esto :

Código (css) [Seleccionar]
#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ú:

Código (css) [Seleccionar]
#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. :(
Cuando el poder económico parasita al político ningún partido ni dictador podrá liberarnos de él. Se reserva el 99% ese poder.

dainodaibouken

#5
28 Febrero 2014, 19:42 PM
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.

Código (css) [Seleccionar]
#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;
}

Código (css) [Seleccionar]
#menu{
position:absolute;
width: 760px;
left:50%;
margin-left:-380px;
}

Saludos!

Kaxperday

#6
28 Febrero 2014, 20:22 PM
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 :/
Cuando el poder económico parasita al político ningún partido ni dictador podrá liberarnos de él. Se reserva el 99% ese poder.

Kaxperday

#7
28 Febrero 2014, 20:41 PM
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;

Código (css) [Seleccionar]
#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.
Cuando el poder económico parasita al político ningún partido ni dictador podrá liberarnos de él. Se reserva el 99% ese poder.

dainodaibouken

#8
28 Febrero 2014, 20:55 PM
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.

Kaxperday

#9
28 Febrero 2014, 21:23 PM
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
Cuando el poder económico parasita al político ningún partido ni dictador podrá liberarnos de él. Se reserva el 99% ese poder.
Imprimir
Ir Arriba Páginas1
Acciones del Usuario