problemas con una capa

[guilder]

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;

[Tecna]

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.

[guilder]

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

[Tecna]

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:

<div id="cabecera">
</div>
<div id="contenido">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed ....</p>
 
        <p>Quisque eget semper urna. Nunc vitae enim erat. Curabitur sem diam, molestie..... </p>
 
        <p>Quisque porta quam eu justo ultricies ac fringilla odio condimentum. Donec dignissim ligula ......</p>
 
        <p>Mauris porttitor orci id purus consectetur tincidunt. Integer eleifend, lacus in pulvinar aliquam, nunc tellus cursus mi, et aliquam ......</p>
 
        <p id="ultimo">Nunc sed nulla quis risus adipiscing accumsan lacinia in diam. Aenean eu velit libero. In interdum interdum dui vitae..... </p>
 
</div>
 

y este:

Código CSS:

html {height: 100%;}
 
body{
        background: url(fichero_imagen) repeat;
        width: 90%;
        margin: 0 auto;    /* para centrar la página */
        height: 100%;
        min-height: 600px;    /* medidas mínimas */
        min-width: 800px;
}
 
#cabecera {
        height: 20%; 
        background: #ff0;
}
 
#contenido {
        background: url(fichero_imagen) repeat-x center bottom; /* para fijar la imagen que hace de pie en el lado inferior de la ventana */
        min-height: 79%;
}
 
p {margin: 7px;}
 
#ultimo {padding-bottom: 100px;} /* para que no se pegue la imagen que hace de pie al texto del último párrafo */
 

[guilder]

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>

[guilder]

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;
}