Comunidad de diseño web y desarrollo en internet online

Mini problem con div

Foros de discusión > Javascript y jQuery

Citar            
MensajeEscrito el 26 Jul 2007 04:07 pm
Siempre ha pasado lo de los problemas de espacio pero por màs que investigo en este no se que sucede:

Código :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ENERGY SOLUTIONS C.A</title>
<link href="Scripts/energy solutions2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
   background-color: #666666;
   margin-top: 30px;
   background-image: url();
}
.style1 {
   color: #0135AD;
   font-weight: bold;
}
.style2 {font-size: 12px}
.style4 {
   color: #0135AD;
   font-size: 12px;
}
.style5 {color: #0135AD; font-weight: bold; font-size: 12px; }
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div id="contenido">
<div id="top">
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','851','height','145','title','top','src','top','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','top' ); //end AC code</script><noscript>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="851" height="145" title="top">
    <param name="movie" value="top.swf" />
    <param name="quality" value="high" />
    <embed src="top.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="851" height="145"></embed>
  </object>
  </noscript>
  </div>
  
<div id="imagen"></div>
<div id="info"><div id="txt1">
  <p class="style1">&nbsp;</p>
  <p class="style4">BIENVENIDOS A NUESTRO SITIO WEB </p>
  <p class="style5">&nbsp;</p>
  <p class="style2">Energy Solutions es una empresa que provee un servicio innovador de soluciones integrales,  con una estructura de operaci&oacute;n flexible, multidisciplinar&iacute;a, de alta eficiencia para la industria energ&eacute;tica, lo cual nos permite cumplir con las mas altas exigencias, reduciendo nuestros tiempos de respuestas, costos de operaci&oacute;n y generando los mayores beneficios para nuestros clientes.</p>
  <p>&nbsp;</p>
  <p>  </p>
  <div id="foto">
    <div align="left"><img src="images/foto_01.jpg" alt="foto_01" width="143" height="107" /></div>
  </div>
  <div id="foto">
    <div align="left"><img src="images/foto_02.jpg" alt="foto2" width="143" height="109" /></div>
  </div><div id="foto">
    <div align="left"><img src="images/foto_03.jpg" alt="foto3" width="143" height="108" /></div>
  </div>
  </div>
</div>
<div id="barrita">
  <div align="center" div id="textodiv">
    <p>Energy Solutions C.A - Todos los derechos Reservados</p>
    </div>
</div>
</div>
</body>
</html>


Donde barrita es la unica que da problemas ya que debe estar pegado como una barra debajo de sus otros divs. Pero este genera un gran espacio que hace que las separe. Tambien el div barrita esta dentro de uno llamado "contenido". Aqui les dejo las css. Màs o menos pueden explicarme el problema? muchas gracias

Código :

#contenido {
   background-color: #666666;
   width: 849px;
   margin-left: auto;
   margin-right: auto;
   height: 595px;
}
#top {
   margin: 0px;
   height: 135px;
   width: 849px;
}
#imagen {
   background-image: url(../images/imagen.jpg);
   background-repeat: no-repeat;
   margin: 0px;
   float: left;
   height: 434px;
   width: 300px;
}
#info {
   float: left;
   height: 434px;
   width: 549px;
   background-image: url(../images/info.jpg);
   background-repeat: no-repeat;
}
#barrita {
   background-image: url(../images/barrita.jpg);
   background-repeat: repeat-x;
   height: 22px;
   width: 849px;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #FFFFFF;
   float: left;
   display: table;
}
#txt {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   text-align: left;
   height: 370px;
   width: 590px;
   margin-right: 15px;
   margin-left: 15px;
   color: #333333;
   overflow: auto;
   padding-top: 13px;
   padding-right: 0px;
   padding-bottom: 0px;
   padding-left: 0px;
}
#foto {
   height: 98%;
   width: 130px;
   float: left;
   padding: 0px;
   margin-top: 0px;
   margin-right: 20px;
   margin-bottom: 0px;
   margin-left: 7px;
}
#imagen2 {
   background-image: url(../images/image_02.jpg);
   float: left;
   height: 435px;
   width: 230px;
}
#info2 {
   float: right;
   height: 435px;
   width: 618px;
   background-image: url(../images/info_02.jpg);
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #000000;
   text-align: justify;
   text-indent: 5px;
}
#titulo {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: #FFFFFF;
   background-color: #056BAD;
   margin-top: 35px;
   margin-right: 15px;
   margin-bottom: 5px;
   margin-left: 15px;
   width: 600px;
   height: 16px;
}
#txt2 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #333333;
   height: 400px;
   width: 590px;
   margin-top: 10px;
   margin-right: 15px;
   margin-bottom: 0px;
   margin-left: 15px;
}
#txt1 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #333333;
   height: 430px;
   width: 520px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 10px;
   text-align: justify;
}
#titulo2 {

   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: #FFFFFF;
   background-color: #056BAD;
   margin-top: 35px;
   margin-right: 15px;
   margin-bottom: 0px;
   margin-left: 15px;
   width: 589px;
   height: 16px;
}
#galeria {
   float: left;
   height: 100%;
   width: 152px;
   margin-top: 35px;
   margin-right: 35px;
   margin-bottom: 0px;
   margin-left: 9px;
}
#galeria2 {

   float: right;
   height: 100%;
   width: 152px;
   margin-top: 25px;
   margin-right: 35px;
   margin-bottom: 0px;
   margin-left: 9px;
}
#galeria3 {
   float: right;
   height: 100%;
   width: 250px;
   margin-top: 30px;
   margin-bottom: 0px;
   margin-left: 10px;
   margin-right: 30px;
}
#contacto {
   float: left;
   height: 100%;
   width: 310px;
   margin-top: 15px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   margin-left: 10px;
   margin-right: 0px;
   margin-bottom: 0px;
}
#txtcont {

   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #333333;
   height: 430px;
   width: 520px;
   margin-top: 0px;
   margin-bottom: 0px;
   text-align: justify;
}
#top2 {

   margin: 0px;
   height: 595px;
   width: 849px;
}
:wink: Pienso que tiene que ver con el contenido y la barrita, un espacio imaginario que crea el bello explorer 6... :bate:

Por onnasama

325 de clabLevel

1 tutorial

 

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 26 Jul 2007 05:46 pm
Hola onnasama

Al principio pensé que era una falla en los floats, pero luego vi donde estaba el problema real:
Tu div "#info", estaba con una altura 434px, y tus imagenes (o algun otro bloque) se expande más alla de este tamaño (creo que son las imagenes, por lo del height:100%). Firefox interpreta eso de la forma que debe ser, y limita el alto del div, dejando que sus child se salgan. En cambio, ie6 hace que el contenedor se expanda para brazar a sus hijos (tierno, no?).

La cosa es cuestion de si quieres que tenga los 434 o se pueda expandir. Si quieres la primera opcion, pon

Código :

height:434px;
overflow: hidden; /* Puede ser hidden, scroll, auto.. segun te sirva */

Si quieres mejor que crezca, quita la especificacion de atura.

Como adicional, te sugiero que revises el uso de los id y las classes. En tu documento tienes 3 imagenes con el id "foto". Esto no es valido, ya que un id solo se le puede aplicar a un elemento. No obstante, puedes usar la clase foto ( " .foto " en el css y " class='foto' " en el elemento ) para solucionar esa fallita.

Otra cosa que te recomiendo (a riesgo de parecer muy complcado) es que indentes tu codigo. Es mucho mas legible

Código :

<div class="foto">
   <div align="left">
      <img src="images/foto_03.jpg" alt="foto3" width="143" height="108" />
   </div>
</div>

que

Código :

<div id="foto">
    <div align="left"><img src="images/foto_01.jpg" alt="foto_01" width="143" height="107" /></div>
  </div>


Y ahora si lo ultimo: Estas usando el entitie nbsp para dar espacios, cosa no muy recomendable. Mejor usas paddings y margins, eso te ahorra mucho trabajo.

A continuacion una versión "corregida" de lo que pasaste :)

Código :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ENERGY SOLUTIONS C.A</title>
<link href="Scripts/energy solutions2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
   background-color: #666666;
   margin-top: 30px;
   background-image: url();
}
.style1 {
   color: #0135AD;
   font-weight: bold;
}
.style2 {
font-size: 12px;
padding-bottom:40px;
}
.style4 {
   color: #0135AD;
   font-size: 12px;
   margin:30px 0 50px 0;
   
}
.style5 {color: #0135AD; font-weight: bold; font-size: 12px; }
-->
</style>
<style>
#contenido {
   background-color: #666666;
   width: 849px;
   margin-left: auto;
   margin-right: auto;
   height: 595px;
}
#top {
   margin: 0px;
   height: 135px;
   width: 849px;
}
#imagen {
   background-image: url(../images/imagen.jpg);
   background-repeat: no-repeat;
   background:#f8a;
   margin: 0px;
   float: left;
   height: 434px;
   width: 300px;
}
#info {
   float: left;
   height:auto;
   width: 549px;
   background-image: url(../images/info.jpg);
   background-repeat: no-repeat;
 }
#barrita {
   background-image: url(../images/barrita.jpg);
   background-repeat: repeat-x;
   height: 22px;
   width: 849px;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #FFFFFF;
   float: left;
   background:#f00;
   clear:both;
}
#txt {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   text-align: left;
   height: 370px;
   width: 590px;
   margin-right: 15px;
   margin-left: 15px;
   color: #333333;
   overflow: auto;
   padding-top: 13px;
   padding-right: 0px;
   padding-bottom: 0px;
   padding-left: 0px;
}
.foto {
   height: 98%;
   width: 130px;
   float: left;
   padding: 0px;
   margin: 0px 20px 0px 7px;
   background:#f90;
}
#imagen2 {
   background-image: url(../images/image_02.jpg);
   float: left;
   height: 435px;
   width: 230px;
}
#info2 {
   float: right;
   height: 435px;
   width: 618px;
   background-image: url(../images/info_02.jpg);
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #000000;
   text-align: justify;
   text-indent: 5px;
}
#titulo {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: #FFFFFF;
   background-color: #056BAD;
   margin-top: 35px;
   margin-right: 15px;
   margin-bottom: 5px;
   margin-left: 15px;
   width: 600px;
   height: 16px;
}
#txt2 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #333333;
   height: 400px;
   width: 590px;
   margin-top: 10px;
   margin-right: 15px;
   margin-bottom: 0px;
   margin-left: 15px;
}
#txt1 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #333333;
   height: 430px;
   width: 520px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 10px;
   text-align: justify;
}
#titulo2 {

   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: #FFFFFF;
   background-color: #056BAD;
   margin-top: 35px;
   margin-right: 15px;
   margin-bottom: 0px;
   margin-left: 15px;
   width: 589px;
   height: 16px;
}
#galeria {
   float: left;
   height: 100%;
   width: 152px;
   margin-top: 35px;
   margin-right: 35px;
   margin-bottom: 0px;
   margin-left: 9px;
}
#galeria2 {

   float: right;
   height: 100%;
   width: 152px;
   margin-top: 25px;
   margin-right: 35px;
   margin-bottom: 0px;
   margin-left: 9px;
}
#galeria3 {
   float: right;
   height: 100%;
   width: 250px;
   margin-top: 30px;
   margin-bottom: 0px;
   margin-left: 10px;
   margin-right: 30px;
}
#contacto {
   float: left;
   height: 100%;
   width: 310px;
   margin-top: 15px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   margin-left: 10px;
   margin-right: 0px;
   margin-bottom: 0px;
}
#txtcont {

   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #333333;
   height: 430px;
   width: 520px;
   margin-top: 0px;
   margin-bottom: 0px;
   text-align: justify;
}
#top2 {

   margin: 0px;
   height: 595px;
   width: 849px;
}
</style>
</head>

<body>
<div id="contenido">
<div id="top">
  <script type="text/javascript">
   AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','851','height','145','title','top','src','top','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','top' ); //end AC code</script><noscript>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="851" height="145" title="top">
    <param name="movie" value="top.swf" />
    <param name="quality" value="high" />
    <embed src="top.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="851" height="145"></embed>
  </object>
  </noscript>
 </div>
  
<div id="imagen"></div>
<div id="info">
   <div id="txt1">
      <p class="style4">
         BIENVENIDOS A NUESTRO SITIO WEB
      </p>
      <p class="style2">
         Energy Solutions es una empresa que provee un servicio innovador de soluciones integrales,  con una estructura de operaci&oacute;n flexible, multidisciplinar&iacute;a, de alta eficiencia para la industria energ&eacute;tica, lo cual nos permite cumplir con las mas altas exigencias, reduciendo nuestros tiempos de respuestas, costos de operaci&oacute;n y generando los mayores beneficios para nuestros clientes.
      </p>
      <div class="foto">
         <div align="left">   
            <img src="images/foto_01.jpg" alt="foto_01" width="143" height="107" />
         </div>
      </div>
      <div class="foto">
         <div align="left">
            <img src="images/foto_02.jpg" alt="foto2" width="143" height="109" />
         </div>
      </div>
      <div class="foto">
         <div align="left">
            <img src="images/foto_03.jpg" alt="foto3" width="143" height="108" />
         </div>
      </div>
   </div>
</div>
<div id="barrita">
  <div align="center" div id="textodiv">
    <p>
      Energy Solutions C.A - Todos los derechos Reservados
   </p>
   </div>
</div>
</div><!--end contenido-->
</body>
</html>

Tip: Si usas el dtd de XHTML estricto, ie no va a molestar tanto en algunas cosas del modelo de caja

Saludos, y dime que tal te funciono ;)

Por Lunatic Lycanthrop

Claber

1203 de clabLevel

7 tutoriales

1 ejemplo

Genero:Masculino  

Envíale un mensaje privado    

The dark places where wolves access internet with 46,6 kbps

firefox
Citar            
MensajeEscrito el 26 Jul 2007 06:27 pm
Segun el análisis que le hice ahorita a la pàgina con tu ayuda me di cuenta que era la
parte de las imagenes que tenian en su height 98% lo que hacia que el div se
saliera como loco, ahora acomodandolo a su medida real que es de 98px en vez de 98% queda
justo donde es sin tener que distorcionar el layout! :3 asi que ie6 abrazara a sus hijos U_U

Por ahora no quiero expandirlo, gracias por el dato.

En el caso de las id, me recomendaron que para imagenes de un mismo tamaño como
galerias, me recomendaron que usara un mismo div, y creanme luche para decir que
fueran diferentes pero me dijeron que lo mejor era asi, xD seguire tus consejos,
significa que si coloco .Foto es una clase, y si es #Foto es un ID?, esta parte me
confunde un poco.

Que es Indentar el Código? es darle algun orden especifico?

Si el entitie nbsp me ta dando problemas. Evitare usarlo D:

Como hago para usar el dtd de XHTML estricto?

Muchisimas gracias Lunatic Lycanthrop! Con esto he aprendido màs de divs!
T_T gracias muchas gracias T_T

Por onnasama

325 de clabLevel

1 tutorial

 

Envíale un mensaje privado    

firefox
Foros de discusión > Javascript y jQuery

   Página 1 de 1

 

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