Retroceder   Foros del Web > Diseño de Sitios web > CSS

Respuesta
 
Herramientas Desplegado
Antiguo 28-may-2007, 07:20   #1 (permalink)
Nemutagk está en el buen camino
 
Avatar de Nemutagk
 
Fecha de Ingreso: marzo-2004
Ubicación: Distrito Federal
Mensajes: 339
Enviar un mensaje por MSN a Nemutagk Enviar un mensaje por Yahoo  a Nemutagk
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 crazy_man3042@hotmail.com" />
<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
__________________
(_¸,o*º°º*o,o*>ñèmû†âgk<*o,o*º°º*o,¸_)
Vida solo hay una...
Y no hay como vivirla con una consola Nintendo

Última edición por Nemutagk; 28-may-2007 a las 07:33.
Nemutagk está desconectado   Responder Citando
Antiguo 28-may-2007, 14:42   #2 (permalink)
Nemutagk está en el buen camino
 
Avatar de Nemutagk
 
Fecha de Ingreso: marzo-2004
Ubicación: Distrito Federal
Mensajes: 339
Enviar un mensaje por MSN a Nemutagk Enviar un mensaje por Yahoo  a Nemutagk
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
__________________
(_¸,o*º°º*o,o*>ñèmû†âgk<*o,o*º°º*o,¸_)
Vida solo hay una...
Y no hay como vivirla con una consola Nintendo
Nemutagk está desconectado   Responder Citando
Antiguo 28-may-2007, 15:38   #3 (permalink)
Moderador
Al Zuwaga es realmente agradableAl Zuwaga es realmente agradableAl Zuwaga es realmente agradableAl Zuwaga es realmente agradableAl Zuwaga es realmente agradableAl Zuwaga es realmente agradable
 
Avatar de Al Zuwaga
 
Fecha de Ingreso: noviembre-2002
Ubicación: 34.517 S, 58.500 O
Mensajes: 12.442
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
Al Zuwaga está desconectado   Responder Citando
Antiguo 28-may-2007, 15:45   #4 (permalink)
Nemutagk está en el buen camino
 
Avatar de Nemutagk
 
Fecha de Ingreso: marzo-2004
Ubicación: Distrito Federal
Mensajes: 339
Enviar un mensaje por MSN a Nemutagk Enviar un mensaje por Yahoo  a Nemutagk
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!!!!
__________________
(_¸,o*º°º*o,o*>ñèmû†âgk<*o,o*º°º*o,¸_)
Vida solo hay una...
Y no hay como vivirla con una consola Nintendo
Nemutagk está desconectado   Responder Citando
Respuesta

No hay votos aún.


Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder temas
No puedes subir archivos adjuntos
No puedes editar tus mensajes

BB code is Activado
Caritas están Activado
[IMG] está Activado
Código HTML está Desactivado


La Zona horaria es GMT -6. Ahora son las 03:37.


Message Board Statistics

LinkBacks Enabled by vBSEO 3.1.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93