Foros del Web » Creando para Internet » CSS »

Primer diseño con div ayuda por favor.

Estas en el tema de Primer diseño con div ayuda por favor. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/03/2007, 10:56
 
Fecha de Ingreso: marzo-2004
Mensajes: 68
Antigüedad: 13 años, 8 meses
Puntos: 0
Primer diseño con div ayuda por favor.

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
  #2 (permalink)  
Antiguo 12/03/2007, 16:32
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Primer diseño con div ayuda por favor.

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.
  #3 (permalink)  
Antiguo 12/03/2007, 19:36
 
Fecha de Ingreso: marzo-2004
Mensajes: 68
Antigüedad: 13 años, 8 meses
Puntos: 0
Re: Primer diseño con div ayuda por favor.

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!
  #4 (permalink)  
Antiguo 12/03/2007, 19:59
Avatar de NUCKLEAR
Moderador radioactivo
 
Fecha de Ingreso: octubre-2005
Ubicación: Cordoba-Argentina
Mensajes: 5.688
Antigüedad: 12 años, 1 mes
Puntos: 890
Re: Primer diseño con div ayuda por favor.

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 ;
__________________
Drupal Argentina
  #5 (permalink)  
Antiguo 13/03/2007, 00:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Primer diseño con div ayuda por favor.

Cita:
Iniciado por billbody Ver Mensaje
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.
  #6 (permalink)  
Antiguo 13/03/2007, 21:44
 
Fecha de Ingreso: marzo-2004
Mensajes: 68
Antigüedad: 13 años, 8 meses
Puntos: 0
Re: Primer diseño con div ayuda por favor.

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!
  #7 (permalink)  
Antiguo 14/03/2007, 02:49
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Primer diseño con div ayuda por favor.

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.
  #8 (permalink)  
Antiguo 14/03/2007, 11:32
 
Fecha de Ingreso: marzo-2004
Mensajes: 68
Antigüedad: 13 años, 8 meses
Puntos: 0
Re: Primer diseño con div ayuda por favor.

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

Última edición por billbody; 14/03/2007 a las 11:43
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 09:34.