Problema bloques CSS

Citar

Escrito el 26 Oct 2006 03:40 pm

Hola tengo un progblema con un bloque CSS
tengo left y dentro de left un cuadro negro. Left tiene un color de fondo y en firefox se ve el color de fondo cuando la parte de arriba tenia que estar ocupada por el cuadro negro. EN Explorer funciona sin problemas curioso no es la primera vez que me pasa al reves.

Este es el código:

Código :

div#left,div#right,div#content {
   float:left;
}
div#left {
   background-color:#00FF33;
}
div#left,div#right {
   width: 200px;
   margin: 0 auto;
} 
.navneg {
   width: 100%;
   background: #333333;
   margin: 0 auto;
   height: 20px;
}

*Nota de BOFH: Usa las etiquetas code

Por etion

3 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 26 Oct 2006 03:49 pm

El código html ayudaría un poco...
La explicación está bien pero...

Por ryuz

350 de clabLevel

2 tutoriales

Envíale un mensaje privado Web

Citar

Escrito el 26 Oct 2006 04:02 pm

Código :

<div id="left">
      <div class="navneg">
         <p class="cabecera">Resumo do Partido</p>
      </div>
      <img src="imagenes/2.gif" alt="Futbol" width="200" height="320" />
      <div class="novas">
         <p class="resumenequipo">Gran partido de Saski</p>
      </div>
   </div>
   <div id="content">
      <div class="navneg">
         <p class="cabecera">Novas</p>
      </div>
      <div class="novas">
         <div class="novasimg"><img src="imagenes/1.jpg" alt="Tiro de falta" height="100" width="100"/></div>
         <div class="novastext"><p class="texto"> <strong>In semper</strong> orci eu dolor. Sed non leo eleifend mi condimentum consequat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis aliquam, est ut laoreet placerat, nisl libero malesuada nunc, eu pellentesque enim lacus et magna..</p></div>
      </div>
      <div class="novas">
         <p class="texto"> <strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Praesent magna est, tempor nec, aliquet et, cursus eu, diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut tellus. Mauris et massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean sem. Praesent aliquam mi a mi. Cras euismod ornare odio. Etiam vel quam.</p>
      </div>
       <div class="novas">
         <div class="novasimg"><img src="imagenes/1.jpg" alt="Tiro de falta" height="100" width="100"/></div>
         <div class="novastext"><p class="texto"> <strong>In semper</strong> orci eu dolor. Sed non leo eleifend mi condimentum consequat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis aliquam, est ut laoreet placerat, nisl libero malesuada nunc, eu pellentesque enim lacus et magna..</p></div>
      </div>
      <div class="novas">
         <p class="texto"> <strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Praesent magna est, tempor nec, aliquet et, cursus eu, diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut tellus. Mauris et massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean sem. Praesent aliquam mi a mi. Cras euismod ornare odio. Etiam vel quam.</p>
      </div>
      <div class="novas">
         <p class="texto"> <strong>Lorem ipsum</strong> vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut tellus.</p>
      </div>                  
   </div>

Por etion

3 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 26 Oct 2006 04:48 pm

He estado mirando un poco y sacado una conclusión, pero creo que no sería acertada porque no has dado todo el código. Falta el html de "right" y más css.

Creo que el problema está en "novas", porque cuando lo quito "naveng" aparece donde tiene que aparecer.

Por ryuz

350 de clabLevel

2 tutoriales

Envíale un mensaje privado Web

Citar

Escrito el 26 Oct 2006 06:06 pm

publico el codigo entero haber si asi encontramos el error

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>Clube Deportivo Arenteiro</title>
<link href="sssss.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">
   <div id="header">Header</div>
   <div id="menu">Menu</div>
   <div id="left">
      <div class="navneg">
         <p class="cabecera">Resumo do Partido</p>
      </div>
      <img src="imagenes/2.gif" alt="Futbol" width="200" height="320" />
      <div class="novas">
         <p class="resumenequipo">Gran partido de Saski</p>
      </div>
   </div>
   <div id="content">
      <div class="navneg">
         <p class="cabecera">Novas</p>
      </div>
      <div class="novas">
         <div class="novasimg"><img src="imagenes/1.jpg" alt="Tiro de falta" height="100" width="100"/></div>
         <div class="novastext"><p class="texto"> <strong>In semper</strong> orci eu dolor. Sed non leo eleifend mi condimentum consequat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis aliquam, est ut laoreet placerat, nisl libero malesuada nunc, eu pellentesque enim lacus et magna..</p></div>
      </div>
      <div class="novas">
         <p class="texto"> <strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Praesent magna est, tempor nec, aliquet et, cursus eu, diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut tellus. Mauris et massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean sem. Praesent aliquam mi a mi. Cras euismod ornare odio. Etiam vel quam.</p>
      </div>
       <div class="novas">
         <div class="novasimg"><img src="imagenes/1.jpg" alt="Tiro de falta" height="100" width="100"/></div>
         <div class="novastext"><p class="texto"> <strong>In semper</strong> orci eu dolor. Sed non leo eleifend mi condimentum consequat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis aliquam, est ut laoreet placerat, nisl libero malesuada nunc, eu pellentesque enim lacus et magna..</p></div>
      </div>
      <div class="novas">
         <p class="texto"> <strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Praesent magna est, tempor nec, aliquet et, cursus eu, diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut tellus. Mauris et massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean sem. Praesent aliquam mi a mi. Cras euismod ornare odio. Etiam vel quam.</p>
      </div>
      <div class="novas">
         <p class="texto"> <strong>Lorem ipsum</strong> vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut tellus.</p>
      </div>                  
   </div>
   <div id="right">
   </div>
</div>
</body>
</html>

*Nota 2: Usa el boton CODE para postear codigo.

Por etion

3 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 26 Oct 2006 06:23 pm

El problema que tienes es por el margen del parrafo (<p>)

Los navegadores aplican a las etiquetas <p> un margen arriba y abajo, el cual es diferente en cada navegador. Por si fuera poco, en Firefox, dicho margen suele "salirse" del elemento contenedor, en tu caso, provocando ese espacio encima del elemento "navneg".

Solucion, modifica el margen del párrafo dentro del elemento "navneg":

Código :

#navneg p { margin:0; }

Y se soluciona el problema. Luego puedes ponerle padding para ajustarlo mejor.

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino Bastard Operators From Hell REC Héroes

Envíale un mensaje privado Web

London, UK

@ramono

Problema bloques CSS

Escribe una respuesta rapida