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
