Ver Mensaje Individual
  #1 (permalink)  
Antiguo 04/04/2011, 07:20
eljuank1982
Usuario no validado
 
Fecha de Ingreso: abril-2010
Ubicación: La habana
Mensajes: 229
Antigüedad: 14 años, 1 mes
Puntos: 4
Establecer ancho fijo para que el texto no se salga

Hola a todos:
Quizás mi título no fue muy explísito, lo que quiero es ver que tengo que hacerle a este código para asignarle un ancho fijo y que el texto al tener ese largo, entonces que vaya a la línea de abajo, yo lo he hecho fácil asignándole un ancho fijo a un div y listo todo el texto que pongo ahí se va acomodando abajo.
Pero no encuentro cómo hacelo a este código que que he tratado y los resltados no son lo que espero.
Si tengo que dar algún dato más me dicen.

Lo otro es que no logro me me funcione en IE8 tal y como me funciona en FF, en FF perfecto , en IE8 aceptable pero sin sombras ni bordes redondos y un tin desacomodado.

Aquí les va el css:

Código HTML:
ul#css3menu1,ul#css3menu1 ul{
	margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu1 ul{
	display:none;position:absolute;left:100%;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#FFFFFF;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;}
ul#css3menu1 li:hover>*{
	display:block;}
ul#css3menu1 li:hover{
	position:relative;}
ul#css3menu1 ul ul{
	position:absolute;left:100%;top:0;}
ul#css3menu1{
	display:block;font-size:0;float:left;}
ul#css3menu1 li{
	display:block;white-space:nowrap;font-size:0;}
ul#css3menu1>li,ul#css3menu1 li{
	margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
	outline-style:none;}
ul#css3menu1 a,ul#css3menu1 a.pressed{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Trebuchet MS;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;}
ul#css3menu1 ul li{
	float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
	text-align:left;padding:4px;background-color:#FFFFFF;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma;color:#000;text-decoration:none;}
ul#css3menu1 li:hover>a{
	background-color:#0c97e2;border-color:#C0C0C0;border-style:solid;font:bold 14px Trebuchet MS;color:#000000;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menu1 img{
	border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu1 img.over{
	display:none;}
ul#css3menu1 li:hover > a img.def{
	display:none;}
ul#css3menu1 li:hover > a img.over{
	display:inline;}
ul#css3menu1 li a.pressed img.over{
	display:inline;}
ul#css3menu1 li a.pressed img.def{
	display:none;}
ul#css3menu1 span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul span{
	background-image:url("arrowsub.png");padding-right:28px;}
ul#css3menu1 a{
	padding:10px;background-color:#c1c1c1;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:1px 0 0 0;border-style:solid;border-color:#C0C0C0;color:#000000;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
	background-color:#0c97e2;background-image:url("mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#000000;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{
	background-color:#FFFFFF;background-image:none;font:14px Tahoma;color:#0978b3;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
	border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
ul#css3menu1 li.toplast>a{
	border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;}
Aquí les va el html:

Código HTML:
<ul id="css3menu1" class="topmenu">
	<li class="topfirst"><a href="#" title="Abastecimiento" style="width:118px;">Abastecimiento</a></li>
	<li><a href="#" title="Recreación" style="width:118px;"><span>Recreación</span></a>
	<ul>
		<li><a href="#" title="Item 1 0"><span>Item 1 0</span></a>
		<ul>
			<li><a href="#" title="Item 1 0 0">Item 1 0 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 1 1">Item 1 1</a></li>
		<li><a href="#" title="Item 1 2">Item 1 2</a></li>
	</ul>

	</li>
	<li><a href="#" title="Servicios Técnicos" style="width:118px;">Servicios Técnicos</a></li>
	<li><a href="#" title="Item 3" style="width:118px;">Inversiones</a></li>
	<li class="toplast"><a href="#" title="Item 4" style="width:118px;">Transporte</a></li>
</ul> 
Salu2 y gracias de antemano..

Última edición por eljuank1982; 04/04/2011 a las 07:54