Problemas Maquetando en CSS

Mola · #1 (**permalink**) 06/11/2009, 19:11

Hola todos.
Pues la verdad soy bastante nuevo en programación con CSS.
Y trato al máximo de buscar las respuestas por mi mismo.
Pero la verdad llevo 3 días enredado con esto.
Se que es una tontada, algo me estoy perdiendo, eso pasa cuando no se tiene un tutor.
E visto muchos vídeos, leído muchos artículos y nada que domino del todo la maquetacion.

Tadavia me falta ver mucho, pero una ayudita en estos momentos me seria bastante útil.

bueno lo que quiero lograr es lo siguiente:

Y lo que tengo es esto:

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WFD</title>
<style type="text/css">
* {
	padding:0px;
	margin:0px;
}
#conteiner {
	width:960px;
	margin-right:auto;
	margin-left:auto;
	height:auto;
}
#side1 {
	height:1045px;
	width:31px;
	float:left;
	
}
#side2 {
	height:1045px;
	width:31px;
	float:right;
	
}
#box1 {
	height:244px;
	margin-left:31px;
	margin-top:39px;
	
}
#box2 {
	height:312px;
	margin-left:31px;
	
}
#box3 {
	height:244px;
	margin-left:31px;
	
}

</style>
</head>
<body>
<div id="conteiner">
	    <div id="side1">
	    </div> <!-- End of side1 -->
	    <div id="box1">
	    </div> <!-- End of box1 -->
	    <div id="box2">
	    </div> <!-- End of box2 -->
	    <div id="box3">
            </div> <!-- End of box3 -->
	    <div id="side2">
             </div> <!-- End of side2-->
</div> <!-- End of conteiner -->
</body>
</html>

También agradecería un buen curso en vídeo de maquetacion en CSS.
Gracias

zerokilled · #2 (**permalink**) 06/11/2009, 19:48

intenta moviendo el elemento #side2 justo al lado de #side1. o sea, primero van los sides y luego los box.

AlePerez92 · #3 (**permalink**) 06/11/2009, 20:14

Bueno, este es tu código modificado por mí para conseguir el resultado que propones:

Código:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WFD</title>
<style type="text/css">
* {
	padding:0px;
	margin:0px;
}
#conteiner {
	width:960px;
	margin:0 auto; /* Centra el contenido */
	height:auto;
}
#center {
	float:left;
	width:898px; /* 898px = Resta del ancho de #side1 y #side2 (total 62px) */
}
#side1 {
	float:left;
	height:800px; /* He cambiado el tamaño para que se ajuste a #box1-2-3. Puedes modificarlo tú. */
	width:31px;
	background-color:orange;
}
#side2 {
	height:800px;
	width:31px;
	float:right;
	background-color:orange;
}
#box1 {
	height:244px;
	background-color:green;
}
#box2 {
	height:312px;
	background-color:blue;
}
#box3 {
	height:244px;
	background-color:yellow;
}
</style>
</head>
<body>
<div id="conteiner">
	    <div id="side1">
	    </div> <!-- End of side1 -->
		<div id="center">
	    <div id="box1">
	    </div> <!-- End of box1 -->
	    <div id="box2">
	    </div> <!-- End of box2 -->
	    <div id="box3">
        </div> <!-- End of box3 -->
		</div>
	    <div id="side2">
             </div> <!-- End of side2-->
</div> <!-- End of conteiner -->
</body>
</html>

Puedes eliminar los comentarios que están entre las etiquetas /* */ y 
SUERTE!

Puedes ponerle el margen superior o inferior a #box1 y #box3...

Mola · #4 (**permalink**) 07/11/2009, 11:13

Muchas gracias por sus respuestas :D.
Voy a estudiar detenidamente las respuestas.

jelielh · #5 (**permalink**) 11/11/2009, 11:35

Hola... necesito ayuda por favor, soy nueva maquetando en css, hago la pag en photoshop, u otro y luego la paso a css para dreamweaver. En Firefox se ve bien pero en IExplorer me mueve algunas divs, o como que desaparecen , y queda una chapuza.
He leído sobre las condicionales de IE , pero no sé muy bien como hacer que funcione, y tampoco sé qué propiedad debo cambiar ( css supongo ), para que ya se muestre bien todo en el explorer , como en firefox.
Por favor agradezco la respuesta pronta, si queréis ver el código de las css me lo decís.. Gracias de antemano !

jomaruro · #6 (**permalink**) 11/11/2009, 15:31

Hola:

Léete con calma estos dos temas del foro:

http://www.forosdelweb.com/f53/lista...es-css-636689/
http://www.forosdelweb.com/f53/comen...onales-750600/

Saludos.