Comunidad de diseño web y desarrollo en internet online

problemas al mostrar imagenes

Citar            
MensajeEscrito el 15 Jun 2012 02:47 am
Hola resulta ser que estoy practicando html y css ya que soy nuevo en esto pero tengo un problema,

hice un diseño en el que tengo un wrapper, dentro de el wrapper va un header y otro div al que le llame content.

Tanto el header como el content llevan unas imagenes de fondo para probar como quedan. El problema es que no se muestran las imagenes, no se que estoy haciendo mal.

Alguien me puede asistir por favor. aqui subi el ejemplo http://www.grupog3cr.com/clasesjavier/2/

Les agradezco su colaboración y les felicito.

Por grupog3

0 de clabLevel



 

chrome
Citar            
MensajeEscrito el 18 Jun 2012 07:49 am
Hola grupog3.
Me he metido en tu página y, efectivamente, no se ven las imágenes.
Mirando el HTML de tu web veo esto:

Código :

<body>
     <div id="wrapper">
          <header>
          </header><!-- end header -->
          <content>
          </content><!-- end content -->
          </div><!-- end wrapper -->
</body>


y mirando tu css veo esto:

Código :

#body{ background: #CCC font 12px,verdana,geneva,sans-serif;}
#wrapper{ margin:0 auto; background:#CCC; width:1200px; height:700px;}
#header{ margin:0 auto; background:url(../images/header2.jpg);}
#content{ margin:0 auto; background:url(../images/background2.jpg);} 


No estas referenciando correctamente los id del css en tu html.

tu código html debería ser este:

Código :

<body>
     <div id="wrapper">
          <div id="header">
          </div><!-- end header -->
          <div id="content">
          </div><!-- end content -->
     </div><!-- end wrapper -->
</body>


El CSS esta bien..... o casi bien; tienes que darles una altura a los divs header y content igual a la altura de la imagen de fondo, o no se verá.
algo así:

Código :

#body{
      background: #CCC;
      font 12px,verdana,geneva,sans-serif;
}
#wrapper{
      margin:0 auto;
      background:#CCC;
      width:1200px;
      height:700px;
}
#header{
      background:url(../images/header2.jpg);
     height: /*altura de la imagen de fondo*/;
}
#content{ 
     background:url(../images/background2.jpg);
     height: /*altura de la imagen de fondo*/;
} 


ya me diras si te ayudó en algo.
Un saludo.

Por terreo76

12 de clabLevel



 

Diseñador web

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.