Re: [Ovillo] Bordes redondeados en diseño liquido
Pues sí, pecas de 'divitis' porque puedes aprovechar el #borde-arriba para poner una de las dos esquinas. Y para hacer más limpio el código sería: div id=contenedor div id=borde-arriba div id=borde-arriba-der pEl contenido que quieras./p /div /div /div ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Bordes redondeados en diseño liquido
Gracias a todos por contestar y darme soluciones. Al final tuve que pensarlo yo pero por lo que veo lo implemente muy parecido a lo que me habéis planteado. CODIGO CSS: /*Lo mismo para el borde inferior*/ #borde-arriba{ height: 20px; } #borde-arriba-izq { float: left; width: 25px; height: 20px; background-image: url(esquinaIZ.gif); background-repeat: no-repeat; } #borde-arriba-der { float: right; width: 25px; height: 20px; background-image: url(esquinaDE.gif); background-repeat: no-repeat; background-position: right top; } CODIGO HTML: div id=contenedor div id=borde-arriba div id=borde-arriba-izq/div div id=borde-arriba-der/div /div /div Aunque creo que peco de divitis en este código :-D Y gracias por los enlaces, no los conocía y parecen muy interesantes. PD: Es la primera vez que preguntaba en esta lista y, sin ánimo de ser pelota, me parece cojonuda esta lista. Salu2. -Mensaje original- De: Lucas Franco [mailto:[EMAIL PROTECTED] Enviado el: sábado, 11 de agosto de 2007 3:38 Para: Ovillo, la lista de CSS en castellano Asunto: Re: [Ovillo] Bordes redondeados en diseño liquido yo lo estoy haciendo asi, con un metodo parecido al que dice agustin no se si es lo qe buscas.. HTML: div id=subtitulo div class=esquinaazul divPagina en Construccion /div /div div id=principal div class=esquinablanca div img src=constru.GIF alt=Página en Construcción / /div /div /div /div /div /div CSS: #subtitulo{ background-color: #312e4b; background-image:url(./ventanita.png); background-repeat:repeat-x; } #principal { margin: 0px 3px 1px 3px; color:#106689; font-size:12px; background-color: #FFF; } .esquinaazul div { padding-top: 0px; background:url(tr.jpg) no-repeat top right; } .esquinaazul { font-size:small; padding-top:0px; background: url(tl.jpg) no-repeat scroll top left ; } .esquinablanca div { padding-top: 0px; background:url(ar.png) no-repeat top right; } .esquinablanca { font-size:small; padding-top:0px; background: url(al.png) no-repeat scroll top left ; } /*.esquinablancab div { padding-top: 0px; background:url(aar.png) no-repeat bottom right; } .esquinablancab { font-size:small; padding-top:0px; background: url(aal.png) no-repeat scroll bottom left ; } por cierto, a que le llamas diseño liquido no estoy mucho en el tema. On 8/10/07, Agustin Bouillet [EMAIL PROTECTED] wrote: Te cuento una de las soluciones que suelo usar... Tienes tu contendor, digamos que a un 90% con un margin-top en el body de unos, digamos 1em. dentro de este contenedor agregas un div que se acomodará en la parte interior/superior de tu contenedor, identifiquemos este div como id=topRound (por ponerle algun nombre). Dentro de este div colocas la imagen redondeada --con el atributo alt vacio--; de la esquina superior izquierda; y luego a la clase topRound le pones las siguientes características ej... #topRound { background: url('imagen.gif /*acá va la esquina superior izquierda */ ') top right; height:10px ;/*Esta es la medida de la imagen.*/ } Le agregas todos los detalles que tengan que ver con tu diseño y voliá... Lo mismo tendrás que hacer con las esquinas inferiores; y considerarás un height al 100%, o relativo... Bueno es una de las soluciones... hay un monton más dando vueltas por la web. Suerte On 8/10/07, Dan Alcaide [EMAIL PROTECTED] wrote: Hola a todos, necesito tener bordes redondeados en un diseño líquido. Tengo una capa #contenedor con anchura 97% y es a la cual le aplico los bordes ¿alguien sabe alguna solución para cualquier navegador y que valide correctamente? He estado buscando por el señor Google pero ninguna me convence y no tengo tiempo para pensarlo yo. Gracias. No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.476 / Virus Database: 269.11.11/944 - Release Date: 09/08/2007 14:44 ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo -- Lucas Franco No virus found in this outgoing message
Re: [Ovillo] Bordes redondeados en diseño liquido
Ahora no te sirve, pero cuando css 3.0 sea soportada por los navegadores se podrá usar border-radius http://www.css3.info/preview/rounded-border.html. Os lo digo para que lo sepáis para cuando css 3 sea soportado por los principales navegadores (para dentro de 5 años mínimo ;-D). El día 10/08/07, Dan Alcaide [EMAIL PROTECTED] escribió: Hola a todos, necesito tener bordes redondeados en un diseño líquido. Tengo una capa #contenedor con anchura 97% y es a la cual le aplico los bordes ¿alguien sabe alguna solución para cualquier navegador y que valide correctamente? He estado buscando por el señor Google pero ninguna me convence y no tengo tiempo para pensarlo yo. Gracias. No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.476 / Virus Database: 269.11.11/944 - Release Date: 09/08/2007 14:44 ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo -- We don't need no education - Pink Floyd ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Bordes redondeados en diseño liquido
Hola a todos, necesito tener bordes redondeados en un diseño líquido. Tengo una capa #contenedor con anchura 97% y es a la cual le aplico los bordes ¿alguien sabe alguna solución para cualquier navegador y que valide correctamente? He estado buscando por el señor Google pero ninguna me convence y no tengo tiempo para pensarlo yo. Gracias. No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.476 / Virus Database: 269.11.11/944 - Release Date: 09/08/2007 14:44 ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Bordes redondeados en diseño liquido
Dan Alcaide escribió: Hola a todos, necesito tener bordes redondeados en un diseño líquido. Tengo una capa #contenedor con anchura 97% y es a la cual le aplico los bordes ¿alguien sabe alguna solución para cualquier navegador y que valide correctamente? Una solucion, usando javascript, pueden ser las NiftyCorners[1], o su evolución, NiftyCube[no tengo la url], que se adaptan a cualquier tipo de diseño. Hace unos dias vi también otra, que se llama CurvyCorners[2] incluso redondeaba con antialias las imágenes, pero no tuve oportunidad de probarla, parece mucho más versátil. Martín. [1] http://www.html.it/articoli/nifty/index.html [2] http://www.curvycorners.net/ He estado buscando por el señor Google pero ninguna me convence y no tengo tiempo para pensarlo yo. Gracias. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Bordes redondeados en diseño liquido
Te cuento una de las soluciones que suelo usar... Tienes tu contendor, digamos que a un 90% con un margin-top en el body de unos, digamos 1em. dentro de este contenedor agregas un div que se acomodará en la parte interior/superior de tu contenedor, identifiquemos este div como id=topRound (por ponerle algun nombre). Dentro de este div colocas la imagen redondeada --con el atributo alt vacio--; de la esquina superior izquierda; y luego a la clase topRound le pones las siguientes características ej... #topRound { background: url('imagen.gif /*acá va la esquina superior izquierda */ ') top right; height:10px ;/*Esta es la medida de la imagen.*/ } Le agregas todos los detalles que tengan que ver con tu diseño y voliá... Lo mismo tendrás que hacer con las esquinas inferiores; y considerarás un height al 100%, o relativo... Bueno es una de las soluciones... hay un monton más dando vueltas por la web. Suerte On 8/10/07, Dan Alcaide [EMAIL PROTECTED] wrote: Hola a todos, necesito tener bordes redondeados en un diseño líquido. Tengo una capa #contenedor con anchura 97% y es a la cual le aplico los bordes ¿alguien sabe alguna solución para cualquier navegador y que valide correctamente? He estado buscando por el señor Google pero ninguna me convence y no tengo tiempo para pensarlo yo. Gracias. No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.476 / Virus Database: 269.11.11/944 - Release Date: 09/08/2007 14:44 ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Bordes redondeados en diseño liquido
yo lo estoy haciendo asi, con un metodo parecido al que dice agustin no se si es lo qe buscas.. HTML: div id=subtitulo div class=esquinaazul divPagina en Construccion /div /div div id=principal div class=esquinablanca div img src=constru.GIF alt=Página en Construcción / /div /div /div /div /div /div CSS: #subtitulo{ background-color: #312e4b; background-image:url(./ventanita.png); background-repeat:repeat-x; } #principal { margin: 0px 3px 1px 3px; color:#106689; font-size:12px; background-color: #FFF; } .esquinaazul div { padding-top: 0px; background:url(tr.jpg) no-repeat top right; } .esquinaazul { font-size:small; padding-top:0px; background: url(tl.jpg) no-repeat scroll top left ; } .esquinablanca div { padding-top: 0px; background:url(ar.png) no-repeat top right; } .esquinablanca { font-size:small; padding-top:0px; background: url(al.png) no-repeat scroll top left ; } /*.esquinablancab div { padding-top: 0px; background:url(aar.png) no-repeat bottom right; } .esquinablancab { font-size:small; padding-top:0px; background: url(aal.png) no-repeat scroll bottom left ; } por cierto, a que le llamas diseño liquido no estoy mucho en el tema. On 8/10/07, Agustin Bouillet [EMAIL PROTECTED] wrote: Te cuento una de las soluciones que suelo usar... Tienes tu contendor, digamos que a un 90% con un margin-top en el body de unos, digamos 1em. dentro de este contenedor agregas un div que se acomodará en la parte interior/superior de tu contenedor, identifiquemos este div como id=topRound (por ponerle algun nombre). Dentro de este div colocas la imagen redondeada --con el atributo alt vacio--; de la esquina superior izquierda; y luego a la clase topRound le pones las siguientes características ej... #topRound { background: url('imagen.gif /*acá va la esquina superior izquierda */ ') top right; height:10px ;/*Esta es la medida de la imagen.*/ } Le agregas todos los detalles que tengan que ver con tu diseño y voliá... Lo mismo tendrás que hacer con las esquinas inferiores; y considerarás un height al 100%, o relativo... Bueno es una de las soluciones... hay un monton más dando vueltas por la web. Suerte On 8/10/07, Dan Alcaide [EMAIL PROTECTED] wrote: Hola a todos, necesito tener bordes redondeados en un diseño líquido. Tengo una capa #contenedor con anchura 97% y es a la cual le aplico los bordes ¿alguien sabe alguna solución para cualquier navegador y que valide correctamente? He estado buscando por el señor Google pero ninguna me convence y no tengo tiempo para pensarlo yo. Gracias. No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.476 / Virus Database: 269.11.11/944 - Release Date: 09/08/2007 14:44 ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo -- Lucas Franco ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Bordes redondeados en diseño liquido
Fe de errata En el ejemplo de construcci[on de clase. Donde dice, acá va la esquina superior izquierda; debería decir: esquina superior derecha.. Espero que se haya notado el error en el mail anterior Suerte. On 8/10/07, Agustin Bouillet [EMAIL PROTECTED] wrote: Te cuento una de las soluciones que suelo usar... Tienes tu contendor, digamos que a un 90% con un margin-top en el body de unos, digamos 1em. dentro de este contenedor agregas un div que se acomodará en la parte interior/superior de tu contenedor, identifiquemos este div como id=topRound (por ponerle algun nombre). Dentro de este div colocas la imagen redondeada --con el atributo alt vacio--; de la esquina superior izquierda; y luego a la clase topRound le pones las siguientes características ej... #topRound { background: url(' imagen.gif /*acá va la esquina superior izquierda */ ') top right; height:10px ;/*Esta es la medida de la imagen.*/ } Le agregas todos los detalles que tengan que ver con tu diseño y voliá...Lo mismo tendrás que hacer con las esquinas inferiores; y considerarás un height al 100%, o relativo... Bueno es una de las soluciones... hay un monton más dando vueltas por la web. Suerte On 8/10/07, Dan Alcaide [EMAIL PROTECTED] wrote: Hola a todos, necesito tener bordes redondeados en un diseño líquido. Tengo una capa #contenedor con anchura 97% y es a la cual le aplico los bordes ¿alguien sabe alguna solución para cualquier navegador y que valide correctamente? He estado buscando por el señor Google pero ninguna me convence y no tengo tiempo para pensarlo yo. Gracias. No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.476 / Virus Database: 269.11.11/944 - Release Date: 09/08/2007 14:44 ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo