Diseño Web /

[AYUDA] Cuadraditos tipo thumbails

Participa en el tema [AYUDA] Cuadraditos tipo thumbails en el foro Diseño Web.
Buenas gente, como va? no sabia bien como poner el titulo, les explico q busco ...

Buscar en este tema:
 
  •  
    leooooo escribió el 18/05/2008 a las 09:07 hs.
     
    ¿Mensaje inapropiado?
    #1 [AYUDA] Cuadraditos tipo thumbails
    Buenas gente, como va? no sabia bien como poner el titulo, les explico q busco hacer.

    Estoy armando una web, y en la parta de trabajos realizados en vez de poner los thumbails chiquitos y q al hacer click se agranden quiero poner cuadraditos de un colo, por ejemplo gris, y que al hacer el hover se pongan rojas y al hacer click abran el trabajo.

    Estoy haciendo varias tablitas en dreamweaver, pero es un bardo, debe haber un javascript o algo mas práctico.

    También pense en mandar un caracter tipográfico y con CSS hacer el link y hover, pero me gustaria mas un cuadradito de color...

    Otra es poner un jpg y hacer el over, pero me parece q no tiene sentido, medio casero jejeje

    Alguna idea o recomendación?

    Muchas gracias!
    +
     
    0
    Me gusta
     
    http://www.psicofxp.com/forums/diseno-web.210/728697-ayuda-cuadraditos-tipo-thumbails.html
    | Más
  • Usuario inexistente escribió el 18/05/2008 a las 11:56 hs. ¿Mensaje inapropiado?

    #2 Re: Cuadraditos tipo thumbails

    Mirá, antes de que te suicides ya te aclaro que cualquier cosa que quieras hacer en CSS en Internet Explorer no te va a funcionar como quisieras. Jamás. De hecho, para intentar ver cómo hacer lo que planteás, lo probé en Firefox, Opera y Konqueror.
    Y en Firefox se me ve mal

    Primero intenté usando solamente CSS, pero estaba haciendo un link al estilo:
    Código HTML:
    <a href="#" title="Primer trabajo" class="cuadradito">&nbsp;</a> 
    Pero poner un link vacío de ese tipo es un pecado mortal del SEO, los buscadores no te indexan ni aunque se los ruegues.
    Por ello prefiero usar un GIF transparente con el tamaño que tendrán los cuadraditos (hice uno de 50x50 píxeles y pesa 125 bytes... nada) y le mando el texto del link en el atributo ALT para que los buscadores no me escupan en la cara:
    Código HTML:
    <a href="#" title="Primer trabajo" class="cuadradito"><img src="cuadradito.gif" alt="Primer trabajo" /></a> 
    Y el resto lo controlo por CSS.
    En Opera y Konqueror se ve perfecto, en Firefox 2 no pude hacer que quede bien... quizás en el 3 beta sí, en cuyo caso habría que esperar un tiempo a que salga el Firefox 3 de la beta.

    Te dejo un zip con el código y el GIF. Fijate si le encontrás la vuelta, sinó hacé el over con otra imagen como habías planeado, total no pesan nada.
    Archivos adjuntos
    Tipo de archivo: zip leooooo.zip (961 Bytes, 2 vistas)
    Me gusta este mensaje
  • Tanya ♪ escribió el 19/05/2008 a las 05:44 hs. ¿Mensaje inapropiado?

    #3 Re: Cuadraditos tipo thumbails

    Y si haces un block con css? Me parece mas practico...
    y como dice IceMan, mandale el atributo Alt para que te tome el seo.
    Saludos!
    Me gusta este mensaje
  • leooooo escribió el 19/05/2008 a las 06:37 hs. ¿Mensaje inapropiado?

    #4 Re: Cuadraditos tipo thumbails

    Originalmente publicado por ICeman2501 Ver mensaje
    Mirá, antes de que te suicides ya te aclaro que cualquier cosa que quieras hacer en CSS en Internet Explorer no te va a funcionar como quisieras. Jamás. De hecho, para intentar ver cómo hacer lo que planteás, lo probé en Firefox, Opera y Konqueror.
    Y en Firefox se me ve mal

    Primero intenté usando solamente CSS, pero estaba haciendo un link al estilo:
    Código HTML:
    <a href="#" title="Primer trabajo" class="cuadradito">&nbsp;</a> 
    Pero poner un link vacío de ese tipo es un pecado mortal del SEO, los buscadores no te indexan ni aunque se los ruegues.
    Por ello prefiero usar un GIF transparente con el tamaño que tendrán los cuadraditos (hice uno de 50x50 píxeles y pesa 125 bytes... nada) y le mando el texto del link en el atributo ALT para que los buscadores no me escupan en la cara:
    Código HTML:
    <a href="#" title="Primer trabajo" class="cuadradito"><img src="cuadradito.gif" alt="Primer trabajo" /></a> 
    Y el resto lo controlo por CSS.
    En Opera y Konqueror se ve perfecto, en Firefox 2 no pude hacer que quede bien... quizás en el 3 beta sí, en cuyo caso habría que esperar un tiempo a que salga el Firefox 3 de la beta.

    Te dejo un zip con el código y el GIF. Fijate si le encontrás la vuelta, sinó hacé el over con otra imagen como habías planeado, total no pesan nada.
    Gracias man por el laburo, perdon la ignorancia, que es SEO y que es el ALT?
    Otra consulta ya que estamos, como se hace para que queden alineados y poder controlar la distancia entre ellos? ya que yo hubiese hecho una tabla con varias columnas y el gif centrado en cada una de ellas, es que no manejo CSS mas que para links y tipografias jeje, uso tablas a full

    Originalmente publicado por tanya_vamp Ver mensaje
    Y si haces un block con css? Me parece mas practico...
    y como dice IceMan, mandale el atributo Alt para que te tome el seo.
    Saludos!
    No se que es un block

    Me gusta este mensaje
  • Tanya ♪ escribió el 19/05/2008 a las 07:07 hs. ¿Mensaje inapropiado?

    #5 Re: Cuadraditos tipo thumbails

    Mira leo te explico.
    El Seo es el robot que te indexan los buscadores. Es para que aparezcas en google y demas.
    El atributo alt, es la explicacion de las imagenes o links para las personas que tienen desabilitadas las imagenes, y ademas, para el seo, ya que si no los tenes, no te indexan las imagenes. Viste que si buscas imagenes en google te aparecen? eso es por el atributo ALT. Para hacer esto, pones asi
    <a href="bla.html" img src="imagenes/pio.jpg" alt="Esta imagen es un pajarito">
    </a>
    Para hacer un block, tenes que usar un codigo css. Esto sirve para que separes la programacion html de un sitio, y el aspecto visual. Y un block, es como si fuera un resaltado, del tamaño que queres y color. Busca atributos css en google y te van a salir dos mil, con eso te vas a poder ubicar.
    Para alinearlas tenes que usar align y float. Dos atributos mas. Haces un contenedor, le aplicas los atributos y adentro los cuadraditos. Es mucho mas sencillo usar Css que tablas, aparte que te ayuda con el tema de las resoluciones, al plantear porcentajes en vez de tamaños fijos, se adapta (diseño liquido) Aparte que la haces apta hasta para ver en un celular.
    Espero que te haya servido la aclaracion. Cualquier cosa postea. Saludos
    Me gusta este mensaje
  • leooooo escribió el 19/05/2008 a las 10:56 hs. ¿Mensaje inapropiado?

    #6 Re: Cuadraditos tipo thumbails

    si clarisimo, tengo q meter un curso o algo, es un recurso infaltable hoy, como agiliza las cosas y permite esto q decis de las resoluciones por porcentajes.

    Me recomendas algun lugar o formar de aprender css?

    Gracias!
    Me gusta este mensaje
  • Tanya ♪ escribió el 19/05/2008 a las 11:50 hs. ¿Mensaje inapropiado?

    #7 Re: Cuadraditos tipo thumbails

    Mira, pone manual o tutorial de css y te salen un monton, ahora no me acuerdo la direccion, si la recuerdo la posteo. Me alegro que te haya aclarado el thread.
    Me gusta este mensaje
  • leooooo escribió el 19/05/2008 a las 12:19 hs. ¿Mensaje inapropiado?

    #8 Re: Cuadraditos tipo thumbails

    Originalmente publicado por tanya_vamp Ver mensaje
    Mira, pone manual o tutorial de css y te salen un monton, ahora no me acuerdo la direccion, si la recuerdo la posteo. Me alegro que te haya aclarado el thread.
    Perfecto, no se como se hace un contenedro, como es mi web personal, la voy a terminar en tablas, la necesito subir YA, despues veo si aprendo CSS me la voy rearmando y actualizo
    Me gusta este mensaje
  • Tanya ♪ escribió el 19/05/2008 a las 12:24 hs. ¿Mensaje inapropiado?

    #9 Re: Cuadraditos tipo thumbails

    Genial, te va a servir.
    Saludos
    Me gusta este mensaje


Estadísticas del tema
  • 8 RESPUESTAS
  • 355 VISTAS
  • 3 USUARIOS RESPONDIERON
 
Ir arriba
Contacto | Acerca de | Ayuda | Términos Legales | privacidad | Pautas de convivencia | Mapa de los foros | TrabajÁ con nosotros
©2008 Psicofxp.com S.A. - Todos los derechos reservados
Certifica IAB