porque al agrandar el height se pone un scroll horizontal?

shurshok · #1 (**permalink**) 09/12/2008, 16:55

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?

Aresillo · #2 (**permalink**) 09/12/2008, 16:57

ponle al div
overflow: hidden;

Aresillo!!

shurshok · #3 (**permalink**) 09/12/2008, 17:01

no es al div al que aparece el scroll, es a la web a toda la web

shurshok · #4 (**permalink**) 09/12/2008, 17:28

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.

willyfc · #5 (**permalink**) 09/12/2008, 17:55

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

shurshok · #6 (**permalink**) 09/12/2008, 18:05

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.

shurshok · #7 (**permalink**) 09/12/2008, 18:06

ahh y una cosa mas, en IE no aparece el error, y sigo sin entender....

willyfc · #8 (**permalink**) 09/12/2008, 18:08

probaste con el código que te pase? por que a mi me sale bien en ambos navegadores

shurshok · #9 (**permalink**) 09/12/2008, 18:11

pero talvez sea tu resolucion, ¿cual tenes? yo estoy hablando de 1024

willyfc · #10 (**permalink**) 09/12/2008, 18:14

Cita:

Iniciado por shurshok

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

shurshok · #11 (**permalink**) 09/12/2008, 18:20

la medida de la img de la cabecera es 1000 X 273

willyfc · #12 (**permalink**) 09/12/2008, 18:24

Cita:

Iniciado por shurshok

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

shurshok · #13 (**permalink**) 09/12/2008, 18:25

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.

shurshok · #14 (**permalink**) 09/12/2008, 18:26

sigue estando el error

willyfc · #15 (**permalink**) 09/12/2008, 18:28

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

Cita:

Iniciado por shurshok

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

shurshok · #16 (**permalink**) 09/12/2008, 18:31

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.

shurshok · #17 (**permalink**) 09/12/2008, 18:33

bueno loco, igualmente muchas gracias, sos un maestro, lastima que el problema no se resolvió, pero igualmente te di karma.

willyfc · #18 (**permalink**) 09/12/2008, 18:35

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.

shurshok · #19 (**permalink**) 09/12/2008, 18:36

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!!!!!!!