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

2007-09-02 Por tema 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:

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

2007-08-13 Por tema 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:

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

2007-08-11 Por tema Almorca
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

2007-08-10 Por tema Dan Alcaide
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

2007-08-10 Por tema 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


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

2007-08-10 Por tema 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

2007-08-10 Por tema Lucas Franco
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

2007-08-10 Por tema 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