Foros del Web » Creando para Internet » CSS »

Dando forma a una lista: se me suben encima las opciones!!

Estas en el tema de Dando forma a una lista: se me suben encima las opciones!! en el foro de CSS en Foros del Web. Hola! estoy haciendo un menu con listas y dandole forma con CSS, el problema es que necesito un atributo para que no se me solapen ...
  #1 (permalink)  
Antiguo 15/02/2010, 03:29
 
Fecha de Ingreso: marzo-2008
Mensajes: 170
Antigüedad: 9 años, 9 meses
Puntos: 0
Dando forma a una lista: se me suben encima las opciones!!

Hola! estoy haciendo un menu con listas y dandole forma con CSS, el problema es que necesito un atributo para que no se me solapen y no doy con el, os enseño el codigo:

Código:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
}
ul {
	list-style: none;
}
ol {
	list-style: none;
}
ul li a {
	float: none;
	position:inherit;
	display:block;
	width:180px;
	height: 26px;
	text-decoration:none;
	vertical-align: middle;
}
ul ol li a {
	float:left;
	display:block;
	width:180px;
	height: 22px;
	text-decoration:none;
}
-->
</style></head>

<body>

	<ul>
    	<li><a href="#">MENU 1</a></li>
        	<ol>
            	<li><a href="#">LINK 1</a></li>
                <li><a href="#">LINK 2</a></li>
                <li><a href="#">LINK 3</a></li>
                <li><a href="#">LINK 4</a></li>
      		</ol>
         <li><a href="#">MENU 2</a></li>
         	<ol>
            	<li><a href="#">LINK 1</a></li>
                <li><a href="#">LINK 2</a></li>
                <li><a href="#">LINK 3</a></li>
      		</ol>
         <li><a href="#">MENU 3</a></li>
         	<ol>
            	<li><a href="#">LINK 1</a></li>
                <li><a href="#">LINK 2</a></li>
                <li><a href="#">LINK 3</a></li>
      		</ol>
   </ul>

</body>
Cuando lo ejecuto me sale asi:



Sabeis como puedo hacer que salga todo bien alineado? graciaS!
  #2 (permalink)  
Antiguo 15/02/2010, 07:27
Avatar de Kaze71  
Fecha de Ingreso: enero-2010
Mensajes: 44
Antigüedad: 7 años, 10 meses
Puntos: 4
Respuesta: Dando forma a una lista: se me suben encima las opciones!!

Prueba con cambiar float:none; por clear:both;

Código:
ul li a {
  clear:both;
  position:inherit;
  display:block;
  width:180px;
  height: 26px;
  text-decoration:none;
  vertical-align: middle;
}
Saludos;
  #3 (permalink)  
Antiguo 15/02/2010, 07:32
Avatar de xcoltx  
Fecha de Ingreso: diciembre-2008
Mensajes: 65
Antigüedad: 9 años
Puntos: 0
Respuesta: Dando forma a una lista: se me suben encima las opciones!!

quizas te sirva este.. no te entendi mucho si querias que aparecieran abajo, o al lado?.. que se muestren los submenus o que se oculten? de todas formas prueba este script (no funciona para IE a menos que uses un "hack" para los menus ocultos.)


Código:
<style type="text/css">

/*Eliminar las sangrias*/
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	}
	
/*Posicion relativa para los menus*/
ul li {
	position: relative;
	}
	
/*Posicion absoluta para los submenus y posicionar a la derecha del menu*/	
li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}
	
/*Estilo a los enlaces*/	
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

/*Estilo al cerrar menu*/	
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	border-bottom: 1px solid #ccc;
	}

li:hover ul { display: block;}
a:hover{ background-color:#666666; color:#FFFFFF;}


</style>

	<ul>
    	<li><a href="#">MENU 1</a>
        	<ul>
            	<li><a href="#">LINK 1</a></li>
                <li><a href="#">LINK 2</a></li>
                <li><a href="#">LINK 3</a></li>
                <li><a href="#">LINK 4</a></li>
      		</ul>
         </li>
         
         <li><a href="#">MENU 2</a>
         	<ul>
            	<li><a href="#">LINK 1</a></li>
                <li><a href="#">LINK 2</a></li>
                <li><a href="#">LINK 3</a></li>
      		</ul>
         </li>
         
         <li><a href="#">MENU 3</a>
         	<ul>
            	<li><a href="#">LINK 1</a></li>
                <li><a href="#">LINK 2</a></li>
                <li><a href="#">LINK 3</a></li>
      		</ul>
         </li>
   </ul>
Espero que te sirva.
  #4 (permalink)  
Antiguo 15/02/2010, 08:16
 
Fecha de Ingreso: marzo-2008
Mensajes: 170
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Dando forma a una lista: se me suben encima las opciones!!

Primero agradeceros por responderme

Igual me explique mal, mirad la imagen:



Quiero que salga asi:


MENU 1

LINK1 LINK2 LINK3

MENU 2

LINK1 LINK2 LINK3

MENU 3

LINK1 LINK2 LINK3


Que salga asi por pantalla resptando los margenes, ahora mismo, si os fijais, a partir de MENU 2 se montan unas encima de otras :(
  #5 (permalink)  
Antiguo 15/02/2010, 08:37
Avatar de Kaze71  
Fecha de Ingreso: enero-2010
Mensajes: 44
Antigüedad: 7 años, 10 meses
Puntos: 4
Respuesta: Dando forma a una lista: se me suben encima las opciones!!

Prueba con algo así:

Código HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
body,td,th {
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
}
ul {
    list-style: none;
}
ol {
    list-style: none;
}
ul li{
    clear:both;
}
ul li a {
    position:inherit;
    display:block;
    width:180px;
    height: 26px;
    text-decoration:none;
    vertical-align: middle;
}
ul ol li a {
    float:left;
    display:block;
    width:180px;
    height: 22px;
    text-decoration:none;
}
-->
</style></head>

<body>

    <ul>
        <li><a href="#">MENU 1</a>
            <ol>
                <li>
                    <a href="#">LINK 1</a>
                    <a href="#">LINK 2</a>
                    <a href="#">LINK 3</a>
                </li>
            </ol>
         </li>
        <li><a href="#">MENU 2</a>
            <ol>
                <li>
                    <a href="#">LINK 1</a>
                    <a href="#">LINK 2</a>
                    <a href="#">LINK 3</a>
                </li>
            </ol>
         </li>
        <li><a href="#">MENU 3</a>
            <ol>
                <li>
                    <a href="#">LINK 1</a>
                    <a href="#">LINK 2</a>
                    <a href="#">LINK 3</a>
                </li>
            </ol>
         </li>
   </ul>

</body> 
  #6 (permalink)  
Antiguo 15/02/2010, 12:11
 
Fecha de Ingreso: marzo-2008
Mensajes: 170
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Dando forma a una lista: se me suben encima las opciones!!

Cita:
Iniciado por Kaze71 Ver Mensaje
Prueba con algo así:
Jeje P E R F E C T O.

Que Crack!!!!!!!

Voy a ojear bien el codigo para ver que tenia mal, gracias por la ayuda a todos

Etiquetas: encima, lista, opciones, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:29.