Foros del Web » Creando para Internet » CSS »

Ayuda menu lista 100% ancho

Estas en el tema de Ayuda menu lista 100% ancho en el foro de CSS en Foros del Web. Buen día. Dejo el presente codigo Codigo CSS Código: ul.mnu000 { list-style:none; text-align:center; width:100%; margin:0; padding:0; } li.mnu001 { background-color:#D8D8D8; border:1px solid #000000; padding: 2px ...
  #1 (permalink)  
Antiguo 19/10/2010, 12:47
 
Fecha de Ingreso: octubre-2003
Ubicación: lima
Mensajes: 57
Antigüedad: 14 años, 2 meses
Puntos: 0
Ayuda menu lista 100% ancho

Buen día.
Dejo el presente codigo
Codigo CSS
Código:
ul.mnu000 {
  list-style:none;
  text-align:center;
  width:100%;  
  margin:0;	padding:0;
}

li.mnu001 { 
  background-color:#D8D8D8; 
  border:1px solid #000000;
  padding: 2px 2px 2px 5px;
  float:left;
}

.mnu002 {
  background-color:#848484;
  color: #ffffff; 
  display:none; 
  position:absolute;
  list-style:none;
  border:1px solid #000000;
  padding: 10px 2px 1px 5px;
}
Y el del menu en si.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">

<script>	
	function mnu000(ide000,ver000) {
		obj = document.getElementById(ide000);
		if(ver000)		
			obj.style.display = 'block';
		else
			obj.style.display ='none';
	}		
</script>
<link rel="stylesheet" type="text/css" href="index.css">
<body>
<ul class="mnu000">
  <li class="mnu001">MNU100</li>
  <li class="mnu001" onMouseOut="mnu000('mnu200',false);" onMouseOver="mnu000('mnu200',true);">MNU200
    <ul id="mnu200" onMouseOut="mnu000('mnu200',false);" onMouseOver="mnu000('mnu200',true);" class="mnu002">
      <li>MNU200</li>
      <li>MNU210</li>
      <li onMouseOut="mnu000('mnu220',false);" onMouseOver="mnu000('mnu220',true);">MNU220
        <ul id="mnu220" onMouseOut="mnu000('mnu220',false);" onMouseOver="mnu000('mnu220',true);" class="mnu002">
          <li>MNU220</li>
          <li>MNU221</li> 
          <li>MNU222</li>
        </ul>
      </li>
  </ul>
  </li>
<li class="mnu001">MNU300</li>
</ul>
</body>
</html>
Me gusta como quedo, pero el menu solo usa hasta donde llega, quisiera que use el 100% del ancho, he intentado varias formas, pero no me sale, haber si alguien me puede dar una mano.
__________________
GUMER FERNANDEZ HUATUCO
--------------------------------------
Solo hay un dio$
  #2 (permalink)  
Antiguo 19/10/2010, 13:38
Avatar de lvfp  
Fecha de Ingreso: septiembre-2005
Ubicación: España
Mensajes: 337
Antigüedad: 12 años, 3 meses
Puntos: 4
Respuesta: Ayuda menu lista 100% ancho

¿Has probado lo que te dije de li .mnu001{width:33%}?
  #3 (permalink)  
Antiguo 19/10/2010, 13:43
 
Fecha de Ingreso: octubre-2003
Ubicación: lima
Mensajes: 57
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: Ayuda menu lista 100% ancho

Si claro, funciona, pero ... el problema es que es un menu para una pagina y no se cuantos iems van a tener... y si son cuatro seria 25% y si son 10 sera un 9% algo un poco mas facil como cuando pones una table y lepones width:100%; para que de el espacio al 100% de la lista pense en esto
.lu mnu001 {width:100% } Pero no me furuncia...
__________________
GUMER FERNANDEZ HUATUCO
--------------------------------------
Solo hay un dio$
  #4 (permalink)  
Antiguo 19/10/2010, 15:14
 
Fecha de Ingreso: octubre-2003
Ubicación: lima
Mensajes: 57
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: Ayuda menu lista 100% ancho

UNA GRAN DUDA.
E estado haciendo este pequeño menu, en iexplorer 8, me salia muy bien, la lista debajo de la otra, y me salia muy bien, pero ahora no me sale asi, y exactamente no se por que ...

Le he echo estas modificación en el CSS
Código:
.mnu000 {
  list-style:none;
  margin:0px;
  padding:0px;	
}

li.mnu001 { 
  background-color:#D8D8D8; 
  border:1px solid #000000;
  padding: 1px 1px 1px 10px;
  float:left;
}

.mnu002 {
  background-color:#848484;
  color: #ffffff; 
  display:none; 
  position:absolute;
  border:1px solid #000000;
  padding: 5px 2px 1px 5px;
}
Y en la pagina ninguna..
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">

<script>	
	function mnu000(ide000,ver000) {
		obj = document.getElementById(ide000);
		if(ver000)		
			obj.style.display = 'block';
		else
			obj.style.display ='none';
	}		
</script>
<link rel="stylesheet" type="text/css" href="index.css">
<body>
<ul class="mnu000">
  <li class="mnu001">MNU100</li>
  <li class="mnu001" onMouseOut="mnu000('mnu200',false);" onMouseOver="mnu000('mnu200',true);">MNU200
    <ul id="mnu200" onMouseOut="mnu000('mnu200',false);" onMouseOver="mnu000('mnu200',true);" class="mnu002">
      <li>MNU200</li>
      <li>MNU210</li>
      <li onMouseOut="mnu000('mnu220',false);" onMouseOver="mnu000('mnu220',true);">MNU220
        <ul id="mnu220" onMouseOut="mnu000('mnu220',false);" onMouseOver="mnu000('mnu220',true);" class="mnu002">
          <li>MNU220</li>
          <li>MNU221</li> 
          <li>MNU222</li>
        </ul>
      </li>
    </ul>
  </li>
<li class="mnu001">MNU300</li>
</ul>

</body>
</html>
Lo que sale ahora es la lista muy a la derecha, pero no se por donde.
__________________
GUMER FERNANDEZ HUATUCO
--------------------------------------
Solo hay un dio$

Etiquetas: ancho, lista
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 20:33.