Foros del Web » Creando para Internet » HTML »

como maquetar sin morir en el intento?

Estas en el tema de como maquetar sin morir en el intento? en el foro de HTML en Foros del Web. 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;"> ...
  #1 (permalink)  
Antiguo 03/08/2011, 06:32
 
Fecha de Ingreso: diciembre-2010
Mensajes: 166
Antigüedad: 6 años, 2 meses
Puntos: 0
como maquetar sin morir en el intento?

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
  #2 (permalink)  
Antiguo 04/08/2011, 02:04
Avatar de andresdzphp
Colaborador
 
Fecha de Ingreso: julio-2011
Ubicación: $this->Colombia;
Mensajes: 2.749
Antigüedad: 5 años, 8 meses
Puntos: 793
Respuesta: como maquetar sin morir en el intento?

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>Ejemplo</title>
  6.  
  7.         <style type="text/css">
  8.            
  9.             body {
  10.                 text-align: center;
  11.                 margin: 0;
  12.                 background: #000066;
  13.             }
  14.            
  15.             #contenedor {
  16.                 width: 960px;
  17.                 height: 640px;
  18.                 text-align: left;
  19.                 margin: 0 auto;
  20.                 background: #99ccff;
  21.             }
  22.            
  23.             #cabecera {
  24.                 height: 120px;
  25.                 background: #0099ff;
  26.             }
  27.            
  28.             #menu1, #menu2 {
  29.                 width: 160px;
  30.                 height: 400px;
  31.                 background: #ff9900;
  32.                 float: left;
  33.                 margin-top: 10px;
  34.             }
  35.            
  36.             #contenido {
  37.                 width: 620px; /*640px*/
  38.                 height: 400px;
  39.                 float: left;
  40.                 background: #cccc00;
  41.                 margin: 10px;
  42.             }
  43.            
  44.             #pie {
  45.                 clear: left;
  46.                 height: 100px;
  47.                 background: #66ffff;
  48.             }
  49.            
  50.            
  51.            
  52.         </style>
  53.        
  54.     </head>
  55.     <body>
  56.         <div id="contenedor">
  57.             <div id="cabecera">La tia lola</div>
  58.             <div id="menu1">Menu 1</div>
  59.             <div id="contenido">Bienvenidos este es el contenido</div>
  60.             <div id="menu2">Menu 2</div>
  61.             <div id="pie">Todos los derechos reservados</div>
  62.         </div>
  63.     </body>
  64. </html>
  #3 (permalink)  
Antiguo 04/08/2011, 08:19
Avatar de juanito1712  
Fecha de Ingreso: mayo-2010
Ubicación: Valencia
Mensajes: 1.106
Antigüedad: 6 años, 10 meses
Puntos: 66
Respuesta: como maquetar sin morir en el intento?

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.
  #4 (permalink)  
Antiguo 04/08/2011, 08:21
Avatar de juanito1712  
Fecha de Ingreso: mayo-2010
Ubicación: Valencia
Mensajes: 1.106
Antigüedad: 6 años, 10 meses
Puntos: 66
Respuesta: como maquetar sin morir en el intento?

y no se si te falta cerrar el div salas
  #5 (permalink)  
Antiguo 04/08/2011, 08:36
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 8 años, 8 meses
Puntos: 1530
Respuesta: como maquetar sin morir en el intento?

Cita:
Iniciado por juanito1712 Ver Mensaje
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
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #6 (permalink)  
Antiguo 04/08/2011, 08:39
Avatar de juanito1712  
Fecha de Ingreso: mayo-2010
Ubicación: Valencia
Mensajes: 1.106
Antigüedad: 6 años, 10 meses
Puntos: 66
Respuesta: como maquetar sin morir en el intento?

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
  #7 (permalink)  
Antiguo 04/08/2011, 08:43
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 8 años, 8 meses
Puntos: 1530
Respuesta: como maquetar sin morir en el intento?

tranquilo, lo dije porque puede crear confusiones, sobre todo para los novatos, yo también pasé por ese calvario
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #8 (permalink)  
Antiguo 04/08/2011, 08:44
Avatar de juanito1712  
Fecha de Ingreso: mayo-2010
Ubicación: Valencia
Mensajes: 1.106
Antigüedad: 6 años, 10 meses
Puntos: 66
Respuesta: como maquetar sin morir en el intento?

tu y todos creo yo

Etiquetas: maquetar
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




La zona horaria es GMT -6. Ahora son las 16:28.