Foros del Web » Creando para Internet » CSS »

dudas de maquetacion en css

Estas en el tema de dudas de maquetacion en css en el foro de CSS en Foros del Web. hola, me estoy iniciando en el tema de las css, y quiero maquetarme mi proxima pagina en css, sin utilizar tablas para nada. Tengo varias ...
  #1 (permalink)  
Antiguo 23/05/2007, 17:51
Colaborador
 
Fecha de Ingreso: diciembre-2005
Mensajes: 2.899
Antigüedad: 12 años
Puntos: 281
dudas de maquetacion en css

hola, me estoy iniciando en el tema de las css, y quiero maquetarme mi proxima pagina en css, sin utilizar tablas para nada.

Tengo varias dudas, pero os comento la idea que tengo, para ver si es posible hacerlo.
Yo estoy diseñando la interfaz en photoshop,utilizando un tamaño de 700*550 aproximadamente, y eso va a ser el fondo de la página, la cual, inserto en una div que llamaré marco.
La idea, es ir colocando luego una caja/capa menú a la izquierda, otra contenido con los textos, y otra pie.
-En este caso, lo aconsejable es trabajar con posiciones absolutas????
-que significa cajas liquidas.Son las que posicionamos con float y de forma relativa???
-Es lo mismo trabajar con capas que con divs

La verdad es que reconozco que llevo un lio muy grande, y no paro de leer información sobre css, y probar cosas, pero se me desajusta todo bastante.
__________________
Diseño y posicionamiento de paginas web Diseñador web freelance
Sigueme en Google Plus
  #2 (permalink)  
Antiguo 24/05/2007, 03:23
 
Fecha de Ingreso: abril-2007
Mensajes: 232
Antigüedad: 10 años, 7 meses
Puntos: 2
Re: dudas de maquetacion en css

Hola:
para que todo se quede relativamente quieto te aconsejo no usar padding, si acaso margin que da menos problemas (creo), en todo caso debes comenzar tu css así:
* {margin:0;padding:0;}
con esto anulas todos los margin y padding que los diferentes navegadores ponen cada uno a su manera y por defecto.

Luego ya puedes empezar a poner las cosas con position:absolute, teniendo en cuenta que comenzarás a contar las coordenadas desde la esquina superior izquierda de la ventana del navegador.

Los diseños líquidos trabajan con dimensiones en % del width que se está manejando. Si el width del div mayor o del body es 100% ocupa el ancho de la ventana del navegador sea cual sea la resolución, si es el 90% pues el 90. Pero si hay dentro de ese body o de ese div mayor un div que sea del 30% ocupará ese porcentaje del div en el que está contenido, adaptándo lo que esté dentro (texto, etc.) a ese ancho.

En cuanto a las capas y los divs, estos son como cajas de texto (o imagen) que contienen párrafos, títulos, imágenes, enlaces, etc. que tu los acomodas en tu diseño. Pero si necesitas que uno se solape sobre otro tienes que darle al que va arriba un z-index mayor para que se monte. En esto entra en juego el flujo html, si no le dás posición a tus divs estos se situan uno a continuación del otro, por lo cual debes indicar la posición por medio de coordenadas. En position:absolute designas el sitio con respecto a la esquina superior iazquierda de la ventana y en el caso de position:relative con respecto el sitio en donde debería aparecer según el diseño.

El float hace que el elemento se situe en la dirección que dice el float (left o right) y en el espacio que sobra se situe el siguiente div.

Suerte, Jorge H.
  #3 (permalink)  
Antiguo 24/05/2007, 16:06
Colaborador
 
Fecha de Ingreso: diciembre-2005
Mensajes: 2.899
Antigüedad: 12 años
Puntos: 281
Re: dudas de maquetacion en css

Muchas gracias Jorge. te lo has currado. Eso es un mini curso acelerado de css, si señor.
Mira,justo hoy he seguido trabajando con css, y bueno, cosas de las que me comentas, las he estado viendo.
Me he dado cuenta, que de momento con lo que más me aclaro es trabajando con posiciones absolutas, incluso me he bajado, ahora no recuerdo de donde, una especie de plantilla, que sirve para ponerla de fondo, y que con ella puedes controlar las medidas exactas y la posición donde qieres colocar cada div.
Igual, este primer diseño me está quedando muy simplón, pero es una forma de quitarte el miedo a trabajar con css, imagino que con el tiempo, investigando y probando cosas, ya podré hacer lo que busco. Trabajar con un diseño construido en photoshop, y luego por medio de css, maquetar el resto.
Lo de los divs en %, ya lo tengo más claro con lo que me explicas.Por lo que entiendo, si el marco o div maestro, lo pongo al 100%, tengo que poner los demás divs dentro de él, y jugando también en porcentajes, y estos divs siempre se amoldarán al tamaño del div maestro.....Vamos, igualito a como se trabajaba con tablas.
Lo que aún no me ha quedado muy claro es lo de la posición relativa, pero buscaré más cosillas por ahí.
Tu que me recomiendas, trabajar con posiciones relativas o absolutas????

y bueno, creo que ya está bien.
De nuevo volverte a agradecer tu tiempo, y seguiré con el vicio este de las css, porque quiero conseguir hacer diseños muy chulos.
A ver si pronto consigo algo.

Un saludo
__________________
Diseño y posicionamiento de paginas web Diseñador web freelance
Sigueme en Google Plus
  #4 (permalink)  
Antiguo 25/05/2007, 20:07
Avatar de Bill Gates  
Fecha de Ingreso: abril-2005
Ubicación: En el baño
Mensajes: 261
Antigüedad: 12 años, 8 meses
Puntos: 0
Re: dudas de maquetacion en css

Muy bien excelente explicacion JHmorales, hay si puedes me agregas al msn y platicamos mas bien [email protected]
__________________
MI CLANhttp://s5.bitefight.es/c.php?uid=86519]
  #5 (permalink)  
Antiguo 26/05/2007, 04:39
 
Fecha de Ingreso: abril-2007
Mensajes: 232
Antigüedad: 10 años, 7 meses
Puntos: 2
Re: dudas de maquetacion en css

Hola:
lo siento bill gates pero cosas de tu compañía como msn y hotmail me dan pampurrias y no las uso. Es un poco como con timofonica, que son cosas que tengo que usar por desgracia.

Suerte, Jorge H.
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 04:30.