Cabecera Invisible

dezagus · #1 (**permalink**) 05/11/2010, 17:54

Me incurcioné en el CSS y llevo 3hs programando y descubiendo como funciona.
Fui tomando códigos de otros lados, adaptandolos, creando cajas!!! es algo rarisimo ya que siempre me manejé con tablas.

Bien, les comento mi problema, diseñé 3 cajas dentro de una caja que se alinea en el centro de la pantalla.

Una caja es la cabecera, otra el contenido y otra el pie..., clásica web.

El problema es que cuando intento visualizar la cabecera con dreamwaver no se ve, mientras que todo lo demás si.

¿Porque podría ser?

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
	
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url(ImgyStile/bg.png);
}
	
.Sub-Fondo {
 width: 926px;
 height: 642px;
 position: absolute;
 left: 50%;
 top: 50%;
 margin-top: -321px;
 margin-left: -463px;
 }

.Fondo {
 width: 926px;
 height: 431px;
 background-image: url(ImgyStile/Fondo-Cuadro.png);
 }
 
 .Fondo-SepBordeCostado {
 width: auto;
 height: 100%;
 margin-left: 15px;
 margin-right: 15px;
 }
 
 .Fondo-SepBordeCostado-Izq {
 width: 541px;
 height: 391px;
 margin-left: 10px;
 margin-right: 10px;
 margin-top: 30px;
 margin-bottom: 10px;
 float: left;
 }
 
 .Fondo-SepBordeCostado-EspDer {
 width: 275px;
 height: 339px;
 margin-left: 10px;
 margin-right: 30px;
 margin-top: 46px;
 margin-bottom: 46px;
 background-image: url(ImgyStile/Fondo-Info-Contenedor.png);
 float: right;
 }
 
 
  .Cabecera {
 width: 926px;
 height: 49px;
 margin-bottom: 4px;
 }
 
   .Pie {
 width: 918px;
 height: 158px;
 margin-left: 4px;
 margin-right: 4px;
 margin-top: 10px;
 background-image: url(ImgyStile/Fondo-Fotos.png);
 }




</style>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
    <body>
	
				<div class="Sub-Fondo">
	
	
			<div class="Cabecera">
			<img src="ImgyStile/Titulo.png" width="349" height="49">
			</div>
			
			
			<div class="Fondo">
			<div class="Fondo-SepBordeCostado">
		
		<div class="Fondo-SepBordeCostado-Izq"> </div>
		<div class="Fondo-SepBordeCostado-EspDer"></div>

			</div>
			</div>
			
			<div class="Pie"></div>
			
			
			
				</div>
				
    </body>
</html>

Gracias desde ya!!!

dezagus · #2 (**permalink**) 05/11/2010, 17:55

PD: Tuve que llamar a mi viejo y diagramar las cajas en un papel antes de comenzar y calcular los tamaños con calculadora.

¿Es normal? o estoy haciendo algo mal? jajajajaj.

dezagus · #3 (**permalink**) 05/11/2010, 18:55

Una ayuda? please...

PrendekZ · #4 (**permalink**) 05/11/2010, 19:22

Mira grandes cosas:

El desespero no te soluciona nada, solo te genera 2 cosas:

1- El desespero hace que no logres una concentración.
2- El desespero hace que incomodes a los demás, como lo haz hecho en este post pidiendo ayuda.

Bueno ya respondiendo a su mensaje, eh mejorado mucho su código.. antes era más de 100 lineas, ahora solo son 28 lineas de código.

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{background-image: url(ImgyStile/bg.png); margin:0;}
.Sub-Fondo{width:926px; height:642px; position:absolute; left:50%; top:50%; margin:-321px 0 0 -463px; overflow:hidden;}
.Fondo{background:url(ImgyStile/Fondo-Cuadro.png); width:926px; height:431px;}
.Fondo-SepBordeCostado{width:auto; height:100%; margin:0 15px; overflow:hidden;}
.Fondo-SepBordeCostado-Izq{width:541px; height:391px; margin:30px 10px 10px 0; float:left;}
.Fondo-SepBordeCostado-EspDer{background:url(ImgyStile/Fondo-Info-Contenedor.png); width:275px; height:339px; margin:46px 30px 46px 10px; float:right;}
.Cabecera{width:926px; height:49px;margin:0 0 4px 0;}
.Pie{background:url(ImgyStile/Fondo-Fotos.png); width:918px; height:158px; margin:10px 4px 0 4px; overflow:hidden; clear:both;}
</style>
</head>
<body>
<div class="Sub-Fondo">
<div class="Cabecera"><img src="ImgyStile/Titulo.png" width="349" height="49" /></div>
<div class="Fondo">
<div class="Fondo-SepBordeCostado">
<div class="Fondo-SepBordeCostado-Izq"></div>
<div class="Fondo-SepBordeCostado-EspDer"></div>
</div>
</div>
<div class="Pie"></div>
</div>
</body>
</html>

Saludos y espero que te sirva!

En caso de que no sirva, publica para ver que no te funciona y así poderte ayudar!

ayukkonen · #5 (**permalink**) 06/11/2010, 05:45

Consejos:

- No te recomiendo usar guiones medios a la hora de declarar clases.
- No te recomiendo que a la imagen que estás queriendo mostrar en la cabecera le determines el tamaño en el código HTML, házlo en el CSS.
- No te recomiendo que te impacientes y escribas varios mensajes seguidos... Espera y en cuánto alguien pueda te contestará y tratará de ayudarte.
- Acostúmbrate a tabular el código para ir llevando un orden lógico y poder ver mejor la estructura y ver mejor posibles errores.
- Es bueno que pongas imágenes orientativas de cómo se te ve, eso puede ayudarnos a ver más rápido tu problema.
- Y bueno, entiendo que seas novato pero... Ve usando también hojas de estilos externas, así divides más el código y está todo mucho más ordenado.
- Te aconsejo que utilices editores de texto plano, así aprenderás más, por ejemplo: Notepad ++ ó Gedit.

Y finalmente te digo... Que probablemente no se vea en Dreamweaver debido a algún error en la ruta de la imagen.

Saludos.

dezagus · #6 (**permalink**) 06/11/2010, 06:01

Gracias a los dos