Foros del Web » Creando para Internet » CSS »

Maquetando en CSS... ¡Un dolor de cabeza!

Estas en el tema de Maquetando en CSS... ¡Un dolor de cabeza! en el foro de CSS en Foros del Web. Hola a todos. Tengo un problemón con el CSS. No se si sean errores de principiante, o los navegadores, pero en serio, necesito ayuda. Resulta ...
  #1 (permalink)  
Antiguo 15/11/2007, 19:37
Avatar de ghosthead-nebula  
Fecha de Ingreso: marzo-2007
Mensajes: 273
Antigüedad: 10 años, 9 meses
Puntos: 3
Maquetando en CSS... ¡Un dolor de cabeza!

Hola a todos.

Tengo un problemón con el CSS. No se si sean errores de principiante, o los navegadores, pero en serio, necesito ayuda.

Resulta que estoy empleando un contenedor general que se centra en la pantalla. Éste tiene una tabla interna que estoy usando como plantilla para las páginas web, formada por 3 filas: Encabezado, contenido y pie. El encabezado y contenido los guardo en archivos aparte, que se cargarán en los otros ficheros. Allí no hay problema.

El problema surge en la celda de contenido, pues le coloco un fondo diferente al fondo general (como una caja encima del fondo). Cuando el sitio no supera el alto de la pantalla, luce perfecto (tanto en IE como en FF). El problema está cuando hay overflow.

En IE no ocurre nada... bueno, especifico: IE 6.0

En FF se ve como si las celdas de contenido y pie fueran separadas por un espacio vacío. lo mismo ocurre con el IE 7 (como me comentó un amigo que lo vió allí) es más, el fondo no se carga completo y se nota una especie de overlow en la celda central (muy notorio en IE 7)

No sé si me capten bien, pero en medio de mi desesperación (pues es mi tesis de grado), no hayo cómo explicarles bien mi problema.

Aquí les proporciono el CSS:

Código HTML:
/******* Formato del fondo *******/
html, body {
	background-color: #9CF;
	padding: 0px;
	height: 100%;
}

/* Formato de los links */
a {
	color: #0000FF;
	text-decoration: none;
}

/* Formato de los links cuando el puntero pasa sobre ellos */
a:hover {
	text-decoration: underline;
}

/******* Contenedor de mensajes. Se centra en medio de la pantalla *******/
#messages {
	position: relative;
	width: 400px;
	min-height: 100px;
	background: #FFF;
	border: 1px solid #003366;
	font: normal 14px Arial, Helvetica, sans-serif;
	margin-left: -250px;
	z-index: 100;
	left: 50%;
	top: 50;
	text-align: center;
	padding: 50px;
}

#messages h3 {
	font-weight: bold;
}

/* Tan Hack para IE 
* html #messages h3 {
	font-size: 12px;
}*/

#messages p {
	letter-spacing: normal;
	font-size: 12px;
}

/******* Contenedor principal. Se centra en medio de la pantalla *******/
#container {
	position: absolute;
	width: 817px;
	height: 100%;
	/*background: url(images/bg.png) repeat-y center 0%;*/
	font: normal 11px/15px Arial, Helvetica, sans-serif;
	margin-left: -410px;
	z-index: 100;
	left: 50%;
	top: 0;
	background: #CC99FF;
}

/* Display de los elementos tipo H3 (para efecto de documentación) */
#container h3 span {
	display: none;
}

/******* Contenedor de la cabecera de la página *******/
#header {
	position: relative;
	height: 154px;
}

/* Banner con el logo de SAIDCOMS */
#Logo {
	position: absolute;
	width: 799px;
	height: 117px;
	left: 9px;
	background: url(images/Banner.png) no-repeat right 0%;
}

/* Barra izquierda del botón HOME */
#Home {
	position: absolute;
	width: 190px;
	height: 38px;
	top: 117px;
	left: 8px;
	background: url(images/HomeBar.png) no-repeat;
	z-index: 120;
	text-align: center;
}

/* Colección de links a las opciones principales */
#Links {
	position: absolute;
	padding-top: 10px;
	top: 117px;
	right: 9px;
	width: 610px;
	height: 36px;
	background: url(images/MainBar2.png) repeat-x;
	text-align: right;
}

/* Formato de los links */
#Links a {
	color: #0099FF;
	text-decoration: none;
	padding-left: 40px;
	padding-right: 40px;
}

/* Formato de los links cuando el puntero pasa sobre ellos */
#Links a:hover {
	color: #FFF;
}

/******* Contenedor de las opciones particulares *******/
#Options {
	position: absolute;
	float: left;
	width: 140px;
	margin: 15px 5px;
	border-right: 1px solid #003366;
	padding: 10px 10px 50px 20px;
	z-index: 120;
	font-size: 12px;
}

/* Tan Hack para IE5.x/win 
* html #Options {
	width: 155px;
	w\idth: 140px;
}*/

/* Cabecera de las opciones */
#Options h3 {
	width: 96px;
	height: 20px;
	background: url(images/Opciones.png);
}

/* Formato de los formularios */
#Options form {
	margin: 25px 10px;
	padding: 10px;
	border: 1px solid;
	background: #9CF;
}

/* Formato de las listas no ordenadas */
#Options ul {
	list-style-image: url(images/Dot.png);
	padding-left: 5px;
	margin: 5px 0 20px 5px;
}

/* Margen para los elementos de la lista */
#Options ul li {
	margin-bottom: 8px;
}

/* Formato de los links */
#Options a {
	color: #000066;
}

/* Formato de los links cuando el puntero pasa sobre ellos */
#Options a:hover {
	color: #0000FF;
}

/******* Contenedor principal *******/
#MainContainer {
	position: relative;
	width: 798px;
	margin: 0 auto;
	padding-bottom: 30px;
}

/* Formato del contenido principal */
#Main {
	float: right;
	margin-right: 25px;
	width: 550px;
	margin-top: 25px;
	margin-bottom: 25px;
}

/* Formato de los párrafos */
#Main p {
	letter-spacing: 0.03em;
	text-align: justify;
	margin-bottom: 15px;
}

/* Formato de los títulos */
#Main h3 {
	font-size: 14px;
}

/******* Contenedor de las tablas *******/
#Tabla {
	margin: 25px 15px;
	text-align: center; /* Al parecer no funciona en Mozilla Firefox */
}

/* Tan Hack para las tablas en IE *
* html #Tabla {
	margin: 25px -5px;
}*/

/* Formato de las cabeceras */
#Tabla th {
	border: 2px solid #003366;
	border-left: 0;
	border-right: 0;
	background-color: #99CCFF;
}

/* Formato de las celdas */
#Tabla td {
	border-bottom: 1px solid #003366;
}

/******* Contenedor del pie de página *******/
#footercont {
	position: relative;
	width: 817px;
	height: 50px;
	/*background: url(images/bg.png) repeat-y center 0%;*/
	/*margin-left: -410px;
	/*margin-top: -50px;*/
	z-index: 100;
	/*left: 50%;*/
	botton: 0px;
	background: #FFCCFF;
}

/* Formato del pie de página */
#footer {
	position: absolute;
	width: 800px;
	height: 18px;
	padding-top: 4px;
	background: url(images/FootBg.png) repeat-x;
	bottom: 0px;
	left: 8px;
	text-align: right;
	color: #3366CC;
	font-size: 10px;
}

/* Formato del link */
#footer a {
	padding-right: 5px;
	text-align: right;
	font-size: 10px;
	color: #3366CC;
}

/* Formato de los links cuando el puntero pasa sobre ellos */
#footer a:hover {
	color: #FFF;
}

p.last {
	padding-bottom: 50px;
}
Aquí el formato dle header:

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="800" height="100%" border="0" cellspacing="0">
        <tr>
          <td height="154px">
		  	<div id="header">
				<div id="Logo">
					<h3><span>Logotipo del sistema</span></h3>
				</div>
	  			<div id="Home">
					<a href="Style-test.htm"><img src="../Images/HomeButton.png" border="0"></a> </div>
				<div id="Links">
					<a href="Style-test.htm">Link1</a>
					<a href="Style-test.htm">Link2</a>
					<a href="Style-test.htm">Link3</a>
					<a href="Style-test.htm">Link4</a> </div>
			</div>
		  </td>
        </tr>
        <tr>
          <td height="100%" valign="top">
</body>
</html> 
Este es el footer:

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
		  </td>
        </tr>
        <tr>
          <td height="50px">
		  	<div id="footercont">
				<div id="footer">
				</div>
			</div>
		  </td>
        </tr>
      </table>
</body>
</html> 
Como pudieron ver, el header termina con un <td> y el footer comienza con un </td>, lo que me generaría la celda central.

Cómo hago? Alguna ayuda? (y no, no lo tengo en la web aún)
__________________
Mis dibujos: Click Aquí
  #2 (permalink)  
Antiguo 15/11/2007, 19:42
Avatar de ghosthead-nebula  
Fecha de Ingreso: marzo-2007
Mensajes: 273
Antigüedad: 10 años, 9 meses
Puntos: 3
Re: Maquetando en CSS... ¡Un dolor de cabeza!

Por cierto, en algunos contenedores les puse un color de fondo "aleatorio" para poder visualizarlos bien. Los que van son los que están "comentados".



Le quité el height al container, y se unen las líneas. Pero ahora se me presenta otro royo....

El footer sube mucho. Si por lo menos tengo un elemento pequeño en la celda central (o sea, que esa celda es pequeña) el footer se ve muy arriba. La idea es que se vea al pie de la pantalla, y si hay overflow, que vaya más abajo y se amplie más la celda central.


Ya no sé qué hacer. Ayúdenme :(
__________________
Mis dibujos: Click Aquí

Última edición por ghosthead-nebula; 15/11/2007 a las 20:29
  #3 (permalink)  
Antiguo 15/11/2007, 22:18
Avatar de merolhack  
Fecha de Ingreso: junio-2006
Ubicación: México
Mensajes: 1.242
Antigüedad: 11 años, 5 meses
Puntos: 16
Re: Maquetando en CSS... ¡Un dolor de cabeza!

Oye y en serio al footer le estas poniendo esto??
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body> 
Por que eso en el footer no va, ni esto en el header:
Código HTML:
</body>
</html> 
  #4 (permalink)  
Antiguo 16/11/2007, 08:18
Avatar de ghosthead-nebula  
Fecha de Ingreso: marzo-2007
Mensajes: 273
Antigüedad: 10 años, 9 meses
Puntos: 3
Re: Maquetando en CSS... ¡Un dolor de cabeza!

Umm... ok. Lo voy a quitar. Veremos qué pasa.



Y eso significa que en los ficheros de la celda central tampoco van las etiquetas?
__________________
Mis dibujos: Click Aquí
  #5 (permalink)  
Antiguo 16/11/2007, 08:26
Avatar de ghosthead-nebula  
Fecha de Ingreso: marzo-2007
Mensajes: 273
Antigüedad: 10 años, 9 meses
Puntos: 3
Re: Maquetando en CSS... ¡Un dolor de cabeza!

Nada. Me sigue dando el mismo problema.

Si pongo en el contenedor principal un "height: 100%" llega al final de pantalla, pero cuando hay un overflow se ve un feo espacio vacío entre el contenedor principal y el footer (eso en Firefox), y si pongo el min-height se me soluciona esto, pero cuando la celda tiene menos información el footer se sube y queda encima de la celda anterior (también en FF) y en IE no me funciona (algo que ya he leído varias veces).

Será que nos contactamos por MSN para envbiarte los archivos y los puedas ver tu mismo?
__________________
Mis dibujos: Click Aquí
  #6 (permalink)  
Antiguo 16/11/2007, 12:00
Avatar de _minimalnet_  
Fecha de Ingreso: diciembre-2006
Ubicación: Valencia
Mensajes: 302
Antigüedad: 11 años
Puntos: 6
Re: Maquetando en CSS... ¡Un dolor de cabeza!

El contenido de una página, que yo sepa, es así:


Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../stylesheet.css" rel="stylesheet" type="text/css">
</head>


<body>

<div id="footer"></div>

</body>

</html>
Lo verde es el header, lo rojo es el body, y el footer va dentro del body pero cerrado con su div correspondiente.
__________________
mi blog --> www.minimalnet.org
  #7 (permalink)  
Antiguo 16/11/2007, 12:04
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Maquetando en CSS... ¡Un dolor de cabeza!

<table width="800" height="100%" border="0" cellspacing="0" cellpadding="0">

probalo ahora
  #8 (permalink)  
Antiguo 16/11/2007, 13:28
Avatar de ghosthead-nebula  
Fecha de Ingreso: marzo-2007
Mensajes: 273
Antigüedad: 10 años, 9 meses
Puntos: 3
Re: Maquetando en CSS... ¡Un dolor de cabeza!

Ya no es necesario. Ya lo resolví. Hice el maquetado con contenedores (tuve que quitar las tablas) y los contenedores los puse en relative (cuerpo + header) y absolute (pie).

Me funciona perfecto para ambos navegadores, y con lo de las celdas con poco contenido lo resolví con la etiqueta !important.

De todos modos gracias por su ayuda chicos =)
__________________
Mis dibujos: Click Aquí
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 20:45.