problema con barra lateral

juan_14nob · #1 (**permalink**) 24/01/2011, 14:45

hola a todos, estoy practicando una maquetacion sencilla, con una cabecera,debajo menu horizontal y luego una barra lateral y el cuerpo, pero tengo un problema con la barra lateral qiue al escribir un parrafo no sigue hacia abajo sino que sigue por debajo de la otra capa (cuerpo). aqui les dejo el codigo por silos quieren ver.

Código HTML:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
  function mostrarFechaHora()
  {
    var fecha
    fecha=new Date();
    document.write('Hoy es ');
    document.write(fecha.getDate()+'/');
    document.write((fecha.getMonth()+1)+'/');
    document.write(fecha.getFullYear());
    document.write('<br>');
    document.write('Es la hora ');
    document.write(fecha.getHours()+':');
    document.write(fecha.getMinutes()+':');
    document.write(fecha.getSeconds());    
  }
  //Llamada a la función
  


</SCRIPT>
<style>
#cabecera {
	   	
       background-color: green;
       height:110px;
       padding-left:15px;
}
#contenedor {
	   margin:0 auto;
       width: 900px;
       height: 100%;
	   
}
#menu{
background-color:blue;
height:30px;

}
#cuerpo {
	   width:760px;
       background-color: gray;
       float:right;
       //position:relative;
       height:100%;
	   
       }
#pie {
        background-color: blue;
        clear: both;
     }	   
#lateral {
			
            background-color: orange;
            float:left;
            width:140px;
            height:100%;
			text-align:left;
			
        }

#listm ul, li {
    display: inline;
    list-style-type: none;

}
#listm{
margin:0px;
}	   
#listm ul{
width:900px;

}
#listm li {
    //background-image: url("sep_menu.gif");
    //background-position: left center;
    //background-repeat: no-repeat;
    float: left;
    margin-left: 10px;
    margin-right: 0px;
    padding-left: 10px;
    
    width: 140px;
	font-size:14px;
}	   
#listm a{
		display:block; //Convertimos el vínculo en un bloque.
		width:80px;
		height:30px;
		padding-top:0px;
		text-decoration:none;
		text-align:center;
		font-size:22px;
		color:#FFFFFF;
		//background-color:#B2B2B2;

		}
#listm a:hover{

background-color:orange;

}
#reloj{
width:130px;
height:33px;
float:right;

}
</style>
</head>
<body>
<div id="contenedor">
	<div id="cabecera">Este es la cabecera
		<div id="reloj"><script LANGUAGE="JavaScript">mostrarFechaHora();</script> </div>
	
	</div>
	<div id="menu">
		<ul id="listm">
			<li><a href="#">Home</a></li>
			<li><a href="#">Quienes somos</a></li>
			<li><a href="#">Servicios</a></li>
			<li><a href="#">Contacto</a></li>
		</ul>
	
	
	</div>
<div id="lateral"><p>wwvgnrtkbrbhghghghgjbgfbrgr</p> </div>
<div id="cuerpo">cuerpo</div>

</div>
</body>
<html>

C2am · #2 (**permalink**) 24/01/2011, 14:53

El problema es que "wwvgnrtkbrbhghghghgjbgfbrgr" es una "palabra" que ocupa más de 140px,
si en vez de poner "wwvgnrtkbrbhghghghgjbgfbrgr" pruebas con ""wwvgnrtkbrbhghghg hgjbgfbrgr" seguro que se acomodará debajo.
Saludos

juan_14nob · #3 (**permalink**) 24/01/2011, 14:56

claro.. y hay alguna otra forma en caso de que sea una palabra extremadamente larga como para solucionar eso?

C2am · #4 (**permalink**) 24/01/2011, 15:03

En realidad , no sé, me parece que no, a menos que utilices algo de js o con php para cortar la palabra.
En castellano es poco probable tener una palabra tan extensa.
Bueno, digo sin modificarle el ancho al div ¿no?. Supongo que eso está fuera de discusión.

sanxuan · #5 (**permalink**) 24/01/2011, 15:03

Cortarla con overflow:hidden, overflow:scroll, overflow:auto, ...
Por cierto, puedes usar float:left para todas las columnas que deban flotar una junto a otra.
Usa float:right sólo si deben pegarse al borde derecho.

C2am · #6 (**permalink**) 24/01/2011, 15:09

Bueno, pero overflow: hidden, corta la palabra, pero no la muestra debajo, lo único que hace es ocultar la parte que no entra en el div, es decir, igual a lo que le pasa ahora.

alexk · #7 (**permalink**) 24/01/2011, 16:51

juan_14nob no creo que en ningun idioma exista ninguna palabra de esas dimenciones de caracteres para estos casos existe una propiedad para hacer que el texto pase a otra linea {word-wrap: break-word;}

juan_14nob · #8 (**permalink**) 24/01/2011, 17:00

Jajaaj Esta bien.. queria sacarme las dudas...