Foros del Web » Creando para Internet » CSS »

Problemas con un Div travieso

 Estas en el tema de Problemas con un Div travieso en el foro de CSS en Foros del Web. Saludos. En primer lugar gracias por adelantado a quien se tome su tiempo para ayudarme. Soy un "vieja escuela" (de los que llenaban todo de ...
  #1 (permalink)  
Antiguo 03/07/2011, 08:59
 
Fecha de Ingreso: mayo-2010
Ubicación: Madrid
Mensajes: 19
Antigüedad: 14 años, 6 meses
Puntos: 0
Problemas con un Div travieso
Saludos. En primer lugar gracias por adelantado a quien se tome su tiempo para ayudarme.

Soy un "vieja escuela" (de los que llenaban todo de tablas, y de frames... si, lo reconozco), que trata de adaptarse por exigencias "del guión" y sufro del mal del div... No hay manera de conseguir controlar un div travieso. Os cuento el problema:

Trato de hacer una página que va a llevar contenido dinámico. y tengo todo preparado, pero hay un div que no logro que se quede en su sitio. Es el "footer" que contendría el pie de página. No soy capaz de hacer que salga al final de la página, por algo que se me escapa (producto de mi ignorancia) en lugar de salir en la parte superior.

Para no "ensuciar" el foro, pongo el código limpio, solamente con los divs a ver si algun alma caritativa y sabia en conocimientos me puede echar una mano.

Código HTML:
<!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>
<link rel="stylesheet" href="css/divside.css" type="text/css" charset="iso-8859-1">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="general">
	
	<div id="envoltura">
		
		<div id="header">	
			<div id="logo">logo</div>
			<div id="tjdr">promo</div>	
		</div>
		
		<div id="nav">
			<div id="head-no">decoracion--></div>
			<div id="head-pip">menu--></div>
			<div id="prominent">submenu--></div>
		  
		  <div id="clear"></div>
			
			<div id="pages">
				<div id="columone">A una sola columna--></div>
	  			<div id="colum1">Columna Izquierda--></div>
	  			<div id="colum2">Columna Dcha--></div>
				<div id="columone">Una columna bajo doble columna--></div>
	 		</div>
		</div>
 
  </div>

</div>
				<div id="footer">pie de pagina--></div>
</body>
</html>
y el CSS
Código CSS: 
Ver original
  1. body {
  2.     text-align: center;
  3.     font: 12px arial, sans-serif;
  4.     color: #777;
  5.     background-color: #eee;
  6.     margin:0 auto 0 auto; 
  7.     width:756px; 
  8. }
  9.  
  10. #general {
  11.     width: 756px;
  12.     text-align: center;
  13.     vertical-align: middle;
  14.     top: 50%;
  15.     position:relative   
  16. }
  17.  
  18. #envoltura {
  19.     text-align: left;
  20.     margin: auto;
  21.     width: 755px;
  22.     position:absolute
  23. }
  24.  
  25. #header {
  26.     width: 755px;
  27.     height: 97px;
  28.  
  29. }
  30.  
  31. #logo {
  32.     float: left;
  33.     width: 319px;
  34.     height: 97px;
  35.     margin-left: 3px;
  36. }
  37.  
  38. #tjdr {
  39.     float:right;
  40.     margin-top: 10px;
  41. }
  42.  
  43. #nav {
  44.     height: 350px;
  45.     position:absolute;
  46.  
  47. }
  48.  
  49. #nav a {
  50.     color: #E7E4E4;
  51.     text-decoration: none;
  52.     
  53. }
  54. #nav a:hover {
  55.     color: #8DC9F5;
  56.     text-decoration: none;
  57. }
  58. #nav ul {
  59.     padding: 1px 0 0 0px;
  60.     margin: 0;
  61.     list-style:none;
  62.     position: relative;
  63.     z-index: 1;
  64. }
  65. #nav li {
  66.     list-style:none;
  67.     margin: 0;
  68. }
  69. #nav li#m1 { margin: 53px 81px; }
  70. #nav li#m2 { margin: -14px 13px; }
  71. #nav li#m3 { margin: 31px 15px; }
  72. #nav li#m4 { margin: -11px 10px;  }
  73. #nav li#m5 { margin: 31px 2px; }
  74.  
  75. #head-no {
  76.     position: 97px;
  77.     float:left;
  78.     visibility:visible;
  79.     width: 385px;
  80.     height: 370px;
  81.     background-repeat: repeat-x;
  82.     background-position: center top;
  83. }
  84.  
  85. #head-pip {
  86.     float:right;
  87.     background-position: left top;
  88.     background-color:#00223B;
  89.     position: top;
  90.     width: 370px;
  91.     height: 253px;
  92.             
  93. }
  94.  
  95. #prominent {
  96.     margin: 253px 0 0 0px;
  97.     background-color:#ffffff;
  98.     height:98px;
  99.     width:370;
  100. }
  101.  
  102. #prominent table {
  103.     background-color:#ffffff;
  104.     height:98px;
  105.     width:370;
  106. }
  107.  
  108. #clear {
  109.     clear:inherit;
  110. }
  111.  
  112. /* CONTENIDO DINAMICO */
  113. #pages {
  114. position:absolute;
  115.     width: 755px;
  116. }
  117.  
  118. #colum1 {
  119.     background-color:#ff0000;
  120.     float:left; 
  121.     width:49%;
  122.     position: 97px;
  123. }
  124. #colum2 {
  125.     background-color:#ff00ff;
  126.     float:right;
  127.     width:49%;
  128.     position: 497px;
  129.  
  130. }
  131. #columone {
  132.     clear:both;
  133.     background-color:#00ff00;
  134.     width:100%;
  135.     position: 97px;
  136. }
  137. #footer {
  138.     text-align: center;
  139.     font: 12px arial, sans-serif;
  140.     color: #696969;
  141.     width:100%;
  142.     position:relative;
  143. }

a ver si alguien puede ayudarme a colocar el pie al pie de la página y no en el lugar del cabecero. Seguramente sea una chorrada, pero llevo horas dandole vueltas y sin ver ese "detalle" que se me escapa.

De nuevo, gracias por anticipado!
  #2 (permalink)  
Antiguo 03/07/2011, 23:11
(Desactivado)
  
Fecha de Ingreso: julio-2006
Mensajes: 273
Antigüedad: 18 años, 3 meses
Puntos: 5
Respuesta: Problemas con un Div travieso
Vaya amigo

body {
/*text-align: center;*/
font: 12px arial, sans-serif;
color: #777;
background-color: #eee;
/*margin:0 auto 0 auto;*/
/*width:756px;*/
margin:auto;
}

#general {
width: 756px;
text-align: center;
vertical-align: middle;
/* top: 50%; */
/*position:relative*/
margin:auto;
}

#envoltura {
text-align: left;
margin: auto;
width: 755px;
/*position:absolute*/
}

#header {
width: 755px;
height: 97px;

}

#logo {
float: left;
width: 319px;
height: 97px;
margin-left: 3px;
}

#tjdr {
float:right;
margin-top: 10px;
}

#nav {
height: 350px;
/*position:absolute;*/
margin:auto;

}

#nav a {
color: #E7E4E4;
text-decoration: none;

}
#nav a:hover {
color: #8DC9F5;
text-decoration: none;
}
#nav ul {
padding: 1px 0 0 0px;
margin: 0;
list-style:none;
position: relative;
z-index: 1;
}
#nav li {
list-style:none;
margin: 0;
}
#nav li#m1 { margin: 53px 81px; }
#nav li#m2 { margin: -14px 13px; }
#nav li#m3 { margin: 31px 15px; }
#nav li#m4 { margin: -11px 10px; }
#nav li#m5 { margin: 31px 2px; }

#head-no {
position: 97px;
float:left;
visibility:visible;
width: 385px;
height: 370px;
background-repeat: repeat-x;
background-position: center top;
}

#head-pip {
float:right;
background-position: left top;
background-color:#00223B;
position: top;
width: 370px;
height: 253px;

}

#prominent {
margin: 253px 0 0 0px;
background-color:#ffffff;
height:98px;
width:370;
}

#prominent table {
background-color:#ffffff;
height:98px;
width:370;
}

#clear {
clear:inherit;
}

/* CONTENIDO DINAMICO */
#pages {
/*position:absolute;*/
margin:auto;
width: 755px;
}

#colum1 {
background-color:#ff0000;
float:left;
width:49%;
position: 97px;
}
#colum2 {
background-color:#ff00ff;
float:right;
width:49%;
position: 497px;

}
#columone {
clear:both;
background-color:#00ff00;
width:100%;
position: 97px;
}
#footer {
font: 12px arial, sans-serif;
color: #696969;
width:756px;
/*position:relative;*/
background:#FFFFFF;
margin:auto;
}


utiliza el codigo asi como esta, ya esta centrado y el pie de pagina va donde debe ir, espero te sirva.


Saludos
  #3 (permalink)  
Antiguo 04/07/2011, 04:41
 
Fecha de Ingreso: mayo-2010
Ubicación: Madrid
Mensajes: 19
Antigüedad: 14 años, 6 meses
Puntos: 0
Respuesta: Problemas con un Div travieso
Mil gracias eduardo90 por el código y por tomarte la molestia de repasarlo...

Pero no me "funciona". Es curioso, en el editor de HTML que uso (Dreamweaver), queda PERFECTO, sin embargo al visionarlo en los navegadores (Firefox 5.0 y Iexplorer 8.0.) no salé correctamente... sale todo "descolocado"... Me está volviendo loco...

Etiquetas: Ninguno
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 20:26.