Layout

Hola ¿Qué tal?

Cree un layout para mi página web, lo partí en trozos procedí a armarlo, opté por lo que según tengo entendido es lo usual para estructurar layouts (usar tablas) en xhtml combinadas con los atributos de cada imagen (del .css), le di los atributos a cada parte de la imagen en un .css pero me enrredo mucho con la creación de tablas y relacionar las .funcion del .css, a la final no logré mucho. Me da pena pero la verdad no comprendo mucho como estructurar las tablas con las funciones de las imagenes.

Obté por estructurar el layout (desde el .css) sólo colocando en el .html <div =class"nombre"></div> de cada función creé, eso tampoco me fue muy bien porque algunas imagenes encajan y otras no TT.

Revisando esta página, me topé con varios tutoriales sobre el posicionamiento de los layout (sin usar tablas). Lo he seguido, pero al intentar trabajar el mío de forma parecida, pero con "imagenes" todo queda un desastre ó no logro nada.

¿Cuál es la mejor forma para estructurar un layout compuesto de imágenes con css y html?

Pasando de eso. Creo que tal vez me falta un poco más de documentación aunque ya he leido un buen tanto .

Saludos, gracias.

así es, diseñar con tablas NO es recomendado para nada. las tablas son para datos tabulados.
sobre tu problema, deberías primero hacer un layout SIN imagenes, es decir, que te quede tu diseño a dos o tres columnas o como lo desees, después (y mediante css) metes las imagenes con la propiedad background

ahora, que si sigues teniendo problemas, te recomiendo ampliamente leer nuevamente los tutoriales de css, luego si persisten tus dudas o problemas, crea un nuevo post con el código que estás utilizando y/o una dirección web en la que podamos ver tu trabajo.

un saludo, suerte

anDrEaa escribió:

fael escribió:

Hola, gracias por responder.

Bueno me ha quedado claro que el uso de tablas para maquetar un layout no es lo mejor ni lo más recomendado. Optaré por estructurar la página sin las imágenes primero para paracticar y luego las utilizo bajo lo que haya generado.

Gracias =P

Poco a poco se empieza

Hola, ¿qué tal?.

Logré unir el layout casi en su totalidad. Pero hay unas partes que no encajan y pues, según yo ese puede que tenga que ver con la forma en que lo corté y tal vez es por eso que esas partes no encajan. Hmm... pero no estoy segura. ¿No se puede unir bien si las imágenes no están parejas?

El layout está más o menos estructurado así: Ver imágen >> Imagen <<
(Los trozos simbolízan cada pedazo del layout)

Otra cosa es qué un pedazo del layout (bodyf), el que será la mayor parte del cuerpo de la página lo corté pequeño para repetirlo varias veces y así no tener un gran pedazo, pero no sé porqué no sé repite aunque le coloqué ese atributu en su función. ¿Porqué no funciona el repeat para esa imágen?, ¿cómo puedo decirle qué se repita un número de veces pre establecido?

De momento eso. Muchas gracias.

Estas son las funciones del .css referente a las imágenes del layout.

Código :

#container
{
margin: 0;
}

.topiz /*361x192*/
{
width: 361px;
height: 192px;
margin: 0px;
float: left;
vertical-align: center;
background-image: url('topiz.jpg');
background-repeat: no-repeat;
}

.topdr /*439x219*/
{
width: 439px;
height: 219px;
margin: 0px;
float: left;
vertical-align: center;
background-image: url('topdr.jpg');
background-repeat: no-repeat;
}

.topbariz /*361x27*/
{
width: 361px;
height: 27px;
margin: 0px;
float: left;
vertical-align:center;
background-image: url('topbariz.jpg');
background-repeat: no-repeat;
}

.down1 /*800x54*/
{
width:800px;
height:54px;
margin: 0px;
float: left;
vertical-align: center;
background-image: url('down1.jpg');
background-repeat: no-repeat;
}

.down2 /*482x213*/
{
width: 482px;
height:213px;
margin: 0px;
float: left;
vertical-align: center;
background-image: url('down2.jpg');
background-repeat: no-repeat;
}

.downpic /*238x213*/
{
width: 238px;
height:213px;
margin: 0px;
float: left;
vertical-align: center;
background-image: url('downpic.jpg');
background-repeat: no-repeat;
}

.downright /*80x213*/
{
width: 80px;
height:213px;
margin: 0px;
float: right;
vertical-align: center;
background-image: url('downright.jpg');
background-repeat: no-repeat;
}

.bodyf /*80x213*/
{
width: 800px;
height: 33px;
margin: 0px;
float: left;
vertical-align: center;
background-image: url('bodyf.jpg');
background-repeat: repeat;
}

.footer /*800x200*/
{
width: 800px;
height: 200px;
margin: 0px;
float: left;
vertical-align: center;
background-image: url('footer.jpg');
background-repeat: no-repeat;
}

Hatsuharu un div no se repite magicamente, si lo que quieres hacer es poner un fondo, debes aplicar el css a la ttiqueta body, por otro lado, creo que es más fácil a mi críterio tener un gran "pedazo" que muchos sueltos por ahí. Revisa también que los tamaños de las capas coincidan, usa un estilo para hacer el típico clear:both; para ajustar esos espacios de sobra también y por !el amor de Dios! no uses tanta imagen como fondo....

Son algunos consejos....

Ghetto Fabulous Aoyama escribió:

Hola, gracias por responder.

Bueno, lo corté así porqué era la forma más cómoda que vi de unirlo por varias cosas que pensé hacer, pasando un poco de el hecho de que mientras más imagenes más complejo es unirlos, no sé porqué pero yo tenía entendido que mientras más imagenes era mejor ><, lo re acomodaré.

Saludos, gracias

No, de hecho entre menos cortes tengas y menos imágenes utilices es mejor y tu página quedará óptima, una forma para hacer los cortes sin que queden tan complejos es hacerlos según los bloques generales de contenido, por ejemplo el header, el menú, si hay algún menú lateral, el footer y el contenido general, así también te ahorras mucho trabajo y será más fácil trabajar y modificar tu página a futuro.

Creo que podriamos decirte cómo seria más fácil partir los bloques si nos dieras una imágen con el diseño exacto.
Saludos

Hola

Bueno ya lo he pegado nuevamente, esta vez sólo realicé cuatro cortes. Así quedó: >> Ver <<

El corte que se supone será el cuerpo sólo corté un trozo pequeño para repetirlo, porque siempre será de igual color.

Antes había hecho un corte por separado de la imagen que tiene un marquito como de foto, porque tengo pensado hacer que cada vez que se inicie la página cargue una imagen diferente, pero supongo que puedo mandar a que la imagen (con el tamaño exacto para entrar en el marco) se le coloque encima sin necesidad de meterme con el layout.

No sé mucho cómo voy a hacer con el menú, porqué yo quiero hacerle un efecto sencillo a cada botón por decirlo así en flash.

No sé con propiedad que pueda resultar más conveniente, ¿cortar el pedazo de los botones para trabajar eso en flash? ó ¿tomar todo el top de la página y trabajar en flash la parte de los botones?, ó ¿cortar cada botón y trabajarlo por separado?. (Por eso antes había tratado de aislar esa parte del resto del layout).

y pues eso de momento.
Gracias a todos los que me han sugerido y comentado.

Adieu.

En el caso de los botones, es mejor que trabajes todo en un sólo flash, es decir, el top, aunque igual, puedes hacer cosas interesantes en CSS. Para la parte de la foto, puedes hacer un fondo en el cual no exista ninguna imágen y luego, como tu dices, la vas cargando aleatoriamente (si es lo que necesitas) y la posiciones igual, con CSS junto con el texto, que es mejor que no sea una imágen.
Finalmente, revisando el código, te hace falta cerrar un div, el del footer.
Muchos éxitos con tu página, tal vez al comienzo te parezca un poco complicado, pero después verás que de esa forma, todo es mucho más fácil

Zarzamora escribió:

Hola

Estonces creo que trabajaré todo el top de la página done están los botones en flash, por cierto gracias por pillar el detalle en el código.

Merci beaucoup