Foros del Web » Creando para Internet » CSS »

problema con barra lateral

Estas en el tema de problema con barra lateral en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/01/2011, 14:45
Avatar de juan_14nob  
Fecha de Ingreso: abril-2010
Mensajes: 552
Antigüedad: 7 años, 7 meses
Puntos: 6
problema con barra lateral

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> 
  #2 (permalink)  
Antiguo 24/01/2011, 14:53
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: problema con barra lateral

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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 24/01/2011, 14:56
Avatar de juan_14nob  
Fecha de Ingreso: abril-2010
Mensajes: 552
Antigüedad: 7 años, 7 meses
Puntos: 6
Respuesta: problema con barra lateral

claro.. y hay alguna otra forma en caso de que sea una palabra extremadamente larga como para solucionar eso?
  #4 (permalink)  
Antiguo 24/01/2011, 15:03
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: problema con barra lateral

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.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 24/01/2011, 15:03
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: problema con barra lateral

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.
  #6 (permalink)  
Antiguo 24/01/2011, 15:09
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: problema con barra lateral

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.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #7 (permalink)  
Antiguo 24/01/2011, 16:51
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: problema con barra lateral

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;}
  #8 (permalink)  
Antiguo 24/01/2011, 17:00
Avatar de juan_14nob  
Fecha de Ingreso: abril-2010
Mensajes: 552
Antigüedad: 7 años, 7 meses
Puntos: 6
Respuesta: problema con barra lateral

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

Etiquetas: barra, lateral
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 08:16.