menu list con %

DragonX · #1 (**permalink**) 03/01/2007, 12:07

Hola amigos, les cuento un poco que estoy haciendo.....

estoy armando un menu con un submenu descolgable, por ahora todo anda de maravillas.....hasta aca

Código PHP:

  display: block;

width: 160px; /*width del sub menu*/

color: white;

text-decoration: none;

text-align: left;

padding: 1px 5px;

border: 1px solid #ffffff;

}

si se fijan en esta parte del código width: 160px; /*width del sub menu*/ le esta dando el ancho al submenu, lo que provoca que items de más de dos palabras los acomode en dos líneas y yo no quiero eso.....quiero que queden todos en una línea.....¿me explico?

Como hago esto?
mil gracias
DX

buzu · #2 (**permalink**) 03/01/2007, 13:05

bah.... dale mas de width y listo o usa   o overfolw , por cierto eso no es php es css

Mikmoro · #3 (**permalink**) 03/01/2007, 13:33

¿Has probado a quitarle el width? Si lo pones porque es el ancho de menu, no podrás evitar que salte a dos líneas. Una de dos; o se amplia con el texto o se conserva el ancho del menu, pero las dos cosas a la vez no tiene sentido. Si le quitas el width, lo normal es que la línea se alargue sin saltar todo lo que le permita el contenedor donde esté ubicada.

Mikel.

DragonX · #4 (**permalink**) 03/01/2007, 13:40

si le quito el width me hace los botones del largo que necesito, pero en lugar de ponerlos uno al lado del otro, los coloca uno debajo del otro

DragonX · #5 (**permalink**) 03/01/2007, 14:15

Estoy armando un sitio y por primera vez voy a armarlo íntegramente en CSS. Se me está complicando y mucho….es por eso que recurro a ustedes, si, si ya se…prometo aprender lo más rápido posible, pero ahora los necesito.

Les dejo como primer paso el diseño al que quiero llegar:

Como veran es un diseño sencillo. Centrado, con una imágen como cabezal y el menu debajo de la misma.

A continuación les dejo el código HTML que estoy utilizando

Código HTML:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
		if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
			ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
			ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
		}
		else{ //else if this is a sub level menu (ul)
		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    	ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
		}
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.visibility="visible"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.visibility="hidden"
    }
    }
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)

</script>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contenedor"> 
  <div class="suckertreemenu"> 
    <ul id="treemenu1">
      <li><a href="#">inicio</a></li>
      <li><a href="#">¿qué es?</a> 
        <ul>
          <li><a href="#">definicio</a></li>
          <li><a href="#">objetivos</a></li>
          <li><a href="#">antecedentes</a></li>
          <li><a href="#">mapa proniño</a></li>
          <li><a href="#">educación</a></li>
          <li><a href="#">asesores</a></li>
          <li><a href="#">colaboradores</a></li>
          <li><a href="#">ong's proniño</a></li>
        </ul>
      </li>
      <li><a href="#">¿qué hacemos?</a> 
        <ul>
          <li><a href="#">actividades</a></li>
          <li><a href="#">generalidades</a></li>
          <li><a href="#">ejes de intervención</a></li>
          <li><a href="#">escuelas</a></li>
          <li><a href="#">casos reales</a></li>
          <li><a href="#">resultados</a></li>
        </ul>
      </li>
      <li><a href="#">trabajo infantil</a> 
        <ul>
          <li><a href="#">la problemática</a></li>
          <li><a href="#">el mundo</a></li>
          <li><a href="#">latinoamérica</a></li>
          <li><a href="#">argentina</a></li>
          <li><a href="#">derecho de los niños</a></li>
          <li><a href="#">sitios relacionados</a></li>
        </ul>
      </li>
      <li><a href="#">protrabajo</a> 
        <ul>
          <li><a href="#">catálogo proniño</a></li>
          <li><a href="#">generalidades</a></li>
          <li><a href="#">acciones</a></li>
          <li><a href="#">resultados</a></li>
        </ul>
      </li>
      <li><a href="#">centro documental</a> 
        <ul>
          <li><a href="#">noticiaso</a></li>
          <li><a href="#">publicaciones</a></li>
          <li><a href="#">act. de difunsión</a></li>
          <li><a href="#">premios y recomendaciones</a></li>
          <li><a href="#">billiken</a></li>
          <li><a href="#">ensayos</a></li>
          <li><a href="#">galería de imágenes</a></li>
          <li><a href="#">enlaces de interés</a></li>
        </ul>
      </li>
      <li><a href="#">contactanos</a></li>
    </ul>
    <br style="clear: left;" />
  </div>
</div>
</body>
</html>

Ahora les pongo el código CSS

Código PHP:

  Html,Body {

            background-color: #E7E7E7;

            text-align: center;

            width:100%;

            margin:0px;

            padding:0px;

            border:0px;

            margin-top:0px;

}

#contenedor {

    background: url(imagenes/fondo.gif);

    background-repeat: repeat-y;

    width: 100%;

    height: 100%;

}        

.suckertreemenu ul{

             margin: 0;

             padding: 0;

             list-style-type: none;

}

/*Top level list items*/

.suckertreemenu ul li{

    position: relative;

    display: inline;

    float: left;

    background-color: #7CA403; /*overall menu background color*/

}

/*Top level menu link items style*/

.suckertreemenu ul li a{

             display: block;

             width: 140;

             padding: 1px 8px;

             border-left: 0px;

             border-bottom: 1px solid #ffffff;

             border-right: 1px solid #ffffff;

             border-top: 0px;

             font-family:"Arial","serif";

             text-transform:uppercase;

             font-size: 12px;

             text-align: center;

             text-decoration: none;

             color: white;

}    

/*1st sub level menu*/

.suckertreemenu ul li ul{

             left: 0;

             position: absolute;

             top: 1em; /* no need to change, as true value set by script */

             display: block;

             visibility: hidden;

}

/*Sub level menu list items (undo style from Top level List Items)*/

.suckertreemenu ul li ul li{

             display: list-item;

             float: none;

}

/*All subsequent sub menu levels offset after 1st level sub menu */

.suckertreemenu ul li ul li ul{ 

             left: 159px; /* no need to change, as true value set by script */

             top: 0;

}

/* Sub level menu links style */

.suckertreemenu ul li ul li a{

             display: block;

             width: 160px; /*width of sub menu levels*/

             color: white;

             text-decoration: none;

             text-align: left;

             padding: 1px;

             text-transform:capitalize;

             border-left: 1px solid #ffffff;

             border-bottom: 1px solid #ffffff;

             border-right: 1px solid #ffffff;

             border-top: 0px;

}

.suckertreemenu ul li a:hover{

             background-color: #506B00;

             color: white;

}

/*Background image for top level menu list links */

.suckertreemenu .mainfoldericon{

             background: #7CA403

}

/*Background image for subsequent level menu list links */

.suckertreemenu .subfoldericon{

             background: #7CA403

}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/

padding-top: 1em;

}    

/* Holly Hack for IE \*/

* html .suckertreemenu ul li { float: left; height: 1%; }

* html .suckertreemenu ul li a { height: 1%; }

Bueno sinceramente ya no se que más ponerles para orientarlos...

Lo que les pido a los moderadores, si desean borren mis otros dos mensajes ya que hacen referencia a este....y este es el completo

Gracias a todos
DX

JavierB · #6 (**permalink**) 03/01/2007, 15:42

Hola DragonX

He juntado uno de tus anteriores mensajes con este, para que no se pierdan las respuestas que habías tenido. El otro lo borro.

Saludos,

tunait · #7 (**permalink**) 04/01/2007, 04:46

Hola Dragón,

usa el atributo min-width en vez de width y para forzar a que no salte a dos líneas prueba a usar además white-space: nowrap;

Un saludo