background color

djjuan · #1 (**permalink**) 19/02/2005, 08:08

Hola, mi cuestion es la siguiente:
Quiero que el background de un <div> tenga dos colores. y poder indicarle que % tenga cada uno. Aca pongo un ejemplo:

Muchas Gracias.
Saludos.
djjuan.

JavierB · #2 (**permalink**) 19/02/2005, 08:56

Hola djjuan

Me temo que eso no se puede hacer. Tendrías que utilizar una imágen con los colores y porcentajes que prefieras y ponerla como fondo.

Saludos,

Zane_ · #3 (**permalink**) 20/02/2005, 06:55

o utilizar una tabla con colores distintos en las celdas

thunder.scripts · #4 (**permalink**) 20/02/2005, 07:14

o dos divs :D

djjuan · #5 (**permalink**) 20/02/2005, 08:45

Gracias por las respuestas.
Primero les comento que soy un poco nuevo en el tema de las CSS. Les detallo un poco mejor mi problema asi se tienen una mejor idea.

Yo lo que quiero lograr es esto:

Para lograr eso cree un contenedor, donde tengo dos divs, en uno va el texto y en el de abajo la terminacion del contenedor (es una imagen), pero me falta la sombra del contenedor a la derecha. Tambien quiero que si pongo mas texto, si alargue la sombra.

Para hacerlo utilize el siguiente codigo:

Código:

<style type="text/css"> 
body { margin: 0; padding: 0; background-color:#CCCCCC; color:#ffff; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; } 
#contenedor { position : absolute; top: 105px; left: 110px; width: 520px; padding: 0px 0 0 0; width: 520px; background-color: #FEF2E5;} 
#contenido1 { margin:0px 10px 0px 0px; padding:10px 10px 10px 10px;   width: 410;} 
#contenido3 { margin:10 10 10px 500px; padding: 10px 10px 10px 10px;  background-color: #CFCFCF;  width: 12px;  } 
#contenido2 { margin:0px 0px 0px 0px; padding:0px;  } 
</style></head><body>
<div id="contenedor"> 
  <div id="contenido1"><p>texto texto </p></div>
  <div id="contenido2"><img src="img/c_fondoinf.gif"></div></div></body></html>

Como veran me falta la sombra de la derecha.

Tal vez utilizando una imagen de fondo y la repito como me decia JavierB, me ocupe mucho espacio.
Tablas no tenia pensado usar. Que opcion piensan que sea la mejor solucion? Nuevamente muchas gracias y saludos.

thunder.scripts · #6 (**permalink**) 20/02/2005, 08:54

Es necesario que tenga position:absolute? por algo en especial o para centrarlo nada más?

thunder.scripts · #7 (**permalink**) 20/02/2005, 08:56

oia, le pifie al botón.

Lo que te iba a decir era que con agregarle un borde al contenedor es suficiente:

Código HTML:

border-right: 3px solid #666666;

EDIT: otra cosa, la imágen de contenedor 2 te conviene ponerla como fondo, y guardar todo en una hoja de estilos externa

suerte
Fede

djjuan · #8 (**permalink**) 20/02/2005, 10:57

Lo de position absolute lo puse porque el contenedor tiene que estar si o si en esa ubicacion de la pagina. Y lo del borde a la derecha ya lo habia probado, lo que pasa es que me queda asi:

me llega hasta el fondo del contenedor.

La verdad no se como resolver esto. Me parece que le voy a tener que sacar la sombra nomas.

Gracias por el consejo de la imagen de fondo en el contenido 2.

kemie · #9 (**permalink**) 20/02/2005, 11:19

mirate este tutorial, es exactamente lo que buscas:
http://www.456bereastreet.com/lab/fl...rners_borders/

Wako · #10 (**permalink**) 20/02/2005, 12:17

En mi pagina tengo un tutorial de CCS con bordes redondeados que te puede servir :

www.vensign.com/wakodesign

djjuan · #11 (**permalink**) 01/03/2005, 09:38

Hola, aca estoy nuevamente. Muchas gracias por los links, me sirvieron de mucho, los recomiendo.
Ahora tengo el siguiente problema que no se como resolver:
aca esta el ejemplo

http://www.grillobeltran.com.ar/pruebabartes/

quiero que el titulo "fuente consultada" y "ver" esten centrados en la parte naranja, ahi se ven uno mas arriba y otro mas abajo. Ademas no entiendo por que pasa eso porque el codigo es el mismo, lo unico que cambia es el texto. Transcribo el codigo aca abajo:

Código HTML:

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {margin-left: 0px;	margin-top: 0px; background-color: #EAE9E9; }
div.contenedor {position : absolute; top: 105px; left: 110px; width: 522px; background: url(img/c_sombrader1px.gif) top right repeat-y; background-color: #FEF2E5;}   	
div.cc_fuenteconsultada { margin-top:15px; width: 520px; }
	div.cc_fuenteconsultada h1 {height: 30px; padding-left: 45px; background-color: #EAE9E9;background: url(img/cc_fuenteconsultada.gif) bottom right no-repeat; 
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;	color: #A70505;	font-size: 24px; font-weight: normal; font-variant: small-caps;	letter-spacing: 2px;	}
</style></head>
<body><div class="contenedor">
	<div class="cc_fuenteconsultada"><h1>fuente consultada</h1></div>
	<div class="cc_fuenteconsultada"><h1>ver</h1>
	</div>
</div></body>

Espero que me puedan ayudar nuevamente.
Muchas Gracias.
Saludos, Juan.