Retroceder   Foros del Web > Diseño de Sitios web > CSS

Respuesta
 
Herramientas Desplegado
Antiguo 22-jul-2005, 15:04   #1 (permalink)
Moderador
Al Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy pronto
 
Avatar de Al Zuwaga
 
Fecha de Ingreso: noviembre-2002
Ubicación: 34.517 S, 58.500 O
Mensajes: 12.300
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
__________________
···---···
Al Zuwaga está desconectado   Responder Citando
Antiguo 22-jul-2005, 15:20   #2 (permalink)
braulito está en el buen camino
 
Avatar de braulito
 
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 554
Enviar un mensaje por ICQ a braulito Enviar un mensaje por MSN a braulito Enviar un mensaje por Yahoo  a braulito Enviar un mensaje por Skype™ a braulito
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
braulito está desconectado   Responder Citando
Antiguo 22-jul-2005, 15:52   #3 (permalink)
RoQ
RoQ está en el buen camino
 
Avatar de RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 763
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
RoQ está desconectado   Responder Citando
Antiguo 22-jul-2005, 16:19   #4 (permalink)
Durgeoble ha deshabilitado el karma
 
Avatar de Durgeoble
 
Fecha de Ingreso: marzo-2003
Mensajes: 436
Enviar un mensaje por ICQ a Durgeoble Enviar un mensaje por MSN a Durgeoble Enviar un mensaje por Yahoo  a Durgeoble
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.
Durgeoble está desconectado   Responder Citando
Antiguo 22-jul-2005, 18:34   #5 (permalink)
ramm ha deshabilitado el karma
 
Avatar de ramm
 
Fecha de Ingreso: junio-2004
Mensajes: 198
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.
ramm está desconectado   Responder Citando
Antiguo 23-jul-2005, 03:18   #6 (permalink)
codigoflecha ha deshabilitado el karma
 
Avatar de codigoflecha
 
Fecha de Ingreso: noviembre-2004
Mensajes: 299
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
codigoflecha está desconectado   Responder Citando
Antiguo 23-jul-2005, 10:09   #7 (permalink)
Moderador
Al Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy pronto
 
Avatar de Al Zuwaga
 
Fecha de Ingreso: noviembre-2002
Ubicación: 34.517 S, 58.500 O
Mensajes: 12.300
Muchas gracias, me voy a poner a practicar.
Espero que salga algo de todo esto ;)
__________________
···---···
Al Zuwaga está desconectado   Responder Citando
Antiguo 25-jul-2005, 19:28   #8 (permalink)
Moderador
Al Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy pronto
 
Avatar de Al Zuwaga
 
Fecha de Ingreso: noviembre-2002
Ubicación: 34.517 S, 58.500 O
Mensajes: 12.300
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
__________________
···---···
Al Zuwaga está desconectado   Responder Citando
Antiguo 26-jul-2005, 00:23   #9 (permalink)
braulito está en el buen camino
 
Avatar de braulito
 
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 554
Enviar un mensaje por ICQ a braulito Enviar un mensaje por MSN a braulito Enviar un mensaje por Yahoo  a braulito Enviar un mensaje por Skype™ a braulito
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
braulito está desconectado   Responder Citando
Antiguo 26-jul-2005, 10:36   #10 (permalink)
Moderador
Al Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy pronto
 
Avatar de Al Zuwaga
 
Fecha de Ingreso: noviembre-2002
Ubicación: 34.517 S, 58.500 O
Mensajes: 12.300
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
__________________
···---···
Al Zuwaga está desconectado   Responder Citando
Antiguo 26-jul-2005, 10:57   #11 (permalink)
Durgeoble ha deshabilitado el karma
 
Avatar de Durgeoble
 
Fecha de Ingreso: marzo-2003
Mensajes: 436
Enviar un mensaje por ICQ a Durgeoble Enviar un mensaje por MSN a Durgeoble Enviar un mensaje por Yahoo  a Durgeoble
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-jul-2005 a las 13:44. Razón: fallos
Durgeoble está desconectado   Responder Citando
Antiguo 26-jul-2005, 11:21   #12 (permalink)
braulito está en el buen camino
 
Avatar de braulito
 
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 554
Enviar un mensaje por ICQ a braulito Enviar un mensaje por MSN a braulito Enviar un mensaje por Yahoo  a braulito Enviar un mensaje por Skype™ a braulito
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
braulito está desconectado   Responder Citando
Antiguo 27-jul-2005, 17:53   #13 (permalink)
Moderador
Al Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy pronto
 
Avatar de Al Zuwaga
 
Fecha de Ingreso: noviembre-2002
Ubicación: 34.517 S, 58.500 O
Mensajes: 12.300
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!
__________________
···---···
Al Zuwaga está desconectado   Responder Citando
Antiguo 27-jul-2005, 18:28   #14 (permalink)
Moderador HTML y CSS
webosiris llegará a ser famoso muy prontowebosiris llegará a ser famoso muy prontowebosiris llegará a ser famoso muy prontowebosiris llegará a ser famoso muy prontowebosiris llegará a ser famoso muy pronto
 
Avatar de webosiris
 
Fecha de Ingreso: noviembre-2002
Ubicación: /home/montevideo
Mensajes: 5.965
Enviar un mensaje por MSN a webosiris Enviar un mensaje por Skype™ a webosiris
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 ...
__________________
Oraculus.com. Sitios web artesanales para el siglo XXI

PSD a HTML. Tu diseño. Nuestro código.
webosiris esta en línea ahora   Responder Citando
Antiguo 27-jul-2005, 19:55   #15 (permalink)
Moderador
Al Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy pronto
 
Avatar de Al Zuwaga
 
Fecha de Ingreso: noviembre-2002
Ubicación: 34.517 S, 58.500 O
Mensajes: 12.300
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
__________________
···---···
Al Zuwaga está desconectado   Responder Citando
Antiguo 28-jul-2005, 11:54   #16 (permalink)
braulito está en el buen camino
 
Avatar de braulito
 
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 554
Enviar un mensaje por ICQ a braulito Enviar un mensaje por MSN a braulito Enviar un mensaje por Yahoo  a braulito Enviar un mensaje por Skype™ a braulito
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
braulito está desconectado   Responder Citando
Antiguo 29-jul-2005, 16:52   #17 (permalink)
Moderador
Al Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy prontoAl Zuwaga llegará a ser famoso muy pronto
 
Avatar de Al Zuwaga
 
Fecha de Ingreso: noviembre-2002
Ubicación: 34.517 S, 58.500 O
Mensajes: 12.300
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 :(
__________________
···---···
Al Zuwaga está desconectado   Responder Citando
Antiguo 29-jul-2005, 17:02   #18 (permalink)
Durgeoble ha deshabilitado el karma
 
Avatar de Durgeoble
 
Fecha de Ingreso: marzo-2003
Mensajes: 436
Enviar un mensaje por ICQ a Durgeoble Enviar un mensaje por MSN a Durgeoble Enviar un mensaje por Yahoo  a Durgeoble
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.
Durgeoble está desconectado   Responder Citando
Antiguo 29-jul-2005, 22:51   #19 (permalink)
Colaborador
kahlito tiene algunos puntos positivos de karma
 
Avatar de kahlito
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.554
Hola Al Zuwaga, tambien puedes hacer una vista previa aquí:

www.danvine.com/icapture

Saludosss
kahlito está desconectado   Responder Citando
Respuesta
No hay votos aún.


Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder temas
No puedes subir archivos adjuntos
No puedes editar tus mensajes

BB code is Activado
Caritas están Activado
[IMG] está Activado
Código HTML está Desactivado


La Zona horaria es GMT -6. Ahora son las 23:03.


Message Board Statistics

LinkBacks Enabled by vBSEO 3.1.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93