Hola gente, ¿cómo les va? ¿bien? ¡Me alegra!
Hoy nos toca repasar los divisores y estilos que vimos la clase pasada y aprender nuevas cosas de ellos.
Les confieso que estuve en duda de seguir con este tema y mejorando las cosas que vimos la clase pasada o explicar otra manera diferente de usar los divisores, pero al final me decidí por reafirmar el conocimiento anterior porque considero muy importante que esto quede bien claro…
La clase anterior vimos cómo maquetar una página básica. Hoy vamos a ver algunos detalles más que los estilos y los divs nos pueden ofrecer. Para esto, vamos a quedarnos con una parte de la página que ya maquetamos:
Vamos a tomar el sector de la nota 1 (la caja amarilla) y la vamos a rellenar con lo que se supone que es, una nota. Tenemos entonces el código original de este maquetado que es:
Ahora vamos a tomar el div de la nota 1 y vamos a empezar a modificarlo. Veamos qué le ponemos: una foto, título, texto, y un pie, en base a esto haremos nuestra caja.
|
Con este código tendríamos formada nuestra nota completa. Ahora veamos qué deberíamos agregar para que realmente se vea como nosotros queremos. Pero antes haremos una aclaración importante:
En el código que voy a poner a continuación vamos a ver algunas cosas nuevas que les pueden resultar difíciles de entender.
Estuve pensando si ponerlo o no, pero sé que ustedes, mis fieles seguidores, con algo de paciencia (o no tanta) van a terminarn entendiendo.
En caso de dudas, pueden dejarme un comentario. Ya van a comprender lo útil que les va a resultar esta clase.
Habiendo hecho la aclaración, aquí va un poco de CSS:
Y este sería el resultado final del div (nota 1) de nuestro maquetado de la clase anterior (cuadro amarillo):
En la próxima clase explicaré paso a paso el código que ven más arriba, así que no se desesperen si lo que vieron les genera muchas preguntas 
Hasta la próxima…
| << CLASE ANTERIOR |
Miércoles, 28 de Mayo de 2008 a las 06.50
Hola! he encontrado este tutorial por casualidad, y la verdad es ke tiene wena pinta. Yo hacia las paginas con tablas y keria saber komo hacerlas kon divs, asi ke me viene de lujo.
weno, a lo ke iba, me ha surgido un problema copiando tu codigo… lo he kopiado a la perfeccion, pero a la hora de mirar ke es lo ke sale (sea con un navegador, o por la pestaña diseñor del dreamweaver), no le hace ni caso al height y solo okupa el div una linea de escritura, hay ke hacer algo para ke se vea bien, o es normal ke se vea asi???
Bueno, muchas gracias anticipadas
Miércoles, 28 de Mayo de 2008 a las 18.46
Hola iñaki
fijate de poner alto a tu body a ver si te funciona (o de ultima en tu html)
En definitiva, prueba esto y dime como te anduvo.
<body style=”height: 800px”>
(o la cantidad de pixeles que quieras)
Saludos!
Miércoles, 28 de Mayo de 2008 a las 18.46
Esta clase tenia pensado poner tanto el problema (lo que puse) como la explicacion (la clase que viene).
Por un problema de tiempos y espacios tuvimos que dividir la clase.
Perdon a los que no entiendan mucho de lo que vean aca arriba.
Jueves, 29 de Mayo de 2008 a las 05.11
muchas gracias, asi si ke me funciono
Martes, 3 de Junio de 2008 a las 23.30
Quisiera saber como maqueto solo en vista diseño, no en vista codigo, las divs con los colores y css
Martes, 15 de Julio de 2008 a las 20.06
Quisiera hacer una pregunta.
La verdad es primera vez que utilizo esta herramienta y realmente estoy empezadno en lo que a diseño web se refiere. He intentado hacer una página web con la herramienta div, misma que me parece muy util a la hora de diseña, aclaro no conozco nada de html y uso dreamweaver sólo en la parte de diseño, por lo que me encantaría si pudiesen explicarme las 2 preguntas que tengo, sin entrar mucho a lo de los codigos.
1- Cómo hago para centrar en mi espacio de trabajo una div y que al publicarla se vea que la págian web esta centrada?
2- Cómo hago para utilizar varios div, una encima de otra y se queden en ese mismo lugar, no que cuando publique, los div me quedan sueltos y al mover la ventana se hacen para todo lado?
Muchas gracias.