Menu horizontal sin salto de linea

akiles83 · #1 (**permalink**) 24/06/2008, 06:17

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

the_web_saint · #2 (**permalink**) 24/06/2008, 07:42

haz probado colocando al <ul> un display_inline????

akiles83 · #3 (**permalink**) 24/06/2008, 08:52

si probé lo del inline, inline-table, etc...

Mikmoro · #4 (**permalink**) 24/06/2008, 08:58

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

Mikel.

Mikmoro · #5 (**permalink**) 24/06/2008, 09:02

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

width: 200 px;

debe ser.

width: 200px;

Mikel.

akiles83 · #6 (**permalink**) 24/06/2008, 09:26

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

Mikmoro · #7 (**permalink**) 24/06/2008, 09:36

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.

akiles83 · #8 (**permalink**) 24/06/2008, 10:08

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.

akiles83 · #9 (**permalink**) 24/06/2008, 13:00

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

Mikmoro · #10 (**permalink**) 24/06/2008, 15:12

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.