Foros del Web » Creando para Internet » CSS »

Problema con fondo de un div

Estas en el tema de Problema con fondo de un div en el foro de CSS en Foros del Web. Buenas compañeros foreros =P, acudo a ustedes ya que no he podido solucionar un problema que traigo con el fondo de un div, y como ...
  #1 (permalink)  
Antiguo 28/05/2007, 08:20
Avatar de Nemutagk
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: México
Mensajes: 2.633
Antigüedad: 13 años, 8 meses
Puntos: 406
Problema con fondo de un div

Buenas compañeros foreros =P, acudo a ustedes ya que no he podido solucionar un problema que traigo con el fondo de un div, y como dicen que una imagen dice mas que mil palabras mi problema es el siguiente
se dan cuenta que hay una franja entre la imagen de cabecera y el header, bueno, pues esto solo me sucede en firefox con un doctype xhtml 1.0 strict ya que si lo pongo transicional no aparece dicha franja (cabe decir que va perfecto eninternet explorer), el problema se encuetra en el div contenedor, aparece ese borde transparente, he aqui mi codigo html y css
HTML
Código PHP:
<!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" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Nemuword - Inicio</title>
<meta name="Description" content="Blog personal dedicado a la tecnologia, actualidad, programas, videojuegos y muchas cosas mas..." />
<meta name="Keywords" content="blog,programas,software,hardware,videojuegos,tecnologia,actualidad,programacion,dise&ntilde;o,maquetacion" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Lord Nemutagk [email protected]" />
<meta http-equiv="Content-Language" content="es" />
<?php require_once("meta_links.php"); ?>
<link href="css/general.css" rel="stylesheet" type="text/css" />
<script src="js/general.js" type="text/javascript"></script>
</head>

<body>
<div id="div_base">

  <div id="div_cabecera"><img src="img/cabecera.jpg" alt="Cabecera Nemu Word" width="750" height="145" /></div>
  <div id="div_fondo_contenedor">
    <div id="div_contenedor">
      <div id="div_cuerpo">
        <noscript>
        <div id="div_noscript"><img src="img/noscript.gif" alt="NoScript" width="23" height="25" />Tu navegador no soporta o no tiene activado Javascript, puede que no funcione correctamente el sitio, por favor, para tener una experiencia completa, activalo!!! </div>
        </noscript>
        <h1>Inicio</h1>
        <p>&nbsp;</p>
      </div>
      <div id="div_menu">
        <ul>
          <li class="menu_cabecera">Categor&iacute;as</li>
          <li><a href="index.php" title="Regresar al inicio" accesskey="i">Inicio</a></li>
          <li><a href="index.php?cat=actualidad" title="Temas referentes a Actualidad">Actualidad</a></li>
          <li><a href="index.php?cat=tecnologia" title="Temas referentes a Tecnolog&iacute;a">Tecnolog&iacute;a</a></li>
          <li><a href="index.php?cat=programacion" title="Temas referentes a Programaci&oacute;n">Programaci&oacute;n</a></li>
          <li><a href="index.php?cat=dieno" title="Temas referentes a Dise&ntilde;o y Maquetaci&oacute;n">Dise&ntilde;o y Maquetaci&oacute;n</a></li>
          <li><a href="index.php?cat=ocio" title="Temas referentes a Ocio">Ocio</a></li>
          <li><a href="index.php?cat=videojuegos" title="Temas referentes a Videojuegos">Videojuegos</a></li>
          <li><a href="index.php?cat=software" title="Temas referentes a Software">Software</a></li>
          <li><a href="index.php?cat=hardware" title="Temas referentes a Hardware">Hardware</a></li>
          <li><a href="index.php?cat=recursos" title="Temas referentes a Recursos">Recursos</a></li>
          <li><a href="index.php?cat=proyectos" title="Temas referentes a Proyectos">Proyectos</a></li>
          <li><a href="index.php?cat=dibujo" title="Temas referentes a Dibujo">Dibujo</a></li>
            </ul>
            <ul>
              <li class="menu_cabecera">Suscripci&oacute;n</li>
              <li><span lang="en">Feed</span> Nemu Word </li>
            </ul>
            <form id="cuenta" method="post" action="" onsubmit="return validar_login()">
              <ul>
                <li class="menu_cabecera">Mi Cuenta</li>
                <li>
                  <label for="txt_user">
                  <input name="txt_user" type="text" id="txt_user" value="Usuario" onfocus="cam_login(1)" onblur="cam_login(1)" />
                  </label>
                </li>
                <li>
                  <label for="txt_pass">
                  <input name="txt_pass" type="password" id="txt_pass" value="Contrase&ntilde;a" onfocus="cam_login(2)" onblur="cam_login(2)" />
                  </label>
                </li>
                <li>
                  <label for="Submit2">
                  <input type="submit" name="Submit2" id="Submit2" value="Iniciar Sesi&oacute;n" />
                  </label>
                </li>
                <li>Recuperar contrase&ntilde;a    </li>
              </ul>
            </form>
      </div>
      <div class="div_oculto">Colocar aquí el contenido para  class &quot;div_oculto&quot;</div>
    </div>
  </div>
  <div id="div_piepag"><p lang="en"><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.5/mx/" title="Licensed Creative Commons"><img src="img/80x15.png" alt="Creative Commons License" width="80" height="15" style="border-width:0" /></a><br />
      This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.5/mx/" title="Licencia Creative Commons">Creative Commons Attribution-Noncommercial-Share Alike 2.5 M&eacute;xico License</a></p>
    <p>Dise&ntilde;o y Programacion por Lord Nemutagk. Si necesita m&aacute;s informaci&oacute;n sobre este Sitio, por favor visite <span lang="en">Info Site</span>.</p>
    <p>2007 - <?php echo date("Y"); ?>      </p>
    <ul>
      <li><a href="http://validator.w3.org/check?uri=http://tokio3.no-ip.org/nemu" title="Validar el co&oacute;digo XMHTL" class="texto_centrado"><img src="img/validar_xhtml.gif" alt="Validar XHTML" width="56" height="26" /></a></li>
      <li><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://tokio3.no-ip.org/nemu" title="Validar el co&oacute;digo CSS"><img src="img/validar_css.gif" alt="Validar CSS" width="50" height="24" /></a></li>
    </ul>
  </div>
</div></body>
</html>
CSS
Código:
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    margin: 0px;
    padding: 0px;
    background-attachment: fixed;
    background-image: url(../img/fondo_body.jpg);
    background-repeat: repeat-x;
    background-position: bottom;
}
a:link, a:active, a:visited {
    color: #0000FF;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
img {
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    margin: 0px;
    padding: 0px;
}
form {
    margin: 0px;
    padding: 0px;
}
input {
    margin: 0px;
}
#div_base {
    margin: auto;
    width: 750px;
    background-image: url(../img/fondo_div_02.jpg);
    background-repeat: repeat-y;
    background-position: right;
}
#div_cabecera {
    margin: 0px;
    padding: 0px;
}
#div_fondo_contenedor {
    background-image: url(../img/fondo_contenido.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-color: #FFFFFF;
}

#div_contenedor {
    background-image: url(../img/fondo_div.jpg);
    background-repeat: no-repeat;
    background-position: top;
    margin: 0px;
    padding: 0px;
    overflow: auto;
}
#div_cuerpo {
    float: left;
    width: 560px;
    padding: 5px;
}
#div_noscript {
    padding: 5px;
    color: #F34947;
    background-color: #FFFFC6;
    border: 1px dashed #FF0000;
}
#div_noscript img {
    vertical-align: top;
}
#div_menu {
    text-align: right;
    float: right;
    width: 180px;
    background-image: url(../img/fondo_menu_03.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    margin-top: 15px;
    padding-top: 15px;
}
#div_menu ul {
    list-style-type: none;
    margin-right: 5px;
    margin-left: 6px;
    padding-right: 5px;
    padding-left: 6px;
}
#div_menu li {
    padding-top: 3px;
    padding-bottom: 1px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #ACAAF2;
}
#div_piepag {
    background-image: url(../img/fondo_piepag.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    padding-top: 29px;
    font-size: 0.7em;
    text-align: center;
    padding-bottom: 10px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #B7B5F9;
    clear: both;
}
#div_piepag ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#div_piepag li {
    display: inline;
    margin: 0px;
    padding: 0px;
}

#div_piepag p {
    padding: 0px;
    vertical-align: bottom;
    margin: 0px;
}
.input_size {
    width: 65px;
}

.div_oculto {
    display: none;
    clear: both;
}
aqui les pongo un link si gustan verlo directamente http://tokio3.no-ip.org/nemu
les agradesco cualquier comentario o ayuda que puedan ofrecer y de antemano gracias
__________________
Listo?, tendría que tener 60 puntos menos de IQ para considerarme listo!!!
-- Sheldon Cooper
http://twitter.com/nemutagk
PD: No contestaré temas vía mensaje personal =)

Última edición por Nemutagk; 28/05/2007 a las 08:33
  #2 (permalink)  
Antiguo 28/05/2007, 15:42
Avatar de Nemutagk
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: México
Mensajes: 2.633
Antigüedad: 13 años, 8 meses
Puntos: 406
Re: Problema con fondo de un div

Bueno, al final, me autorespondo, el problema era por un espacio que se generaba entre la imagen de la cabeera y el borde de la div, por extraño que estos sea ya que ambas (img y div) se le habia asignado margin: 0px y padding: 0px; asi mismo a la img se le quito todo tipo de borde, pero bueno, la "solucion" que encontre fue asignarle el tamaño de la imagen al div...

de antemano gracias a todos los que se interesaron
__________________
Listo?, tendría que tener 60 puntos menos de IQ para considerarme listo!!!
-- Sheldon Cooper
http://twitter.com/nemutagk
PD: No contestaré temas vía mensaje personal =)
  #3 (permalink)  
Antiguo 28/05/2007, 16:38
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: Problema con fondo de un div

Hola, creo que ese espacio que deja la imagen se debe a que la alineación vertical predeterminada de las imágenes es baseline. Esto es, que se alinea a la línea de base de las letras. La línea de base es.. como explicarlo... la parte más abajo de, por ejemplo, la letra a. La letra j (o la g, p, q y la y) se van por debajo de esta línea de base. Entonces, la imagen deja ese espacio reservado por si llegase a existir un caracter de estos ¿Me explico?

Para eliminar ese espacio (o especie de padding... o margin), podés darle a la imagen un vertical-align: text-bottom;. El text-bottom es, siguiendo el mismo ejemplo, la parte de más abajo de la letra p.

Saludos
  #4 (permalink)  
Antiguo 28/05/2007, 16:45
Avatar de Nemutagk
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: México
Mensajes: 2.633
Antigüedad: 13 años, 8 meses
Puntos: 406
Re: Problema con fondo de un div

yea!!!!, como siempre, ustedes me sacan de cada apuro, efectibamente, era lo que esta ocacionando dicho espacio, ahora todo anda perfecto, de antemano gracias!!!!
__________________
Listo?, tendría que tener 60 puntos menos de IQ para considerarme listo!!!
-- Sheldon Cooper
http://twitter.com/nemutagk
PD: No contestaré temas vía mensaje personal =)
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 19:28.