Foros del Web » Creando para Internet » CSS »

problemas con una capa

Estas en el tema de problemas con una capa en el foro de CSS en Foros del Web. buenas Estoy creando una pagina en php, donde tengo capas de fondo y encima texto imagenes, etc... bien las capas en donde me da problemas ...
  #1 (permalink)  
Antiguo 25/02/2010, 11:27
 
Fecha de Ingreso: febrero-2010
Mensajes: 17
Antigüedad: 7 años, 10 meses
Puntos: 0
problemas con una capa

buenas

Estoy creando una pagina en php, donde tengo capas de fondo y encima texto imagenes, etc...

bien las capas en donde me da problemas son las de contenido y empresa:
Código:
#Fondo_Contenido {
	position:absolute;
	left:0px;
	top:246px;
	width:100%;
	height:400px;
	z-index:7;
	background-color: #333333;
}
#contenido_inicio {
	color:#FFF;
	position:absolute;
	left:170px;
	width:900px;
	height: 200px;
	top:10px;
}
#Fondo_Empresa {
	position:absolute;
	left:0px;
	top:646px;
	width:100%;
	height:200px;
	z-index:8;
	background-color: #A47B02;
}
donde cada apartado tiene su capa superior e inferior, empresa tiene capas con la direccion y localizacion, etc... mientras que la de contenido tiene el texto... y no se me agranda el Fondo_Contenido ni Contenido_inicio, y cuando lo hace se queda Fondo_Empresa en medio del de contenido...

Como se podria solucionar este problemilla.

Gracias de antemano y no me funciona en ningun navegador... ni con height:auto ó 0, padding:auto, min-height:0;
  #2 (permalink)  
Antiguo 25/02/2010, 14:11
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 7 años, 11 meses
Puntos: 45
Respuesta: problemas con una capa

Buenas,

si le das un position absolute con sus respectivos top y left siempre se situará en esa posición y además sacas a ese elemento del flujo normal del documento con lo que el resto de elementos que no estuvieran posicionados se verían afectados y podrían invadir el espacio de los elementos posicionados. Algo parecido te provoca el otro error. No se agrandan Fondo_Contenido ni Contenido_inicio porque tienen un height fijo.

Para evitar este tipo de problemas es mejor huir de las medidas y posiciones absolutas, es mejor hacer un diseño líquido que fluya por si mismo y se adapte al tamaño del area de visualización del medio que se use. Nos olvidamos muchas veces que hoy se usan muchos dispositivos de medidas reducidas para visualzar páginas y poniendo porcentajes por ejemplo se verá bien tanto en una pantalla de 9 pulgadas como de 42.
  #3 (permalink)  
Antiguo 25/02/2010, 16:27
 
Fecha de Ingreso: febrero-2010
Mensajes: 17
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: problemas con una capa

Ok sera tenido en cuenta, aun soy algo novatillo usando css y php, por eso pregunto tantas cosas...

la pregunta del siglo y perdona mi ignorancia pero tendras por casualidad algun ejemplo de la modularidad y de el magnifico ejemplo que pones de CSS de "huir de las medidas", me interesaria bastante aprender (todo en general ) pero empezar por conocer eso vendria bien...

P.D. pero pruebo a quitar el height lo pongo 0 (cero) o auto y tampoco me funciona...

gracias una vez mas
  #4 (permalink)  
Antiguo 25/02/2010, 18:41
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 7 años, 11 meses
Puntos: 45
Respuesta: problemas con una capa

Buenas,

la mejor manera de aprender es leer mucho y practicar haciendolo uno mismo, probando cada cambio para ver sus efectos. Te pongo un ejemplo que había hecho para otro hilo de tamaños relativos que se ajustan al contenido y al tamaño de la ventana. Probado en firefox y opera y funciona bien tanto con poco contenido como con mucho. Con este código:
Código HTML:
Ver original
  1. <div id="cabecera">
  2. </div>
  3. <div id="contenido">
  4.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed ....</p>
  5.  
  6.         <p>Quisque eget semper urna. Nunc vitae enim erat. Curabitur sem diam, molestie..... </p>
  7.  
  8.         <p>Quisque porta quam eu justo ultricies ac fringilla odio condimentum. Donec dignissim ligula ......</p>
  9.  
  10.         <p>Mauris porttitor orci id purus consectetur tincidunt. Integer eleifend, lacus in pulvinar aliquam, nunc tellus cursus mi, et aliquam ......</p>
  11.  
  12.         <p id="ultimo">Nunc sed nulla quis risus adipiscing accumsan lacinia in diam. Aenean eu velit libero. In interdum interdum dui vitae..... </p>
  13.  
  14. </div>

y este:

Código CSS:
Ver original
  1. html {height: 100%;}
  2.  
  3. body{
  4.         background: url(fichero_imagen) repeat;
  5.         width: 90%;
  6.         margin: 0 auto;    /* para centrar la página */
  7.         height: 100%;
  8.         min-height: 600px;    /* medidas mínimas */
  9.         min-width: 800px;
  10. }
  11.  
  12. #cabecera {
  13.         height: 20%;
  14.         background: #ff0;
  15. }
  16.  
  17. #contenido {
  18.         background: url(fichero_imagen) repeat-x center bottom; /* para fijar la imagen que hace de pie en el lado inferior de la ventana */
  19.         min-height: 79%;
  20. }
  21.  
  22. p {margin: 7px;}
  23.  
  24. #ultimo {padding-bottom: 100px;} /* para que no se pegue la imagen que hace de pie al texto del último párrafo */
  #5 (permalink)  
Antiguo 28/02/2010, 05:35
 
Fecha de Ingreso: febrero-2010
Mensajes: 17
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: problemas con una capa

Gracias, me servira de mucho, lo ideal es hacer las paginas lo mas sencilla posibles, pero me cuesta un poco el tema de las capas no fijas....

Si alguien podria pasarme un link o un codigo que tenga el php mezclado con las capas como la del compañero tecna... me seria de gran ayuda

muchas gracias señores, me ha servido de mucho...


OTRA duda que me surgio:

*** tengo una capa (menu)dentro del #header o del #banner se le puede poner esto
#banner {
background-image:url(img/header_bg.png);
background-repeat:no-repeat;
height:120px;
}
#inicio {
background-image:url(img/header_bg.png);
background-repeat:no-repeat;
weight:20%;
}

y asi con todos los menus..

<div id="banner">
<div id="inicio>
</div>
<div ="asi con todos los enlaces del menu">
</div>
</div>

Última edición por guilder; 28/02/2010 a las 06:44
  #6 (permalink)  
Antiguo 02/03/2010, 15:03
 
Fecha de Ingreso: febrero-2010
Mensajes: 17
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: problemas con una capa

Tengo una problema con lo que he conseguido hacer con la pagina, todo bien hasta que visualizo con wamp la pagina lograda en php con sus respectivos enlaces y demas.. pues solo me visualiza el fondo del color que sea....

Sera configuracion del php.ini o que problema sera
Código:
<?php 
	include("includes/cabecera.php"); 
?>
<div id="wrapper">		
    <div id="header">
      <? include("includes/titulo.php"); ?>
  	</div>  
    <div id="menu">
    		<? include("includes/menu.php"); ?>
	</div>	
	<div id="contenido">
    <? include("includes/pages.php"); ?>        
        <br style="clear:both;" />
  	</div>
	<div id="footer">
	  <? include("includes/pie_pagina.php"); ?>
	</div>
</div>
<? include("includes/fin.php"); ?>
CSS CODE

Código:
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#333333;
	background-color:#f9f7ed;
	margin:0px;
}
#wrapper {
	width:90%;
	margin:auto;
	background-color: #0C0;	
}
#header {
	background-color: #000;
	background-repeat:no-repeat;
	height:120px;
}
#menu {
	background-color: #000;
	color: #FFF;
	height:25px;
	text-align:center;
}
#contenido {
	padding:20px;
}
#footer {
	height:80px;
	padding-top:20px;
	color:#FFFFFF;
	text-align:center;
	background-image:url(img/footer_bg.png);
}
h1 {
	color:#33170D;
	font-size:18px;
	border-bottom:1px solid #FF9900;
	padding-bottom:10px;
}

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




La zona horaria es GMT -6. Ahora son las 02:39.