Foros del Web » Creando para Internet » CSS »

Problema maqueteando

Estas en el tema de Problema maqueteando en el foro de CSS en Foros del Web. Hola tengo un pequeno problema Estoy implementando un web site utilizando CSS, es decir todo lo estoy haciendo con DIV, pero se me presenta un ...
  #1 (permalink)  
Antiguo 31/07/2007, 05:14
 
Fecha de Ingreso: mayo-2006
Mensajes: 95
Antigüedad: 11 años, 7 meses
Puntos: 0
Problema maqueteando

Hola tengo un pequeno problema

Estoy implementando un web site utilizando CSS, es decir todo lo estoy haciendo con DIV, pero se me presenta un problema.

La idea es que el web site se ajuste a la resolución de monitos independientemente de cual sea esta, Hasta ahí parece que todo va muy bien.

ERl problema se me presenta en que si el contenido del web site crece mucho, el DIV que contiene el contenido del web site no crece y por lo tanto pierdo esa información, en otras palabras el web site no me esta creciendo cuando el texto es muy largo.

Les adjunto el cofigo de la página HTML y el codigo del archivo CSS

Muchas gracias por toda la ayuda que me puedan prestar

Código HTML

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Titulo de la página</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Estilos/estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <div id="estCabezera">Cabecera</div>
        <div id="estBarraNavHorizontal">Barra Navegación Horizontal</div>
        <div id="estBarraNavVertical">Barra Navegación Vertical</div>
      <div id="estContenido">Contenido</div>
      <div id="estBarraDerecha">Barra Derecha</div>
      <div id="estPiePagina">Pie de Página</div>
    </div>
</form>
</body>
</html>
Código CSS

Código:
@charset "utf-8";
/* CSS Document */

body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a:link {
	color: #333333;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #333333;
}
a:hover {
	text-decoration: underline;
	color: #333333;
}
a:active {
	text-decoration: none;
	color: #333333;
}

/*********************   Inicio Estilos Maquetación   *********************/

#estCabezera{
	background-color: #0000FF;
	width:100%;
	height:150px;

}

#estBarraNavHorizontal{
	background:#0000CC;
	width:100%;
	height: 30px;

}

#estBarraNavVertical{
	position: fixed;
	width: 200px;
	height:100%;
	background-color:#FFDD00;
	top: 180px;
	right: auto;
	bottom: auto;
	left: 0;
}

#estContenido{
	position: fixed;
	width: auto;
	background-color:#F33355;
	top: 180px;
	right: 200px;
	bottom: auto;
	left: 200px;
	height:inherit;
}

#estBarraDerecha{
	position: fixed;
	width: 200px;
	height:100%;
	background-color:#939390;
	top: 180px;
	right: 0;
	bottom: auto;
	left: auto;
}

#estPiePagina{
	position: fixed;
	width: 100%;
	height: 30px;
	background-color:#FFFF00;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
}

/*********************   Fin Estilos Maquetación   *********************/
  #2 (permalink)  
Antiguo 31/07/2007, 05:32
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Re: Problema maqueteando

Buenas

¿Por qué usas tanto el tipo de posicion fija (fixed)?
  #3 (permalink)  
Antiguo 31/07/2007, 06:07
 
Fecha de Ingreso: mayo-2006
Mensajes: 95
Antigüedad: 11 años, 7 meses
Puntos: 0
Re: Problema maqueteando

Bueno

Realmente es por que no estoy del todo diestro en la materia?

Como me recomiendas que lo haga?

Última edición por Yanka_17; 31/07/2007 a las 06:16
  #4 (permalink)  
Antiguo 31/07/2007, 06:19
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Re: Problema maqueteando

Cita:
Iniciado por Yanka_17 Ver Mensaje
POr desconcimiento
vale

Bueno, mis sugerencias:

No le apliques posición a la columna de la izquierda
A la parte de contenidos (central) y a la columna de la derecha podrías aplicarle un valor de absolute a la posición

Y para que en estas dos últimas se aplique la altura del 100% deberás poner antes a los contenedores en donde están al 100%. Puedes pedirle esto

Código:
html, body, form, form div{
	height:100%;

}
Prueba y me cuentas
__________________
Javascript Códigos - Bambú difunde
  #5 (permalink)  
Antiguo 31/07/2007, 06:48
 
Fecha de Ingreso: mayo-2006
Mensajes: 95
Antigüedad: 11 años, 7 meses
Puntos: 0
Re: Problema maqueteando

Parece que las cosan van mejor, muchas gracias, pero aun hay cosas qu eno logro entender y otras que no trabajan como yo quiero.

Te cuento

No entendi muy bien el por que de lo que me comentantaste de las posiciones de esos DIV, si no te quita mucho tiempo no se si me lo pudieras explicar.

El problema que sigo teniendo es con el fondo de los div que se me cortan.

Te adjunto de nuevo los cdigos para que puedas ver.

Código HTML

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Titulo de la página</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Estilos/estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
            <div id="estPrincipal">
                <div id="estCabezera">Cabecera</div>
                <div id="estBarraNavHorizontal">Barra Navegación Horizontal</div>
                <div id="estBarraNavVertical">Barra Navegación Vertical</div>
                <div id="estContenido">Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido </div>
              <div id="estBarraDerecha">Barra Derecha</div>
              <div id="estPiePagina">Pie de Página</div>
            </div>
</body>
</html>
Código CSS

Código:
@charset "utf-8";
/* CSS Document */

html, body, form, form div{
	height:100%;

}

body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a:link {
	color: #333333;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #333333;
}
a:hover {
	text-decoration: underline;
	color: #333333;
}
a:active {
	text-decoration: none;
	color: #333333;
}

/*********************   Inicio Estilos Maquetación   *********************/

#estPrincipal{
}

#estCabezera{
	background-color: #0000FF;
	width:100%;
	height:150px;

}

#estBarraNavHorizontal{
	background:#0000CC;
	width:100%;
	height: 30px;

}

#estBarraNavVertical{
	width: 200px;
	height:100%;
	background-color:#FFDD00;
	top: 180px;
	right: auto;
	bottom: auto;
	left: 0;
}

#estContenido{
	position:absolute;
	width: auto;
	height:100%;
	background-color:#F33355;
	top: 180px;
	right: 200px;
	bottom: auto;
	left: 200px;
}

#estBarraDerecha{
	position:absolute;
	width: 200px;
	height:100%;
	background-color:#939390;
	top: 180px;
	right: 0;
	bottom: auto;
	left: auto;
}

#estPiePagina{
	position: fixed;
	width: 100%;
	height: 30px;
	background-color:#FFFF00;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
}

/*********************   Fin Estilos Maquetación   *********************/
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:40.