Foros del Web » Creando para Internet » CSS »

porque al agrandar el height se pone un scroll horizontal?

Estas en el tema de porque al agrandar el height se pone un scroll horizontal? en el foro de CSS en Foros del Web. hola, tengo un problemon, que no logro entender, tengo un div, que al aumentarle el height, aparece un scroll horizontal, que es rarisimo. este es ...
  #1 (permalink)  
Antiguo 09/12/2008, 16:55
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 3 meses
Puntos: 2
porque al agrandar el height se pone un scroll horizontal?

hola, tengo un problemon, que no logro entender, tengo un div, que al aumentarle el height, aparece un scroll horizontal, que es rarisimo.

este es el código css:

Código HTML:
/*CSS propiedad de OnFLow Prohibida su distribucion*/

/*CSS general*/
body {
	background: url(images/background.jpg);
	width:1024px;
	margin:0px auto;/*Pagina centrada*/
	border-left:1px #000;
	border-right:1px #000;
}

/*Redondear*/
.redondear {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    behavior:url(border-radius.htc);
    }
/*fin de redondear*/
/*Fin CSS general*/
/*Cabecera*/

#cabecera {
	margin:0px;
	margin-bottom:auto;
	background:url(images/cabecera.png) no-repeat;
	padding:0px;
	padding-bottom:inherit;
	width:1024px;
	height:264px;
}

/*Iconos en cabecera*/

#menu {
	position:relative;
	top:25px;
	left:590px;
	background:#000 url(images/barrabotones.gif) no-repeat;
	width:388px;
	height:90px;
	background:transparent;
}

ul#iconos{
	margin:0px auto;
	list-style-type:none;
	display:block;
	height:90px;
	text-transform:uppercase;
	font-size:12px;
	font-weight:bold;
	width: 388px;
}
ul#iconos li{
	width:109px;
	height:76px;
	display:block;
	float:left;
	margin:0px auto;
	margin-right:20px;
}
ul#iconos li a{

	display:block;
	float:left;
	color:#000;
	text-decoration:none;
	padding:10px 0px 0px 0px;
	height:76px;
	background:transparent no-repeat;
	width: 109px;
	margin:0px auto;
	font-family:"Courier New", Courier, monospace
	}
ul#iconos li a:hover{
	padding:0px 0px 0px 0px;
	background:transparent no-repeat;	
	}

/*Fin de iconos en cabecera*/
/*Fin cabecera*/
/*Contenido*/

#contenido {
	max-width:900px;
	position:relative;
	background:#232323;
	clear:both;
	float:left;
	height:199px;
	border:solid 1px #3D3B3C;
	margin-top:25px;
	margin-left:53px;
	width:898px;
}

/*Dentro del contenido*/

.descripcion1 {
	background:transparent;
	width:280px;
	margin-left:10px;
	margin-top:10px;
	margin-bottom:10px;
	border-right:solid #808080 3px;
}

/*Fin de dentro del contenido*/
/*Fin de contenido*/
y este es el html (esta vació, porque solo estoy probando)

Código HTML:
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta http-equiv ="Content - Type "content=" text/html;charset=ISO-8859-1"/>
<meta name="keywords" content="estudio, carreras, cursos, postgrados, enseñanza, ocio"/>
<meta name="description" content="Articulos sobre carreras universitarias, cursos tecnicos, cursos de actualizacion, postgrados"/>
<meta name="copyright" content="dondestudiar.com" />
<title>ON FLOW Diseño Web Integral</title >
<link type="text/css" rel="stylesheet" href="style.css"/>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-style.css" />
<![endif]-->
</head>

<body>
<div id="cabecera">
        <div id="menu">
            <ul id="iconos">
              <li><a href="servicios.html"><img src="images/servicios.gif" width="109" height="76" border="0" alt="Servicios" /></a></li>
                <li><a href="quienes-somos.html"><img src="images/quienesomos.gif" width="109" height="76" border="0" alt="quienes somos" /></a></li>
                <li><a href="contacto.html"><img src="images/contacto.gif" width="109" height="76" border="0" alt="Contacto" /></a></li>
            </ul>
        </div>
    </div>
    <div id="contenido" class="redondear">
    </div>
</body>
</html> 
el error esta en el div del contenido (<div id="contenido" class="redondear">) intenten modificar su height desde css, ocea aumentarlo, y vean que aparece un scroll horizontal ¿porque?
__________________
Visita la mejor web: http://infoadictos.net
  #2 (permalink)  
Antiguo 09/12/2008, 16:57
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: porque al agrandar el height se pone un scroll horizontal?

ponle al div
overflow: hidden;

Aresillo!!
  #3 (permalink)  
Antiguo 09/12/2008, 17:01
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: porque al agrandar el height se pone un scroll horizontal?

no es al div al que aparece el scroll, es a la web a toda la web
__________________
Visita la mejor web: http://infoadictos.net
  #4 (permalink)  
Antiguo 09/12/2008, 17:28
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: porque al agrandar el height se pone un scroll horizontal?

Dios!!! sigo con el problema, pero descubrí que el problema esta en:

Código HTML:
#contenido {
	max-width:900px;
	background:#232323 no-repeat;
	height:299px;
	border:solid #514F50 2px;
	width:898px;
}
porque borre todo, deje solo eso, agrande hasta que llego abajo, y volvió a aparecer el scroll.
__________________
Visita la mejor web: http://infoadictos.net
  #5 (permalink)  
Antiguo 09/12/2008, 17:55
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: porque al agrandar el height se pone un scroll horizontal?

cambie un poco tu código fijate si es lo que quieres lograr

Código:
body {
	background: url(images/background.jpg);
	border-left:1px solid #000;
	border-right:1px solid #000;
}

/*Redondear*/
.redondear {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    behavior:url(border-radius.htc);
    }
/*fin de redondear*/
/*Fin CSS general*/
/*Cabecera*/

#cabecera {
	background:url(images/cabecera.png) no-repeat;
	width:100%;
	height:264px;
}

/*Iconos en cabecera*/

#menu {
	float:right;
	background:#000 url(images/barrabotones.gif) no-repeat;
	width:388px;
	height:90px;
	background:transparent;
	margin-right:40px
}

ul#iconos{
	margin:0 auto;
	list-style-type:none;
	display:block;
	height:90px;
	text-transform:uppercase;
	font-size:12px;
	font-weight:bold;
	width: 388px;
}
ul#iconos li{
	width:109px;
	height:76px;
	display:block;
	float:left;
	margin:0px auto;
	margin-right:20px;
}
ul#iconos li a{

	display:block;
	float:left;
	color:#000;
	text-decoration:none;
	padding:10px 0px 0px 0px;
	height:76px;
	background:transparent no-repeat;
	width: 109px;
	margin:0px auto;
	font-family:"Courier New", Courier, monospace;
	}
ul#iconos li a:hover{
	padding:0px 0px 0px 0px;
	background:transparent;	
	}

/*Fin de iconos en cabecera*/
/*Fin cabecera*/
/*Contenido*/

#contenido {
	position:relative;
	background:#232323;
	clear:both;
	border:solid 1px #3D3B3C;
	margin:25px 0 0 53px;
	width:898px;
	height:auto;
	display:table;
}

/*Dentro del contenido*/

.descripcion1 {
	background:transparent;
	width:280px;
	margin:10px 0 10px 10px;
	border-right:solid #808080 3px;
}
#contenedor{ width:100%; height:auto; margin:0 auto;}
Código HTML:
<div id="cabecera">
        <div id="menu">
            <ul id="iconos">
              <li><a href="servicios.html"><img src="http://www.forosdelweb.com/images/servicios.gif" width="109" height="76" border="0" alt="Servicios" /></a></li>
                <li><a href="quienes-somos.html"><img src="http://www.forosdelweb.com/images/quienesomos.gif" width="109" height="76" border="0" alt="quienes somos" /></a></li>
                <li><a href="contacto.html"><img src="http://www.forosdelweb.com/images/contacto.gif" width="109" height="76" border="0" alt="Contacto" /></a></li>
            </ul>
        </div>
    </div>
<div id="contenedor">	
    <div id="contenido" class="redondear">
		sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />sdfasdf asdfasdf asdf asdf asf asfd asdf<br />
    </div>
	</div> 
y el problema es la cabecera no el contenido, tu contenido estaba con float left si quieres que algo flote y se mantenga dentro del el cuerpo de la pagina tienes que tener otra cosa flotando por que si no se sale como una estructura a 2 columnas.

otra cosa las propiedades de redondeo que usas solo funcionan para ff y safaria no para los demas. mira este vínculo haber si te sirve

Espero te sirva
__________________
WFC
codigo82
  #6 (permalink)  
Antiguo 09/12/2008, 18:05
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: porque al agrandar el height se pone un scroll horizontal?

sigue sin funcionar, pero descubrí algo mas, no es un problema en una propiedad, el problema aparece cuando se excede el alto de la web, y sigo sin entender porque.
__________________
Visita la mejor web: http://infoadictos.net
  #7 (permalink)  
Antiguo 09/12/2008, 18:06
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: porque al agrandar el height se pone un scroll horizontal?

ahh y una cosa mas, en IE no aparece el error, y sigo sin entender....
__________________
Visita la mejor web: http://infoadictos.net
  #8 (permalink)  
Antiguo 09/12/2008, 18:08
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: porque al agrandar el height se pone un scroll horizontal?

probaste con el código que te pase? por que a mi me sale bien en ambos navegadores
__________________
WFC
codigo82
  #9 (permalink)  
Antiguo 09/12/2008, 18:11
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: porque al agrandar el height se pone un scroll horizontal?

pero talvez sea tu resolucion, ¿cual tenes? yo estoy hablando de 1024
__________________
Visita la mejor web: http://infoadictos.net
  #10 (permalink)  
Antiguo 09/12/2008, 18:14
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: porque al agrandar el height se pone un scroll horizontal?

Cita:
Iniciado por shurshok Ver Mensaje
pero talvez sea tu resolucion, ¿cual tenes? yo estoy hablando de 1024
yo utilizo la misma, prueba ese código en una hoja en blanco no sobre tu código y veras el resultado yo lo probe el IE6, ff3, safari, opera y chrome

cual es la medida de la imagen de la cabecera? no me habia dado cuenta de ese detalle
__________________
WFC
codigo82
  #11 (permalink)  
Antiguo 09/12/2008, 18:20
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: porque al agrandar el height se pone un scroll horizontal?

la medida de la img de la cabecera es 1000 X 273
__________________
Visita la mejor web: http://infoadictos.net
  #12 (permalink)  
Antiguo 09/12/2008, 18:24
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: porque al agrandar el height se pone un scroll horizontal?

Cita:
Iniciado por shurshok Ver Mensaje
la medida de la img de la cabecera es 1000 X 273
ese puede ser el problema por la cabecera de esta manera

#cabecera {
background:url(imagenes/img.png) no-repeat;
width:100%;
height:264px;
}


avisas
__________________
WFC
codigo82
  #13 (permalink)  
Antiguo 09/12/2008, 18:25
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: porque al agrandar el height se pone un scroll horizontal?

che, si no te molesta, me pasarías tu msn por mp, y te paso un zip de la web, tal vez sea mas fácil.
__________________
Visita la mejor web: http://infoadictos.net
  #14 (permalink)  
Antiguo 09/12/2008, 18:26
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: porque al agrandar el height se pone un scroll horizontal?

sigue estando el error
__________________
Visita la mejor web: http://infoadictos.net
  #15 (permalink)  
Antiguo 09/12/2008, 18:28
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: porque al agrandar el height se pone un scroll horizontal?

Por que la imagen tiene de alto 273px y la cabecera 264px

Cita:
Iniciado por shurshok Ver Mensaje
che, si no te molesta, me pasarías tu msn por mp, y te paso un zip de la web, tal vez sea mas fácil.
Creo que esto va contra las normas del foro, pero creo que te puedo ayudar
__________________
WFC
codigo82
  #16 (permalink)  
Antiguo 09/12/2008, 18:31
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: porque al agrandar el height se pone un scroll horizontal?

sabes que me puse a pensar, y creo que el problema esta en que al aumentar el height se tiene que mostrar una barra vertical, y esta ocupa un espacio, y por consiguiente aparece el scroll horizontal.

ahora voy a ver si en base a esto lo arreglo.
__________________
Visita la mejor web: http://infoadictos.net
  #17 (permalink)  
Antiguo 09/12/2008, 18:33
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: porque al agrandar el height se pone un scroll horizontal?

bueno loco, igualmente muchas gracias, sos un maestro, lastima que el problema no se resolvió, pero igualmente te di karma.
__________________
Visita la mejor web: http://infoadictos.net
  #18 (permalink)  
Antiguo 09/12/2008, 18:35
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: porque al agrandar el height se pone un scroll horizontal?

Esto puede pasar por que no veo lo demás de tu web por eso te digo que pongas el código que te pase en una hoja nueva en blanco y verás que si funciona.
__________________
WFC
codigo82
  #19 (permalink)  
Antiguo 09/12/2008, 18:36
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: porque al agrandar el height se pone un scroll horizontal?

SI!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!

era lo que yo dije, me di cuenta que el scroll vertical molestaba a la pagina en lo horizontal, y por eso aparecía el scroll horizontal, igualmente gracias willyfc me ayudaste a corrgir mucho codigo, la verdad que te pasaste ayudandome, como media hora gastada solo para ayudarme, sos un capo, y nuevamente te digo:

¡¡¡¡¡¡¡¡GRACIAS!!!!!!!
__________________
Visita la mejor web: http://infoadictos.net
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 12:04.