Foros del Web » Creando para Internet » CSS »

3 divs. ¿uno para cada background?

Estas en el tema de 3 divs. ¿uno para cada background? en el foro de CSS en Foros del Web. Buenas Intento hacer un simple rectángulo con esquinas redondeadas y un fondo y bueno, me pregunto como se hará en css. Yo en html lo ...
  #1 (permalink)  
Antiguo 27/11/2008, 12:29
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
De acuerdo 3 divs. ¿uno para cada background?

Buenas

Intento hacer un simple rectángulo con esquinas redondeadas y un fondo y bueno, me pregunto como se hará en css.
Yo en html lo hubiera hecho con una tabla y 3 columnas. Un background por cada columna.

En css unicamente puede haber un background por cada div, ¿no?

¿Si es así, tendría que anidar 3 divs así a lo tonto modorro ?

Dejo aquí el ejemplo de lo que he hecho, no se si estará bien, espero que me digáis al menos si no va mal encaminado:

Ver ejemplo

Gracias.
  #2 (permalink)  
Antiguo 27/11/2008, 13:03
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Respuesta: 3 divs. ¿uno para cada background?

Hola IMAC/

Aquí tienes varios enlaces sobre esquinas redondeadas:

http://juglar103.iespana.es/wordpress/

Saludos,
  #3 (permalink)  
Antiguo 27/11/2008, 13:10
Avatar de hCanté
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Guatemala
Mensajes: 233
Antigüedad: 10 años, 9 meses
Puntos: 9
De acuerdo Respuesta: 3 divs. ¿uno para cada background?

Hola!

Un ejemplo con CSS, tu div con esquinas redondeadas digamos que será round-corner:

Código HTML:
 <div id="round-corner"> Texto de ejemplo </div> 
Y el css quedaría algo así:

Código HTML:
 div#round-corner { width:400px; height:300px; -moz-border-radius:8px; -webkit-border-radius:8px; background:#CCC }
El -moz-border-radius solo lo interpreta Firefox y el -webkit... es para Safari, no se va a ver en IE en un futuro cercano pero esas son de las cosas con las que hay que aprender a vivir...

Saludos!

Update: con el enlace que te dió JavierB ya tienes para entretenerte un rato :)
  #4 (permalink)  
Antiguo 27/11/2008, 13:41
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Respuesta: 3 divs. ¿uno para cada background?

Si el contenedor en cuestion puede crecer a lo ancho o a lo alto puedes hacerlo solo con dos elementos.
De todos modos no necesariamente tienen que ser 3 divs.
Por ejemplo si lo que quieres hacer es un bloque con un titulo y un texto, puedes lograr el efecto con el siguiente HTML

<div>
<h1></h1>
<p></p>
</div>

Y, si por ejemplo solo va a crecer para abajo, por CSS le pones la imagen que forma el borde de arriba como fondo del H1, el border de abajo al P y el que se repite a lo largo al DIV.
Recuerda que todos los elementos HTMLS son modificables por CSS no solo los divs.
No se si me explico bien. Saludos, FS
__________________
oohh... quisiera ser godines!!!
  #5 (permalink)  
Antiguo 27/11/2008, 13:48
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
Respuesta: 3 divs. ¿uno para cada background?

Gracias por la información aunque, por lo que he visto, tampoco lo hice tan mal ¿no?

Por lo visto no hay modo de ahorrarse al menos 3 estilos, uno para cada imagen de fondo, a no ser que hagas algo un poco raro y enrevesado.
  #6 (permalink)  
Antiguo 27/11/2008, 17:10
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: 3 divs. ¿uno para cada background?

Cita:
Iniciado por safe Ver Mensaje
Si el contenedor en cuestion puede crecer a lo ancho o a lo alto puedes hacerlo solo con dos elementos.
E incluso una sola imagen con esos dos elementos.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 28/11/2008, 04:06
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
Respuesta: 3 divs. ¿uno para cada background?

Cita:
Iniciado por Mikmoro Ver Mensaje
E incluso una sola imagen con esos dos elementos.
¿A qué te refieres?

Por ahora lo he hecho más o menos como me ha indicado safe:

Código HTML:
<style>
.headerNews1, .headerNews1 h1{
	width: 100%;
	height: 56px;
}

.headerNews1{
	background: url("../imgs/headerNewsL.gif") no-repeat left;
}

.headerNews1 h1{
	background: url("../imgs/headerNewsR.gif") no-repeat right;
}


.headerNews{
	background: url("../imgs/bgHeaderNews.gif") repeat-x;
}
</style>

<div class="headerNews">
	<div class="headerNews1">
		<h1>
		</h1>
	</div>
</div> 
  #8 (permalink)  
Antiguo 28/11/2008, 05:57
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: 3 divs. ¿uno para cada background?

Según lo que vayas a hacer, puedes hacerlo con una sola imagen:

http://www.araudi.net/forosdelweb/cajaroja.html

Aquí otro ejemplo de una sola imagen que puede crecer en las 2 dimensiones
__________________
Visita mi nueva web idplus.org
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 15:03.