capas y mas capas dreamweaver

#1 (**permalink**) 23/08/2011, 11:42

que tal amigos tengo problemas con las divs pa cuando hago una div pa o fija para que sea el contenedor, todo va bien pero cuando intento inserta una div dentro de el contenedor no puedo no me deja se posiciona solo a los lados.

este es mi codigo:

html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<LINK REL="SHORTCUT ICON" HREF="favicon.png">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Victor Alvarado Photographer</title>

<link href="estilos.css" rel="stylesheet" type="text/css">

<style type="text/css">
#contenido {
background-image:url(imagenes/intro.png);
position:relative;
left:50%;
width:800px;
height:600;
margin-left:-400px;
z-index:1;
top: 0;
}
body {
background-image: url(imagenes/fondo.GIF);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
</head>

<body>
<div id="contenedor">
<div id="contenido"></div>
<div id="boton1"> <img src="imagenes/blog.png"> </div>
<div id="boton2"> <img src="imagenes/blog.png"></div>
</div>
</body>
</html>

el css

@charset "utf-8";
/* estilos */

#boton1{
width:1px;
height:20px;
position:absolute;
left: 445px;
top: 600px;
}

#boton2{
width:60px;
height:20px;
position:absolute;
left: 70%;
top: 600px;
}

__________________________________________________ _______________

gracias hasta pronto...

daweb · #2 (**permalink**) 24/08/2011, 01:16

Hola,

No entiendo muy bien tu duda, sin embargo yo utilizaría float en vez de position, algo como:

Código:

<!-- estilos css-->
<style type="text/css">
body {
	background-image: url(imagenes/fondo.GIF);
        margin:0px 0px 0px 0px;
}

#contenedor{
	background-color:#ffffff;
	width:100%;
	height:76%;
	margin:0px 0px 0px 0px;
	border: 0px #ccc000 solid;
}
#contenedor .contenido{	
	width:1024px;
        text-align:justify;
	margin:0 auto;
	border: 1px #ccc000 solid;
	background-color:#ffffff;
}

#contenedor .boton1{
	width:50px;
	height:20px;
	float:left;
	margin:10px 0px 0px 0px;
	cursor:pointer;
	border: 1px #ccc000 solid;
}

#contenedor .boton2{
	width:60px;
	height:20px;
	float:right;
	margin:10px 0px 0px 0px;
	cursor:pointer;
	border: 1px #ccc000 solid;
}
</style>

</head>

<body>
<div id="contenedor">
	<div class="contenido">
		<div class="boton1"> <img src="imagenes/blog.png"> </div>
		<div class="boton2"> <img src="imagenes/blog.png"></div>
	</div>
</div>
</body>

#3 (**permalink**) 24/08/2011, 15:13

gracias daweb tienes razon mucho mejor.. oye me podrias orientar un poco en esto. quiero hacer una pagina web donde la cabecera y pie de paginase expande hacia los lados y el contenido central se quede en el centro como en esta pagina

[URL="http://azadcreative.com/"]http://azadcreative.com/[/URL]

cuando hacen zoom in se ve el efecto gracias por tu ayuda daweb

daweb · #4 (**permalink**) 24/08/2011, 23:19

Hola polonanni,

Me alegro que te haya servido.

Por lo que veo en la web que has adjuntado es que han creado una capa "cabecera" con el widht 100% degrado azul y dentro han puesto otra capa contenedor alineada en el centro. Algo como esto:

Código:

<style type="text/css">
#cabecera{
	background-color:#7bbd42;
	height:161px;
	width:100%;
	margin:0px 0px 0px 0px;

}
#cabecera .contenedor{	
	background-color:#ffffff;
	width:1024px;
	height:161px;
        text-align:justify;
	margin:0 auto;
	border: 1px #ccc000 solid;
}
</style>
</head>

<body>
<div id="cabecera">
	<div class="contenedor">Mi contenido</div>
</div>
/body>
</html>

El resto de la página debe tener el mismo esqueleto, una capa windth:100 y dentro el contenedor, así da igual la pantalla donde se mire la página esta se extenderá lo necesario manteniendo siempre la capa del contenedor con el width que hayas puesto.

Un saludo

#5 (**permalink**) 29/08/2011, 15:34

excelente daweb de nuevo gracias por tu ayuda... te dedicas a hacer paginas web o lo hacer por hobbie.. tienes algun sitio

daweb · #6 (**permalink**) 30/08/2011, 01:49

Con gusto polonanni.

Por ahora estoy combinando mi trabajao (admin de sitemas) con ser freelance en desarrollo de webs.

Cualquier duda ya sabes ;)