Foros del Web » Creando para Internet » CSS »

Establecer ancho fijo para que el texto no se salga

Estas en el tema de Establecer ancho fijo para que el texto no se salga en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/04/2011, 07:20
Usuario no validado
 
Fecha de Ingreso: abril-2010
Ubicación: La habana
Mensajes: 229
Antigüedad: 14 años, 7 meses
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

Etiquetas: ancho, establecer, fijo
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 04:30.