como maquetar sin morir en el intento?

jhz1983 · #1 (**permalink**) 03/08/2011, 06:32

bueno no tengo mucha idea de maquetar y estoy teniendo un monton de problemas con este sencilla página:

Código:

<html>
	<head>
	<title>Latialola</title>
	</head>

	<body style="margin:0;">
	<div id="contenedor" style="width:100%;height:100%;margin:0;background-color:black;">
		<div id="contenido" style="width:75%;height:100%;margin:auto;background-color:blue;">
		<h1 style="margin:0;"><font color="white">La Tia Lola</font></h1>
			<div id="menu" style=" width:15%;height:75%;float:left;margin-top:50px;background-color:red;">
			<p style="margin:10px;">Menus<br>
			horario
			</p>
			</div>
			<div id="noticias" style="width:60%;height:75%;float:left;margin-top:50px;background-color:white;">
			Bienvenidos
			</div>
			<div id="salas" style="width:25%; height:75%;float:left;margin-top:50px;background-color:green;">
		</div>
	</div>
	</body>
</html>

en mozilla me sale centrado.. pero en en el explorer no..
después cada sección quiero que tenga cierto "padding" por asi decirlo pero si uso padding se vuelve todo loco y se descuadra.. asi que la unica solución que encontré es meter todo dentro de un <p style="margin:10px"> como solucionais vosotros estos problemas? alguna guia para maquetar? gracias de antemano

andresdzphp · #2 (**permalink**) 04/08/2011, 02:04

Es mejor que manejes el orden de tu código y separes html de CSS. Te dejo el código para que te des una idea.

Código CSS:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Ejemplo</title>
 
        <style type="text/css">
            
            body {
                text-align: center;
                margin: 0;
                background: #000066;
            }
            
            #contenedor {
                width: 960px;
                height: 640px;
                text-align: left;
                margin: 0 auto;
                background: #99ccff;
            }
            
            #cabecera {
                height: 120px;
                background: #0099ff;
            }
            
            #menu1, #menu2 {
                width: 160px;
                height: 400px;
                background: #ff9900;
                float: left;
                margin-top: 10px;
            }
            
            #contenido {
                width: 620px; /*640px*/
                height: 400px;
                float: left;
                background: #cccc00;
                margin: 10px;
            }
            
            #pie {
                clear: left;
                height: 100px;
                background: #66ffff;
            }
            
            
            
        </style>
        
    </head>
    <body>
        <div id="contenedor">
            <div id="cabecera">La tia lola</div>
            <div id="menu1">Menu 1</div>
            <div id="contenido">Bienvenidos este es el contenido</div>
            <div id="menu2">Menu 2</div>
            <div id="pie">Todos los derechos reservados</div>
        </div>
    </body>
</html>

juanito1712 · #3 (**permalink**) 04/08/2011, 08:19

no te voy a dar la solución pero si un consejo para que tengas menos problemas en el futuro,

a la hora de maquetar utiliza el explorer como referencia, normalmente en todos los navegadores va bien y en explorer falla y cuando funciona en explorer suele funcionar en los demás.

Te ahorrará quebraderos de cabeza y no te encontrarás con la situación de llevar una hora trabajando y comprobando con firefox estando todo perfecto y mirar en explorer a ver como lo lleva el y ver que se descuadra todo.

Ahi es cuando ya no sabes donde lo has hecho mal y te cuesta menos aveces empezar la página que encontrar el fallo.

juanito1712 · #4 (**permalink**) 04/08/2011, 08:21

y no se si te falta cerrar el div salas

maycolalvarez · #5 (**permalink**) 04/08/2011, 08:36

Cita:

Iniciado por juanito1712

y no se si te falta cerrar el div salas

claro que debe cerrarlo, si no el interprete puede confundir el código, además de que un DTD no lo pasaría

juanito1712 · #6 (**permalink**) 04/08/2011, 08:39

Cita:

claro que debe cerrarlo

lo que decía es que no se si esta por cerrar o me estoy equivocando, tampoco me he puesto a contar etiquetas que encima con todos los estilos ahí metidos es un coñazo, pero claro que debe cerrarlo
jajajaja

maycolalvarez · #7 (**permalink**) 04/08/2011, 08:43

tranquilo, lo dije porque puede crear confusiones, sobre todo para los novatos, yo también pasé por ese calvario

juanito1712 · #8 (**permalink**) 04/08/2011, 08:44

tu y todos creo yo