Foros del Web » Creando para Internet » CSS »

maquetación con CSS

Estas en el tema de maquetación con CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/07/2005, 16:04
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
maquetación con CSS

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
__________________
...___...
  #2 (permalink)  
Antiguo 22/07/2005, 16:20
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 13 años, 7 meses
Puntos: 8
http://www.tierradenomadas.com/tw007.phtml
http://www.tierradenomadas.com/tw002.phtml
http://www.tierradenomadas.com/tw003.phtml
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño
  #3 (permalink)  
Antiguo 22/07/2005, 16:52
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
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
  #4 (permalink)  
Antiguo 22/07/2005, 17:19
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 9 meses
Puntos: 2
Pasos a seguir

  1. haz una copia de la pagina (trabajaras sobre ella)
  2. elimina toda etiqueta y/o atributo que haga referencia a una imagen (excepto aquellas que pertenecen al contenido como fotos, graficas y similares)
  3. 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)
  4. elimina toda tabla que no contenga datos tabulares
  5. convierte los menus en listas si no lo estan ya
  6. 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.
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #5 (permalink)  
Antiguo 22/07/2005, 19:34
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 13 años, 5 meses
Puntos: 0
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.
  #6 (permalink)  
Antiguo 23/07/2005, 04:18
Avatar de codigoflecha  
Fecha de Ingreso: noviembre-2004
Mensajes: 325
Antigüedad: 13 años, 1 mes
Puntos: 3
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
  #7 (permalink)  
Antiguo 23/07/2005, 11:09
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Muchas gracias, me voy a poner a practicar.
Espero que salga algo de todo esto ;)
__________________
...___...
  #8 (permalink)  
Antiguo 25/07/2005, 20:28
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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
__________________
...___...
  #9 (permalink)  
Antiguo 26/07/2005, 01:23
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 13 años, 7 meses
Puntos: 8
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
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño
  #10 (permalink)  
Antiguo 26/07/2005, 11:36
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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
__________________
...___...
  #11 (permalink)  
Antiguo 26/07/2005, 11:57
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 9 meses
Puntos: 2
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
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.

Última edición por Durgeoble; 26/07/2005 a las 14:44 Razón: fallos
  #12 (permalink)  
Antiguo 26/07/2005, 12:21
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 13 años, 7 meses
Puntos: 8
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.
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño
  #13 (permalink)  
Antiguo 27/07/2005, 18:53
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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!
__________________
...___...
  #14 (permalink)  
Antiguo 27/07/2005, 19:28
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
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 ...
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #15 (permalink)  
Antiguo 27/07/2005, 20:55
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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
__________________
...___...
  #16 (permalink)  
Antiguo 28/07/2005, 12:54
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 13 años, 7 meses
Puntos: 8
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.
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño
  #17 (permalink)  
Antiguo 29/07/2005, 17:52
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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 :(
__________________
...___...
  #18 (permalink)  
Antiguo 29/07/2005, 18:02
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 9 meses
Puntos: 2
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 :)
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #19 (permalink)  
Antiguo 29/07/2005, 23:51
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Hola Al Zuwaga, tambien puedes hacer una vista previa aquí:

www.danvine.com/icapture

Saludosss
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 05:04.