Foros del Web » Creando para Internet » CSS »

Problemas Maquetando en CSS

Estas en el tema de Problemas Maquetando en CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/11/2009, 19:11
 
Fecha de Ingreso: noviembre-2009
Mensajes: 4
Antigüedad: 8 años, 1 mes
Puntos: 0
Problemas Maquetando en CSS

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
  #2 (permalink)  
Antiguo 06/11/2009, 19:48
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Problemas Maquetando en CSS

intenta moviendo el elemento #side2 justo al lado de #side1. o sea, primero van los sides y luego los box.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 06/11/2009, 20:14
Avatar de AlePerez92  
Fecha de Ingreso: noviembre-2009
Ubicación: España
Mensajes: 17
Antigüedad: 8 años, 1 mes
Puntos: 2
De acuerdo Respuesta: Problemas Maquetando en CSS

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 <!-- X -->
SUERTE!

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

Última edición por AlePerez92; 06/11/2009 a las 21:04
  #4 (permalink)  
Antiguo 07/11/2009, 11:13
 
Fecha de Ingreso: noviembre-2009
Mensajes: 4
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Problemas Maquetando en CSS

Muchas gracias por sus respuestas :D.
Voy a estudiar detenidamente las respuestas.
  #5 (permalink)  
Antiguo 11/11/2009, 11:35
 
Fecha de Ingreso: noviembre-2009
Mensajes: 2
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Problemas Maquetando en CSS

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 !
  #6 (permalink)  
Antiguo 11/11/2009, 15:31
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problemas Maquetando en CSS

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.

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 12:13.