FTP | CCD | Buscar | Trucos | Trabajo | Foros |
|
Registrarse | FAQ | Miembros | Calendario | Guía de estilo | Temas de Hoy |
|
Herramientas | Buscar en Tema | Desplegado |
#1
|
|||
|
|||
CSS y Firefox, problemas con el background color
Estimados Colegas:
Estoy tratando de desarrollar una pagina web exclusivamente con objetos de diseño(divs) pero tengo un problema con el color de fondo del div principal, ya que aunque en internet explorer funcionan perfectamente en firefox el color de fondo no aparece por ningun lado utilizo un div principal que es el contenedor de todos los demas divs que componen la pagina que son 3 divs mas, encabezado, cuerpo y pie, obviamente dentro de esos tres divs hay mas divs, como el encabezado es una altura fija, se la asigno y el div principal efectivamente se ajusta al encabezado y puedo ver el color de fondo. como el div cuerpo es de altura variable, no le asigno ninguna altura y es aqui donde tuerce la puerca el rabo, ya que el div principal ya no se ajusta al div cuerpo y por lo tanto el color de fondo ya no se ve. Mucho menos se ve en el div pie. como les dije en internet explorer funciona perfecto, pero en firefox, el color de fondo desaparece. El codigo a grandes rasgos es el siguiente Código:
<div id="contenedor"> <div id="encabezado">El encabezado de altura fija</div> <div id="cuerpo">Altura Variable, dependiendo de la informacion contenida</div> <div id="pie">altura fija</div> </div> yo lo integre en un div pensando que el color de fondo del div contenedor aplicaria a todos los divs que van dentro. Gracias por au ayuda Alexis De la C |
#2
|
||||
|
||||
Yo lo veo sin problemas, tanto en IE como en FF. Si pones la hoja de estilo quizá nos podamos dar una mejor idea.
// Saludos |
#3
|
|||
|
|||
Estoy con roman, sin el css no hay nada que hacer.
|
#4
|
|||
|
|||
Gracias roman y Cayetano por su ayuda, disculpen que no haya respondido mas rapido, pero ha sido una semana fatal.
aqui esta mi codigo css Código:
@charset "utf-8"; /* CSS Document */ body { background-color: #791515; background-image: url(../img/html_bgcp.gif); background-repeat: repeat-x; margin-top:18px; } a { text-decoration: none; } #contenedor { width: 780px; margin:auto; background-color: #FFFFFF; } #encabezado { position:relative; background-color: #333333; width: 780px; height:206px; float:left; } .espacio { width:780px; height:28px; } .fecha { height:23px; font: 11px "Trebuchet MS", Arial, Helvetica, sans-serif; text-align:right; padding-right: 5px; padding-top: 5px; } #cuerpo { position:relative; width:780px; position: relative; float:left; } #izquierda { width: 200px; float:left; } .cuadro { background-color: #DEE4E7; width: 180px; margin-top: 10px; margin-right: auto; margin-bottom: auto; margin-left: auto; } .cuadroamarillo { width: 180px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; padding-top: 5px; padding-bottom: 5px; background-color: #333333; } .vineta{ margin-right: 5px; margin-left: 5px; float: left; margin-top: 3px; } #menuv { width: inherit; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; width: 180px; } #menuv ul, li { list-style-type:none; } #menuv ul { margin: 0; padding: 0; } #menuv li { border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #6e6e6e; } #menuv a { color: #333333; display: block; padding-top: 4px; padding-right: 6px; padding-bottom: 4px; padding-left: 14px; } #menuv a:hover { text-decoration: none; color: #FFFFFF; padding-left: 10px; background-color: #660000; } #centro { width: 580px; background-color: #FFFFFF; float:left; } #centro p { margin-top:0px; margin-bottom: 0px; } #centro2 { width: 580px; float:left; } .cuadrogrande { background-color: #DEE4E7; width: 560px; margin-top: 10px; margin-right: auto; margin-bottom: auto; margin-left: auto; } .cuadroamarillogd { width: 560px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; padding-top: 5px; padding-bottom: 5px; background-color: #333333; } .fuente { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333; text-decoration: none; padding-top: 0px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } #pie { background-color: #333333; margin-top: 10px; float:left; } .fuentepie { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; text-decoration: none; padding: 8px; } 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=utf-8" /> <title>.:.Construyendo para el Futuro.:.</title> <script type="text/javascript" src="test/swfobject.js"></script> <link href="css/construyendo.css" rel="stylesheet" type="text/css" /> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> </head> <body> <div id="contenedor"> <div id="encabezado"> <div class="espacio"><div class="fecha"><script languaje="JavaScript"> var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym<10) daym="0"+daym var dayarray=new Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado") var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre") document.write("<font color='#FFFFFF' face='Verdana, Arial, Helvetica, sans-serif'>"+dayarray[day]+" "+daym+" de "+montharray[month]+" de "+year+"</font></small>") </script></div></div> <div><img src="img/cabezacf.jpg" /></div> <div class="espacio"> <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','780','height','28','src','flash/scrollcf','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/scrollcf' ); //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=9,0,28,0" width="780" height="28"> <param name="movie" value="flash/scrollcf.swf" /> <param name="quality" value="high" /> <embed src="flash/scrollcf.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="780" height="28"></embed> </object> </noscript></div> </div><!--fin encabezado--> <div id="cuerpo" > <div id="izquierda"> <div class="cuadro"> <div class="cuadroamarillo"> <div class="vineta"><img src="img/arwcf.gif" /></div>Nuestra Empresa</div> <div id="menuv"> <ul> <li><a href="/">Inicio</a></li> <li><a href="/">Somos</a></li> <li><a href="/">Misión</a></li> <li><a href="/">Visión</a></li> <li><a href="/">Valores</a></li> </ul> </div> </div> <!--fin cuadro --> <div class="cuadro"> <div class="cuadroamarillo"> <div class="vineta"><img src="img/arwcf.gif" /></div> Presentaciones</div> <div id="menuv"> <ul> <li><a href="libertadfinancieracf.php">Libertad Financiera</a></li> <li><a href="videos/actividadcf.php">Actividad Empresarial</a></li> </ul> </div> </div> <!--fin cuadro --> <div class="cuadro"> <div class="cuadroamarillo"> <div class="vineta"><img src="img/arwcf.gif" /></div> Contáctanos</div> <div id="menuv"> <ul> <li><a href="http://www.top10benefits.com/WTP_BIZ_LP/LP07-a.asp?qrm=1176">Pronto nos comunicaremos</a></li> </ul> </div> </div> <!--fin cuadro --> </div> <!--fin izquierda--> <div id="centro2"> <div class="cuadrogrande"> <div class="cuadroamarillogd"><div class="vineta"><img src="img/arwcf.gif" /></div>¡Bienvenido!</div> <div align="center"><p id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p> <script type="text/javascript"> var s1 = new SWFObject("/test/flvplayer.swf","single","408","306","7"); s1.addParam("allowfullscreen","true"); s1.addVariable("file","/test/octavio1.flv"); s1.addVariable("image","/test/preview.jpg"); s1.addVariable("width","408"); s1.addVariable("height","306"); s1.write("player1"); </script></div> <div align="justify" class="fuente">¿Qué es lo que se te viene a la mente cuando escuchas las palabras: despidos, reducción de personal, re-estructuración? ¿Te preocupa ser víctima de uno de ellos? O, ¿ya te ha sucedido?<br /><br /> Parece ser que en estos días, el ser vulnerable a este tipo de cosas se ha convertido en un estilo de vida para muchas personas. Nadie tiene el trabajo -así como el futuro- asegurado. El retiro viene únicamente después de largos años de trabajo y sacrificios -en el mejor de los casos-. Y los pocos afortunados que logran jubilarse reciben una pensión que solamente es suficiente para sobrevivir.<br /> <br /> <strong>Entonces, ¿esto dónde te deja?</strong> ¿Estás buscando mayor seguridad? ¿Estás buscando un ingreso que aumente año tras año? ¿Quieres tener mayor libertad financiera y disponer de más tiempo libre? Tal vez es tiempo de que te conviertas en tu propio jefe. Iniciar tu nuevo negocio. ¿Suena atemorizante? Tal vez. Pero continúa leyendo. Esto se pone mejor. <br /> <br /> Nosotros buscamos diligentemente para encontrar el negocio perfecto, uno en el que no pudiéramos esperar a levantarnos por la mañana para ir a trabajar y que nos diera la libertad financiera y el tiempo libre que estábamos buscando. Bueno, lo hemos encontrado. Y ahora estamos construyendo ese negocio perfecto. En el proceso descubrimos las tres palabras más porderosas del español: <br /><br /> <strong>"Si yo puedo"</strong> Honestamente no entendíamos el poder de estas palabras antes de iniciar nuestro negocio. Creo que se podría decir que la mayoría de nosotros no éramos negociantes. Pero rápidamente nos encontramos rodeados por otras personas en este negocio. Para nuestra sorpresa, ellos no nos vieron como su competencia. Ellos nos veían como miembros de su equipo y nos dieron todo su apoyo. Estas son las grandes razones por las que nos gusta esta actividad. <br /> <br /> ¿Si te damos todas las herramientas, la instrucción y todo el apoyo que necesitas, podrías decir: <br /><strong><br /> "Si yo puedo" ser LIBRE FINANCIERAMENTE?</strong> Lo curioso es que nuestros "clientes" no piensan que nosotros somos unos negociantes, o vendedores. Ellos nos tratan más como consultores en los que confían. Una razón más por la que nos gusta este negocio. <br /><br /> <strong>Nuestro propósito hoy y todos los días por venir es ayudarte a conseguir lo que quieres. </strong>Hemos aprendido que cuando una persona de las que “hacen las cosas pasar” quiere hacer un cambio en su vida- lo quiere AHORA! Si tu eres de ese tipo de personas - estoy disponible para ti. Por favor siéntete libre de contactarnos usando nuestro número de teléfono o correo puesto hasta arriba de esta página o haz clic en <a href="http://www.top10benefits.com/WTP_BIZ_LP/LP07-a.asp?qrm=1176"><strong>Contáctame</strong></a>. <br /> <br />Antes que nada, el objetivo principal de nuestra actividad empresarial es ayudarte a ti y a nuestros amigos a alcanzar su LIBERTAD FINANCIERA, así que nos gustaría compartir contigo lo que nosotros entendemos por esta LIBERTAD FINANCIERA. <br /><br /> Te invitamos a saber más de nosotros y a aprovechar algunos de los recursos educacionales de primera clase disponibles siguiendo los pasos en esta página. Después, decide si quieres saber más acerca de nuestro negocio. <br /> <br /> <a href="libertadfinancieracf.php">"LIBERTAD FINANCIERA"</a></div> </div><!--fin cuadrogrande--> </div> <!--fin centro--> </div> <!--fin cuerpo--> <div id="pie"> <div align="center"class="espacio"> <div class="fuentepie">Copyright © 2007 Construyendo para el futuro. Desarrollado por Datacomp Computadoras</div> </div> </div><!--fin pie--> </div> <!--fin contenedor--> </body> </html> http://construyendoparaelfuturo.com/ |
#5
|
||||
|
||||
Hola,
Si me he fijado bien, lo que pasa es que no aparece el fondo "blanco" que aparece en Internet Explorer. Lo cierto es que así es en Opera, Firefox y Safari. Echando un vistazo he visto que lo que habría que "colorear" es el elemento identificado como "cuerpo". Haciendo la prueba, efectivamente, esto funciona en IE, Opera, Firefox y Safari. PD. Cuando asignamos un "background" a un elemento, hay que asignar también un "color", según el W3C. |
#6
|
||||
|
||||
Hola,
Según yo, el problema es que los tres elementos dentro de contenedor: encabezado, cuerpo y pie, tienen el atributo float=left. Según leí alguna vez que me sucedió algo similar, son de esas (múltiples) ocasiones en que parece que IE hace bien lo que el resto de navegadores hace mal. Pero en realidad, es IE el que está mal. Los elementos flotantes no ocupan espacio dentro de su contenedor, y como éste no tiene definida una altura, entonces en realidad no se "expande" y tiene altura cero; dicho de otra forma, no se ve. Esto se puede solucionar poniendo un elemento al final del div que haga clear: left, pero en el caso particular de este diseño, en realidad basta omitir los float de los divs interiores pues no se requieren. // Saludos |
|
|
Temas Similares | ||||
Tema | Autor | Foro | Respuestas | Último mensaje |
algunos problemas con firefox | Robert01 | Linux | 4 | 14-05-2008 10:14:50 |
Background de tabla cambiante en FireFox | lag_0 | HTML, Javascript y otros | 2 | 19-10-2007 15:09:11 |
problemas con el cuadro Color.Dialog | quake2420 | Gráficos | 6 | 20-05-2007 18:35:53 |
Firefox a la carga! El 14% de los internautas europeos usan Firefox!!! | Sasuke_Cub | Noticias | 6 | 24-10-2006 23:29:56 |
Poner color background del form cuando pierde el foco | Cabanyaler | Gráficos | 4 | 25-11-2004 08:32:03 |
|