maquetación con CSS

AlZuwaga · #1 (**permalink**) 22/07/2005, 15:04

Buenas,

¿podrían recomendarme un buen tutorial (tirando a principiante y en lo posible en castellano) sobre el uso de CSS para la "maquetación" de un sitio?

Estoy leyendo un poco de algunos enlaces que encontré en google y en el foro, pero la verdad que no logro entenderlos tan fácilmente. Realmente me cuasta mucho pensar en armar la estructura de una página sin usar tablas!

Gracias

braulito · #2 (**permalink**) 22/07/2005, 15:20

http://www.tierradenomadas.com/tw007.phtml
http://www.tierradenomadas.com/tw002.phtml
http://www.tierradenomadas.com/tw003.phtml

RoQ · #3 (**permalink**) 22/07/2005, 15:52

chekea la historia de los 3 chanchitos webmaster
http://www.juque.cl/weblog/archives/...anchitos_1.php
http://www.juque.cl//weblog/archives...o_sin_tabl.php
http://www.juque.cl/weblog/archives/...ga_continu.php

Durgeoble · #4 (**permalink**) 22/07/2005, 16:19

haz una copia de la pagina (trabajaras sobre ella)
elimina toda etiqueta y/o atributo que haga referencia a una imagen (excepto aquellas que pertenecen al contenido como fotos, graficas y similares)
elimina toda etiqueta y/o atributo que aplique un estilo o color y no sea css (incluyendo las etiquetas style dentro del body del documento)
elimina toda tabla que no contenga datos tabulares
convierte los menus en listas si no lo estan ya
cualquier titulo marcalo como tal (h1-h6)

¿has acabado? te ha quedado una pagina horrible ¿verdad? entonces perfecto, ahora toca aplicarle estilos.

Separa la pagina en bloques logicos (conjunto de elementos que deban estar juntos) cabecera, menu, bloques de contenido (comentarios por ejemplo)

Por ejemplo aqui en el foro cada mensaje con su autor, fecha, contenido del comentario, botones y demas seria un bloque logico TODO, no cada cosa por separado.
Mete cada bloque logico en un DIV, aplicale un #id unico a cada uno y class iguales a aquellos que tengan estilos muy similares o identicos.
la pagina deberia seguir viendose igual.

Mete cada elemento de texto que quieras resaltar dentro de un "EM" si quieres enfatizarlo, dentro de un "STRONG" si quieres que resalte aun mas y dentro de "SPAN" si solo quieres diferenciarlo de alguna forma (colores o similares) no uses ni "B" ni "I".
Ahora a jugar con css y devolverle el esplendor, aunque claro eso ya depende del diseño, no se puede hacer uno "general", si has llegado a este punto tu pagina deberia ser perfectamente valida y estar lista para dar guerra.

ramm · #5 (**permalink**) 22/07/2005, 18:34

Jejejeje, te quedo bueno eso Durgeoble.

Mira este, que esta bien facil:
http://www.cristalab.com/tutoriales/..._layout_en_css

Lo hice justamente para comenzar a maquetar con CSS, es bien basico.

codigoflecha · #6 (**permalink**) 23/07/2005, 03:18

este es en inglés, pero a mi en su momento me ayudo bastante para empezar:
http://veerle.duoh.com/comments.php?id=208_0_2_10_C
Un saludo

AlZuwaga · #7 (**permalink**) 23/07/2005, 10:09

Muchas gracias, me voy a poner a practicar.
Espero que salga algo de todo esto ;)

AlZuwaga · #8 (**permalink**) 25/07/2005, 19:28

Ufff... luego de mucho transpirar, retomo el tema.
Tengo muchas preguntas para hacer. Las generales las iré haciendo en éste post y para las más puntuales abriré nuevos mensajes.

Les comento, estuve haciendo los ejemplos que me pasaron (menos el de los "3 chanchitos", que no cargaba la página) y los resultados fueron "espectaculares". Claro, había hecho puro copy&paste

Entonces me decidí a hacer algo por mi cuenta y el resultado fue éste: http://ccc.1asphost.com/alzuwaga/Ej4/default.asp (bueno... "por mi cuenta" es mucho decir... de algunas cosillas me "copié" porque no me salían

)

Tengo dos estilos (estilo1.css y estilo2.css). Al cargar la página, se usa por default estilo1.css. Al clickear sobre el enlace "estilo 2", pues se usa el estilo2.css

. Fianalmente, al clickear sobre "sin estilos"... bueno, éste no lo explico porque es más que obvio

.
Los estilos lo único que hacen es cambiar la posición de la barra de navegación de izquierda a derecha (aunque el <div> "se llame", estúpidamente -y luego me di cuenta de ello-, "izquierda"

).
Bueno, sólo agregar que el "intercambio de hojas de estilo" (así como la clase "actual") la "coloco" mediante ASP. Ah, los tags <p> tienen un class para eliminar la publicidad del host gratuito (si, es mala práctica, pero temía que me deformen el asunto. Luego se lo quito)

Bien, las primeras preguntas son (algunas las pregunto en el mismo ejemplo):

1- Por qué el background-color del div "contenedor" se ve en IE en su totalidad y no en FF?
2- (tal vez esto responda la pregunta 1...) ¿qué es el "." (caracter punto) que se ve en la esquina inferior izquierda, al seleccionar toda la página, en IE?
3- Como hago para que el <div id="izquierda"> se "estire hacia abajo" hasta completar el alto total del <div id="contenido"> (para que su background-color llegue "hasta abajo de todo")
4- Cuando cargás la página en IE, las palabras ¿Cómo hago para que, en el div "izquierda", se "solapan" con el menú de navegación. Si pasás con el mouse por encima del menú, se corrige (si cargás la página y luego hacés alt+tab hacia otra ventana y luego volvés a ésta, también se corrige!

)

Bueno, por ahora nada más. mañana continúo ;)

Saludos y gracias

braulito · #9 (**permalink**) 26/07/2005, 00:23

1.- Intenta agregando la propiedad display: table a tu div contenedor.

2.- Interesante, no había visto eso antes...

3.- Crea una imagen que contenga los colores del div menu y el div contenido y lo pones como "background: #CCCCCC url('imagenconcolores.gif') repeat-y" al div contenedor. Fíjate en éste sitio utiliza ésta imagen para simular el color de fondo de los menus de la derecha.

4.- Parece el pekaboo bug de IE, puedes ver info de ese bug en ésta dirección, y talvez encuentres algo sobre ese misterioso punto si te revisas los demás bugs

AlZuwaga · #10 (**permalink**) 26/07/2005, 10:36

Hola braulito, sobre el punto 1 hice lo que dijiste y efectivamente ahora se ve el color de fondo en su totalidad

. Además y

misteriosamente

se solucionó lo planteado en el punto 3 aunque sólo para FF. No así en IE (no he subido los archivos como para demostrarlo)
Punto 4, efectivamente es el "pekaboo"
Punto 2... si no lo sabés vos, menos yo!

Bueno, otra consulta: En el HTML, el orden de los factores, ¿cómo afecta el producto?
Es decir, y voy a exagerar, si invierto la posición entre los div's "encabezado" y "pie_de_página" (que no lo tengo, pero para exagerar el ejemplo sirve)... ¿igualmente puedo, mediante CSS, colocar el encabezado arriba y el pie abajo?

Como dije, me fuí a los extremos.. pero ahora algo un poco "más real": Sin modificar nada del código HTML, ¿puedo hacer que el menú que actualmente tengo deje de estar en la barra lateral (a la izquierda o derecha) para pasar a ser un menú superior (con sus enlaces uno al lado del otro en vez de uno abajo del otro) ubicado inmediatamente abajo del div "encabezado" sólo modificando la joja de estilos?

Supongo que si, pero no le veo el cómo!

Gracias

Durgeoble · #11 (**permalink**) 26/07/2005, 10:57

Lo situas en la posición que desea con "position: absolute;"
a los menus les das la propiedad float:left; y display:block; otra opcion es display: inline; segun tu prefieras el resultado, prueba ambas

braulito · #12 (**permalink**) 26/07/2005, 11:21

Exacto, como dice Durgeoble puedes situar cualquier capa si sólo le das "position:absolute;".

Sobre el menú superior había hecho un poco de ese código por aca:
http://www.forosdelweb.com/showthrea...58#post1185058

Como viste con CSS puedes hacer magia.

AlZuwaga · #13 (**permalink**) 27/07/2005, 17:53

Me estoy volviendo locooooo. Todavía no entiendo esto del SeEseEse del todo :(

En fin... una consultilla más. Al usar position:absolute con contenido dinámico (que sale de una BD)... ¿puedo tener problemas? Es decir, si lo coloco a top 500px, supongo son 500px desde el... body... ¿y si un contenido superior, dinámico (o sea que no sé cuanto va a ser su alto de antemano), ocupa más de 500 px?

Me estoy mareando!

webosiris · #14 (**permalink**) 27/07/2005, 18:28

Cita:

Iniciado por Al Zuwaga

Me estoy volviendo locooooo.

Tranquilo, que el poder que da el CSS vale cualquier locura que te puedas agarrar...

Al punto 2 que planteabas en el post + arriba, no estoy seguro, pero quizás se deba a esto que aparece en el código de tu página (es un código puesto por el hosting).

Código HTML:

<!-- Inserted by 1ASPHost.com - Bottom -->
<p align="center"><strong><a href="http://www.1asphost.com">100 MB free hosting. Click here to build your own free site.</a></strong></p>
<!-- Inserted by 1ASPHost.com - Bottom -->

PD: a lo demás intento contestarte mañana que ahora tengo mucho

...

AlZuwaga · #15 (**permalink**) 27/07/2005, 19:55

Hola webosiris,

lo que me comentás del punto 2 no es así ya que "ese punto visible en la página" también lo veo haciendo las pruebas en local (en dos PC's distintas, casa y trabajo) y, por supuesto, en local no tengo el código que agrega el host gratuito ;)
Mañana espero tus otros comentarios!

Además algo que me olvidé de preguntar en el mensaje anterior.
Resulta que el viernes 5 de agosto tengo que presentar "un sitio" para el final de una materia en donde estoy estudiando. Los requisitos son mínimos (para los que tenemos al menos algo de experiencia): que tenga una navegación coherente, algo de formularios, imágenes y estilos ("decorativos")
Entonces fue cuando se me ocurrió usar CSS para maquetarlo (además de "adornar").

La cuestión es que allí, donde lo va a ver el profesor, usamos MAC (IE 5.NoMeAcuerdo y Safari (de éste ni idea qué versión)).
Ok, "supongamos" que puedo hacer algo "presentable" antes de esa fecha... ¿Lo que se vea bien en FF se verá bien en Safari y/o "IE:MAC"? (y lo pregunto porque lamentablemente no tengo acceso a una MAC hasta, justamente, el 5 de agosto como para darme cuenta por mis medios... ahora estamos de vacaciones de invierno).
La idea es que no quiero llegar allí y encontrarme con que mi página se ve toda "descuajeringada"

Salu

braulito · #16 (**permalink**) 28/07/2005, 11:54

Bueno, cuanto daría por tener una MAC, pero ni trabajo tengo :p
Si quieres ver tus páginas en Safari o IE en MAC puedes usar esta herramienta

http://www.fundisom.com/g5/

Te saca screenshots de tus páginas en esos navegadores.

AlZuwaga · #17 (**permalink**) 29/07/2005, 16:52

Los avances: http://ccc.1asphost.com/alzuwaga/Ej7/

¿Me dicen (salvo por la cuestión gráfica, que tampoco a mi me gusta) si estaría ok o si estoy mandando fruta? (lo estrictamente "técnico", sinó pregunto en el foro críticas ;)

Saludos y gracias

PD: braulito, el generador de screenshots está caído por el momento :(

Durgeoble · #18 (**permalink**) 29/07/2005, 17:02

en safari para mac se ve exactamente igual que en firefox.
Ni idea de IE, fue lo primero que desinstale.
espero que te valga aunque no sea un screenshot :)

kahlito · #19 (**permalink**) 29/07/2005, 22:51

Hola Al Zuwaga, tambien puedes hacer una vista previa aquí:

www.danvine.com/icapture

Saludosss