Re: [Ovillo] Bordes redondeados en diseño liquido

[Marc González Majoral]

Disculpa, me he olvidado de decir que de esta forma puedes quitar el
float, width y height de #borde-arriba-der (las prisas...). Espero que
te sirva.

El 2/09/07, Marc González Majoral <[EMAIL PROTECTED]> escribió:
> 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:
>
> 
>   
> 
>   El contenido que quieras.
> 
>   
> 
>
___
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

[Marc González Majoral]

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:


  

  El contenido que quieras.

  

___
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]

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:









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:




 Pagina en Construccion 


 


 



 


 

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
>

Re: [Ovillo] Bordes redondeados en diseño liquido

[Almorca]

Ahora no te sirve, pero cuando css 3.0 sea soportada por los navegadores se
podrá usar border-radius .
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

Re: [Ovillo] Bordes redondeados en diseño liquido

[Agustin Bouillet]

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

Re: [Ovillo] Bordes redondeados en diseño liquido

[Lucas Franco]

yo lo estoy haciendo asi,  con un metodo parecido al que dice agustin no se
si es lo qe buscas..
HTML:




 Pagina en Construccion 


 


 



 


 

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

[Agustin Bouillet]

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

[Martín Szyszlican]

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