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">
<div>Pagina 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 [email protected]
> > 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 [email protected]
> 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.
Checked by AVG Free Edition.
Version: 7.5.476 / Virus Database: 269.11.15/949 - Release Date: 12/08/2007
11:03
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
