Primer diseño con div ayuda por favor.

billbody · #1 (**permalink**) 12/03/2007, 09:56

Hola, estoy tratando de hacer mi primer diseño maquetado con divs y tengo un par de problemitas.

Tomando como referencia la pagina www.simplebits.com, quiero hacer una pagina donde todo este centrado y tenga un ancho de 740 px.
Pero a la vez quiero que el cabezal se extienda en un 100%.
Y el contenido este en dos columnas, la izq de 497px y la derecha de 243px.

Bueno ahora las dudas que tengo, aclaro que vengo probando pero no me queda bien.

Como hago para que todo el contenido quede centrado y el cabezal tenga un ancho del 100% de la pagina?

Como hago para que las dos columnas me queden pegadas con esas medidas y centradas ?

No se si soy claro en lo que pregunto, ojala que si.

Cualquier tipo de ayuda es bienvenida.

PD si lei el css y el codigo fuente de simplebits, pero la verdad me termina mareando.

Saludos

Gracias de antemano

Mikmoro · #2 (**permalink**) 12/03/2007, 15:32

A ver si te sirve este ejemplo:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>billbody</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style>
body { background-color: rgb(204, 204, 204);
}
#cabecera { position: relative;
background-color: rgb(0, 0, 102);
font-size: 1.3em;
color: rgb(255, 255, 255);
height: 140px;
text-align: center;
padding-top: 5px;
width: 100%;
}
#cuerpo { border-style: solid;
border-width: 1px;
margin: 0px auto;
width: 740px;
position: relative;
overflow: auto;
}
#columna1 { padding: 10px;
float: left;
background-color: rgb(51, 102, 102);
border-right: solid 1px;
width: 476px;
}
#columna2 { padding: 10px;
float: right;
width: 223px;
}
  </style>
</head>
<body>
<div id="cabecera">
<h2>Esto es la cabecera con un ancho del 100%</h2>
</div>
<div id="cuerpo">
<div id="columna1">Columna 1<br>
Olortio odolor si. Lent wisisl eugiamc
onulput nos nit dolorperos ad
modo core euisim vel et ip eum ercil et, sis nim iurem nim iriusci et
ero ex ea con vent amconsectem non essit adipsum sandre minim nos ad
tat, quis aliquisis am quissed dolor sumsan henis nos augait wismod del
ulla facinit augiat.<br>
Olortio odolor si. Lent wisisl eugiamc onulput nos nit dolorperos ad
modo core euisim vel et ip eum ercil et, sis nim iurem nim iriusci et
ero ex ea con vent amconsectem non essit adipsum sandre minim nos ad
tat, quis aliquisis am quissed dolor sumsan henis nos augait wismod del
ulla facinit augiat.<br>
Olortio odolor si. Lent wisisl eugiamc onulput nos nit dolorperos ad
modo core euisim vel et ip eum ercil et, sis nim iurem nim iriusci et
ero ex ea con vent amconsectem non essit adipsum sandre minim nos ad
tat, quis aliquisis am quissed dolor sumsan henis nos augait wismod del
ulla facinit augiat.<br>
Olortio odolor si. Lent wisisl eugiamc onulput nos nit dolorperos ad
modo core euisim vel et ip eum ercil et, sis nim iurem nim iriusci et
ero ex ea con vent amconsectem non essit adipsum sandre minim nos ad
tat, quis aliquisis am quissed dolor sumsan henis nos augait wismod del
ulla facinit augiat.<br>
Olortio odolor si. Lent wisisl eugiamc onulput nos nit dolorperos ad
modo core euisim vel et ip eum ercil et, sis nim iurem nim iriusci et
ero ex ea con vent amconsectem non essit adipsum sandre minim nos ad
tat, quis aliquisis am quissed dolor sumsan henis nos augait wismod del
ulla facinit augiat.
</div>
<div id="columna2">Columna 2<br>
Olortio odolor si. Lent wisisl
eugiamc onulput nos nit dolorperos ad
modo core euisim vel et ip eum ercil et, sis nim iurem nim iriusci et
ero ex ea con vent amconsectem non essit adipsum sandre minim nos ad
tat, quis aliquisis am quissed dolor sumsan henis nos augait wismod del
ulla facinit augiat.<br>
Olortio odolor si. Lent wisisl eugiamc onulput nos nit dolorperos ad
modo core euisim vel et ip eum ercil et, sis nim iurem nim iriusci et
ero ex ea con vent amconsectem non essit adipsum sandre minim nos ad
tat, quis aliquisis am quissed dolor sumsan henis nos augait wismod del
ulla facinit augiat.
</div>
</div>
</body>
</html>

Mikel.

billbody · #3 (**permalink**) 12/03/2007, 18:36

Gracias, pero, el cuerpo no queda centrado. Por lo menos cuando hice el preview con el edit plus.

No se si viste la pagina que cite como referencia de lo que busco hacer

Saludos y de nuevo gracias!

NUCKLEAR · #4 (**permalink**) 12/03/2007, 18:59

fijate el css de simplebits http://www.simplebits.com/css/master.css
una recomendacion bajate el webdeveloper en firefox, y chequea las paginas tanto el codigo fuente el html el diseño, es una muy buena manera de aprender.
aca una imagen donde estoy usando la opcion resltar elementos de bloque que son ni mas ni menos los divs resaltados.

aca estoy editando online el css, obviamente que se modifica solo en mi ordenador, pero es una buena opcion para ver los cambios en el momento en que se hacen ;

Mikmoro · #5 (**permalink**) 12/03/2007, 23:44

Cita:

Iniciado por billbody

Gracias, pero, el cuerpo no queda centrado. Por lo menos cuando hice el preview con el edit plus.

No se si viste la pagina que cite como referencia de lo que busco hacer

Saludos y de nuevo gracias!

Perdona: no me di cuenta de adaptarlo a explorer.

Anade "text-align: center;" al selector "body" de tu css y "text-align: left;" al selector "cuerpo".

body { background-color: rgb(204, 204, 204);
text-align: center;
}
#cuerpo { border-style: solid;
border-width: 1px;
margin: 0px auto;
width: 740px;
position: relative;
overflow: auto;
text-align: left;
}

Y ya está centrado en explorer.

Y como te dice NUCKLEAR, usa firefox, que en cuanto te acostumbres te darás cuenta de que todo va mucho mejor.

Mikel.

billbody · #6 (**permalink**) 13/03/2007, 20:44

bueno aunque no lo crean uso hace rato firefox y tengo el plugin webdeveloper instalado, el problema es que el master.css para mi era muy complejo.
Yo solo queria mantener la estructura de cabezal al 100% y las dos columnas con un ancho total de 740 centradas.
Ahora vuelvo a probar con la modificacion que me hiciste para el explorer.

Gracias y seguramente volvere por mas!

Mikmoro · #7 (**permalink**) 14/03/2007, 01:49

Te creo, claro que te creo. Pero es que cuando uno prueba una cosa primero en firefox y va bien, y luego en IE y va mal, suele decir: "en firefox sí se centra pero en IE no", o algo así, y como sólo decías "no se centra", dí por hecho que usabas solamente explorer.

Ya contarás si te sirve.

Mikel.

billbody · #8 (**permalink**) 14/03/2007, 10:32

Perfecto ya se ve bien en ambos, ahora juego un poco para poner el menu y el pie de pagina, y luego cuando no salga vuelvo corriendo a pedir socorro

Saludos