Foros del Web » Creando para Internet » CSS »

Menu horizontal sin salto de linea

Estas en el tema de Menu horizontal sin salto de linea en el foro de CSS en Foros del Web. Hola foreros, estoy inmerso en el diseño de un menu de navegación horizontal, pero este el tamaño maximo permitido es de 800px y el menu ...
  #1 (permalink)  
Antiguo 24/06/2008, 07:17
 
Fecha de Ingreso: octubre-2007
Mensajes: 28
Antigüedad: 10 años, 1 mes
Puntos: 0
Menu horizontal sin salto de linea

Hola foreros, estoy inmerso en el diseño de un menu de navegación horizontal, pero este el tamaño maximo permitido es de 800px y el menu ocupa como 1060px, entonces me ha pedido que haga un scroll, pero claro cuando le digo a la capa que el ancho son 800px y ve que hay overflow me hace salto de linea y me pone el scroll vertical y yo lo quiero horizontal. Os detallo un poco como esta el menu:

Código HTML:
Código HTML:
 <div id="header" style="z-index: 2; position: absolute; overflow: hidden; width: 200 px; height:60px; left: 40px;">
		<ul class="menu5">
		 		<li id="1"><a href="aw_co_InitOp?opcionElegida=21"><b>Opcion 1</b></a></li>

		 		<li id="2"><a href="aw_pa_web_PasParJsp?tipoInformacion=22"><b>Opcion 2</b></a></li>
	
		 		<li id="9"><a href="aw_pa_web_PasParJsp?tipoInformacion=31"><b>Opcion 3</b></a></li>

		 		<li id="3"><a href="aw_pa_web_PasParJsp?tipoInformacion=23"><b>Opcion 4</b></a></li>
	
		 		<li id="4"><a href="aw_pa_web_PasParJsp?tipoInformacion=20"><b>Opcion 5</b></a></li>
		 	
		 		<li id="5"><a href="aw_pa_web_PasParJsp?tipoInformacion=24"><b>Opcion 6</b></a></li>
		 	
		 		<li id="6"><a href="aw_pa_web_PasParJsp?tipoInformacion=25"><b>Opcion 7</b></a></li>
		 	
		 		<li id="7"><a href="aw_co_InitOp?opcionElegida=3"><b>Opcion 8</b></a></li>
		 	
		 		<li id="8"><a href="aw_co_InitOp?opcionElegida=4"><b>Opcion 9</b></a></li>
		 </ul>
	</div> 
Código CSS:

Código:
.menu5 {padding:2px 0 0 1em; margin:2; white-space: nowrap; list-style: none; height:47px; position:relative; background:transparent url(/aw/co/img/es_AR/aw_co_menu0c.bmp) repeat-x left bottom; font-size:11px;}
.menu5 li {float:left; height:47px;}
.menu5 li a {display:block; padding-left:13px; line-height: 270%; float:left; height:47px; color:white; font-size:12px; text-decoration:none; font-family:TheSansCorrespondence, arial, verdana, sans-serif; font-weight:bold; text-align:center; cursor:pointer; background: url(/aw/co/img/es_AR/aw_co_menu0a.bmp) no-repeat;}
.menu5 li a b {float:left; text-align: center; width: auto; height: 47px; background:url(/aw/co/img/es_AR/aw_co_menu0b.bmp) no-repeat right top;}
.menu5 li.current a{color:#000; background:url(/aw/co/img/es_AR/aw_co_menu1a.bmp) no-repeat;}
.menu5 li.current a b {background:url(/aw/co/img/es_AR/aw_co_menu1b.bmp) no-repeat right top;}
Con este código me salen saltos de lineas en IE y en FF lo saca todo aunque de ancho le ponga 100px, saca todo el menú.

Espero que alguien me pueda ayudar.

Muchas gracias y un saludo
  #2 (permalink)  
Antiguo 24/06/2008, 08:42
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 9 años, 7 meses
Puntos: 43
Respuesta: Menu horizontal sin salto de linea

haz probado colocando al <ul> un display_inline????
__________________
..::The Saint::..
El pesimista se queja del viento; el optimista espera que cambie; el realista ajusta las velas.
  #3 (permalink)  
Antiguo 24/06/2008, 09:52
 
Fecha de Ingreso: octubre-2007
Mensajes: 28
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: Menu horizontal sin salto de linea

si probé lo del inline, inline-table, etc...
  #4 (permalink)  
Antiguo 24/06/2008, 09:58
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu horizontal sin salto de linea

¿Y quieres conseguir el scroll sólo en el menú?

Mikel.
  #5 (permalink)  
Antiguo 24/06/2008, 10:02
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu horizontal sin salto de linea

El ancho del menú no te lo coge porque aquí hay un fallo:

width: 200 px;

debe ser.

width: 200px;

Mikel.
  #6 (permalink)  
Antiguo 24/06/2008, 10:26
 
Fecha de Ingreso: octubre-2007
Mensajes: 28
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: Menu horizontal sin salto de linea

Gracias por esa observación ahora efectivamente me lo pilla en Firefox, pero me sigue pasando lo del salto de linea. Y si quiero aplicar el scroll solo al menu, pues voy a hacer un scroll con javascript con unos botones a cada lado del menu y que este sea corredero de izquierda a derecha y viceversa.

Saludos
  #7 (permalink)  
Antiguo 24/06/2008, 10:36
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu horizontal sin salto de linea

Ah, de acuerdo. Extraño diseño, pero cada uno es un mundo. A ver si esto te sirve:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.menu5 {padding:2px 0 0 1em;
margin:2px;
white-space: nowrap;
list-style: none;
height:47px;
position:relative;
background:transparent url(/aw/co/img/es_AR/aw_co_menu0c.bmp) repeat-x left bottom;
font-size:11px;
width: 800px;
}
.menu5 li {float:left;
height:47px;
}
.menu5 li a {display:block;
padding-left:13px;
line-height: 270%;
float:left;
height:47px;
font-size:12px;
text-decoration:none;
font-family:TheSansCorrespondence, arial, verdana, sans-serif;
font-weight:bold;
text-align:center;
cursor:pointer;
background: url(/aw/co/img/es_AR/aw_co_menu0a.bmp) no-repeat;
}
.menu5 li a b {float:left;
text-align: center;
width: auto;
height: 47px;
background:url(/aw/co/img/es_AR/aw_co_menu0b.bmp) no-repeat right top;
}
.menu5 li.current a{color:#000;
background:url(/aw/co/img/es_AR/aw_co_menu1a.bmp) no-repeat;
}
.menu5 li.current a b {background:url(/aw/co/img/es_AR/aw_co_menu1b.bmp) no-repeat right top;
}
</style>
</head>
<body>
<div id="header" style="z-index: 2; position: absolute; overflow: auto; width: 800px; height:60px; left: 40px;">
<ul class="menu5">
<li id="1"><a href="aw_co_InitOp?opcionElegida=21"><b>Opcion 1</b></a></li> <li id="2"><a href="aw_pa_web_PasParJsp?tipoInformacion=22"><b>O pcion 2</b></a></li>
<li id="9"><a href="aw_pa_web_PasParJsp?tipoInformacion=31"><b>O pcion 3</b></a></li>
<li id="3"><a href="aw_pa_web_PasParJsp?tipoInformacion=23"><b>O pcion 4</b></a></li>
<li id="4"><a href="aw_pa_web_PasParJsp?tipoInformacion=20"><b>O pcion 5</b></a></li>
<li id="5"><a href="aw_pa_web_PasParJsp?tipoInformacion=24"><b>O pcion 6</b></a></li>
<li id="6"><a href="aw_pa_web_PasParJsp?tipoInformacion=25"><b>O pcion 7</b></a></li>
<li id="7"><a href="aw_co_InitOp?opcionElegida=3"><b>Opcion 8</b></a></li>
<li id="8"><a href="aw_co_InitOp?opcionElegida=4"><b>Opcion 9</b></a></li>
</ul>
</div></body>
</html>
Mikel.

Última edición por Mikmoro; 24/06/2008 a las 11:18
  #8 (permalink)  
Antiguo 24/06/2008, 11:08
 
Fecha de Ingreso: octubre-2007
Mensajes: 28
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: Menu horizontal sin salto de linea

Muchas gracias Mikel, ahora tengo que salir, pero en cuanto vuelva voy a probar, el diseño es extraño, puesto que que no habia hecho nunca un menu con CSS y me costo conseguirlo, jajajaja, y lo hice como buenamente pude.

Saludos, en cuanto lo pruebe te digo algo.
  #9 (permalink)  
Antiguo 24/06/2008, 14:00
 
Fecha de Ingreso: octubre-2007
Mensajes: 28
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: Menu horizontal sin salto de linea

Muchas gracias Mike, con lo que tu me habias dicho no consegui quitar el salto de linea, pero si me di cuenta de como podia hacerlo y es que en la parte de css .menu5 donde tu me habias indicado incluir el width: 800px lo que he hecho es poner el ancho total de todo el menu que era 1060px y asi consigo quitar el salto de linea.

Muchas gracias de nuevo, Saludos
  #10 (permalink)  
Antiguo 24/06/2008, 16:12
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu horizontal sin salto de linea

AH, había puesto 1000 pero luego me he acordado de que tú querías que tuviera 800 y lo he cambiado.

Me alegro de que te haya funcionado con tu corrección.

Mikel.
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:47.