Foros del Web » Creando para Internet » CSS »

Problema con DIV y CSS, div no aparece en browser.

Estas en el tema de Problema con DIV y CSS, div no aparece en browser. en el foro de CSS en Foros del Web. Hola muchachos, tengo un pequeño problema con un div de 100px x 100px verde que no puedo visualizar en chrome o mozilla. Cuando le pongo ...
  #1 (permalink)  
Antiguo 17/10/2014, 19:47
 
Fecha de Ingreso: agosto-2013
Ubicación: caracas
Mensajes: 4
Antigüedad: 10 años, 7 meses
Puntos: 0
Pregunta Problema con DIV y CSS, div no aparece en browser.

Hola muchachos, tengo un pequeño problema con un div de 100px x 100px verde que no puedo visualizar en chrome o mozilla.

Cuando le pongo el estilo en mi css no aparece en el browser, pero si le pongo el estilo directamente con el tag style, si aparece en el browser.

Lo cual es muy extraño ya que el resto de los divs de mi pagina funcionan correctamente, pero nada de nada con ese nuevo que intento agregar. Estoy trabajando en DW y en la parte de diseño si se vé. Le he estado dando desde ayer mil vueltas al asunto y no me explico, capaz es una tontería pero no lo pillo :s.

Si alguien me puede ayudar se lo agradecería mucho, debe ser una tontería pero debe ser una novatada, supongo :I.


Este es mi html (el div problematico se llama cajablanca):


Código HTML:
<!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>

<link href="assets/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Pasapalos y postres para fiestas <meta name="country" content="ve" />
<meta name="language" content="es-ES" />
<meta name="description" content="Tienda online de postres venezolana especializada en dulces de chocolate. Ideal para festejos." />
<meta name="keywords" content="postres chocolate trufas brigadeiras fiestas pasapalos cumpleaños graduaciones eventos" />
 BRIGADEIRAS</title>
 
<style type="text/css">
</style>

<link href="css/estilobase.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

</head>

<body>



<!-- div base  de id page.-->
<div id="page">

	<div id="caja_header"> <img src="assets/brig_twitter.png" width="68" height="77" alt="Logo de acceso a twitter" /> <a href="http://www.paginainexistente.com/"><img src="assets/brig_facebook.png" width="68" height="77" alt="Logo de acceso a Facebook" /></a></div>
	
  <div id="caja_barracolor"></div>
    
  <div id="caja_menu">
  
   <div id="menu">
    
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="#">Inicio</a> </li>
        <li><a href="#">Nosotros</a></li>
        <li><a class="MenuBarItemSubmenu" href="#">Productos</a>
          <ul>
            <li><a href="#">Al Mayor</a> </li>
            <li><a href="#">Al Detal</a></li>
</ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Servicios</a>
          <ul>
            <li><a href="#">Servicio a Domicilio</a></li>
            <li><a href="#">Fiestas</a></li>
            <li><a class="diferente" href="#">Reuniones</a></li>
          </ul>
        </li>
        <li><a href="#">Contacto</a></li>
      </ul>
      
    </div>
      
    
  
  </div>
  
   


	<div id="caja_contenido">

	  <div id="caja_contenido_top">
      
      <!--Este es el div problemático-->
      
	    <div id="cajablanca" ></div>
        
     
        
	  </div>
<div id="caja_barracolor2" ></div>
		<div id="caja_contenido_bottom"></div>
	
  </div>

	<div id="caja_footer"></div>
    

</div>


<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>

</body>
</html> 

y este es mi css
Código HTML:
@charset "utf-8";
/*-----ID-----*/

#page {
	background-color: #0F0;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	max-width: 1366px;
	min-width: 1024px;
	
	
}
#caja_header {
	background-color: #fff;
	height: 100px;
	width: 100%;
	float: left;
	background-repeat: no-repeat;
	background-image: url(../assets/logo.gif);
	background-position: 10em;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #F3D9D8;
	border-top-width: 100%;
	border-right-width: 100%;
	border-bottom-width: 100%;
	border-left-width: 100%;
	border-right-color: #F3D9D8;
	border-bottom-color: #F3D9D8;
	border-left-color: #F3D9D8;
}

 #caja_header img {
	
 float:right;
 margin: 20px;
 
 }

#caja_barracolor {
	
	
background: #f3d9d8; /* Old browsers */
background: -moz-linear-gradient(left,  #f3d9d8 0%, #f6c894 49%, #f6c894 51%, #f3821c 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f3d9d8), color-stop(49%,#f6c894), color-stop(51%,#f6c894), color-stop(99%,#f3821c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #f3d9d8 0%,#f6c894 49%,#f6c894 51%,#f3821c 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #f3d9d8 0%,#f6c894 49%,#f6c894 51%,#f3821c 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #f3d9d8 0%,#f6c894 49%,#f6c894 51%,#f3821c 99%); /* IE10+ */
background: linear-gradient(to right,  #f3d9d8 0%,#f6c894 49%,#f6c894 51%,#f3821c 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3d9d8', endColorstr='#f3821c',GradientType=1 ); /* IE6-9 */

	height: 7px;
	width: 100%;
	float: left;
	background-repeat: no-repeat;
	
}


#caja_menu {
	background-color: #F3D8D6;
	width: 100%;
	float: right;
	clear: none;
	margin-right: auto;
	margin-left: auto;
}

#menu {
	float: right;
	background-color: #FFF;	
}

#caja_footer {
	background-color: #3e2737;
	height: 85px;
	width: 100%;
	float: left;
	
}



#caja_contenido {
	
	
background: #f3b3b1; /* Old browsers */
background: -moz-linear-gradient(top,  #f3b3b1 3%, #efccca 48%, #ede1e1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#f3b3b1), color-stop(48%,#efccca), color-stop(100%,#ede1e1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f3b3b1 3%,#efccca 48%,#ede1e1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f3b3b1 3%,#efccca 48%,#ede1e1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f3b3b1 3%,#efccca 48%,#ede1e1 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f3b3b1 3%,#efccca 48%,#ede1e1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3b3b1', endColorstr='#ede1e1',GradientType=0 ); /* IE6-9 */


	height: 700px;
	width: 100%;
	float: left;
	background-repeat: no-repeat;
}

#caja_contenido_top {
	height: 500px;
	width: 100%;
	float: left;
	
	position:relative;
	
}

#caja_contenido_bottom {

	height: 193px;
	width: 100%;
	float: left;
	background-repeat: no-repeat;
}




#caja_barracolor2 {
	background: #f39c4f; /* Old browsers */
	background: -moz-linear-gradient(left,  #f39c4f 0%, #f5e2ba 59%, #f5e2ba 59%, #f3e1e1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f39c4f), color-stop(59%,#f5e2ba), color-stop(59%,#f5e2ba), color-stop(100%,#f3e1e1)); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f39c4f', endColorstr='#f3e1e1',GradientType=1 ); /* IE6-9 */
	height: 7px;
	width: 100%;
	float: left;
	background-repeat: no-repeat;
	background-color: linear-gradient(;
	background-position: right bottom;
	clear: none;
	line-height: normal;
	text-decoration: overline;
}

#cajablanca {
	background-color: #3FC;
	margin: 10px;
	float: left;
	height: 10%;
	width: 10%;
	position: absolute;}
  #2 (permalink)  
Antiguo 17/10/2014, 21:28
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 15 años, 5 meses
Puntos: 40
Respuesta: Problema con DIV y CSS, div no aparece en browser.

No puedo entender bien, pero me parece que el problema que tienes es de z-index, prueba a poner:

Código CSS:
Ver original
  1. #cajablanca {
  2.     background-color: #3FC;
  3.     margin: 10px;
  4.     float: left;
  5.     height: 10%;
  6.     width: 10%;
  7.     position: absolute;
  8.  
  9.        z-index:9999;
  10.  
  11. }

para ver donde está ubicado.
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 17/10/2014, 21:41
 
Fecha de Ingreso: agosto-2013
Ubicación: caracas
Mensajes: 4
Antigüedad: 10 años, 7 meses
Puntos: 0
Respuesta: Problema con DIV y CSS, div no aparece en browser.

No me parece que es un problema con zindex. Para explicarme mejor:

- Solo intentar correr la pagina con el css.
- Observar que no aparece el cuadro verde.
- Agregar esto :

background-color: #3FC;
margin: 10px;
float: left;
height: 10%;
width: 10%;
position: absolute;

en <div id="cajablanca" ></div> con el tag style.
Verificar la página y de hecho, si aparece el cuadrado verde.

- No aparece con esto:

#cajablanca {
background-color: #3FC;
margin: 10px;
float: left;
height: 10%;
width: 10%;
position: absolute;}

... en el css pero si con el estilo incrustado con el tag style :s.
  #4 (permalink)  
Antiguo 18/10/2014, 10:25
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años
Puntos: 36
Respuesta: Problema con DIV y CSS, div no aparece en browser.

holas carlosjdelgadoc te comento que esta pasando , cuando dejas inconcluso el css de alguna elemento por lo general tiende a bloquear los otros estilos en mi parecer es por que no puede seguir leyendo el archivo por eso que cuando lo pones directamente en el html si funciona por que estas rompiendo el flujo del documento.


mira tu error es muy facil de reparar en el estilo #caja_barracolor2 tienes una instruccion que no esta bien escrita y es


Tu error
Código CSS:
Ver original
  1. background-color: linear-gradient(;
;

que le falta dime mmmm es facil cierra el parentesis y veras como te funcionara.
lo correcto
Código CSS:
Ver original
  1. background-color: linear-gradient();
;

y recuerda cuando un estilo no se aplique , revisa la vinculacion de la hoja de estilos y si esta correcta busca algo que este mal cerrado , por lo general son ; , o ()

espero haberte ayudado ...
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..

Última edición por herzbazi; 18/10/2014 a las 10:34 Razón: seguir en correo
  #5 (permalink)  
Antiguo 18/10/2014, 12:25
 
Fecha de Ingreso: agosto-2013
Ubicación: caracas
Mensajes: 4
Antigüedad: 10 años, 7 meses
Puntos: 0
Respuesta: Problema con DIV y CSS, div no aparece en browser.

Muchísimas gracias, pero que error tan tonto :S. La próxima voy a estar mas pendiente.

Etiquetas: desaparece
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 20:56.