Foros del Web » Creando para Internet » CSS »

background color

Estas en el tema de background color en el foro de CSS en Foros del Web. Hola, mi cuestion es la siguiente: Quiero que el background de un <div> tenga dos colores. y poder indicarle que % tenga cada uno. Aca ...
  #1 (permalink)  
Antiguo 19/02/2005, 08:08
 
Fecha de Ingreso: marzo-2002
Mensajes: 10
Antigüedad: 15 años, 8 meses
Puntos: 0
background color

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.
  #2 (permalink)  
Antiguo 19/02/2005, 08:56
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
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,
  #3 (permalink)  
Antiguo 20/02/2005, 06:55
 
Fecha de Ingreso: junio-2004
Mensajes: 76
Antigüedad: 13 años, 5 meses
Puntos: 2
o utilizar una tabla con colores distintos en las celdas
__________________
Final Fantasy XII
  #4 (permalink)  
Antiguo 20/02/2005, 07:14
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
o dos divs :D
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #5 (permalink)  
Antiguo 20/02/2005, 08:45
 
Fecha de Ingreso: marzo-2002
Mensajes: 10
Antigüedad: 15 años, 8 meses
Puntos: 0
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.
  #6 (permalink)  
Antiguo 20/02/2005, 08:54
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
Es necesario que tenga position:absolute? por algo en especial o para centrarlo nada más?
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #7 (permalink)  
Antiguo 20/02/2005, 08:56
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
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
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar

Última edición por thunder.scripts; 20/02/2005 a las 08:58
  #8 (permalink)  
Antiguo 20/02/2005, 10:57
 
Fecha de Ingreso: marzo-2002
Mensajes: 10
Antigüedad: 15 años, 8 meses
Puntos: 0
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.
  #9 (permalink)  
Antiguo 20/02/2005, 11:19
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
mirate este tutorial, es exactamente lo que buscas:
http://www.456bereastreet.com/lab/fl...rners_borders/
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #10 (permalink)  
Antiguo 20/02/2005, 12:17
 
Fecha de Ingreso: enero-2005
Ubicación: Chile
Mensajes: 162
Antigüedad: 12 años, 10 meses
Puntos: 0
En mi pagina tengo un tutorial de CCS con bordes redondeados que te puede servir :

www.vensign.com/wakodesign
  #11 (permalink)  
Antiguo 01/03/2005, 09:38
 
Fecha de Ingreso: marzo-2002
Mensajes: 10
Antigüedad: 15 años, 8 meses
Puntos: 0
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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:08.