Foros del Web » Creando para Internet » CSS »

imagen dividida

Estas en el tema de imagen dividida en el foro de CSS en Foros del Web. hola a todos quisiera saber como puedo dividir una imagen para la cual mostrarla como background pense realizar lo siguiente: #header1 { background: url(images/bgheader1.jpg) no-repeat; ...
  #1 (permalink)  
Antiguo 29/07/2009, 15:59
Avatar de konoyek  
Fecha de Ingreso: julio-2007
Mensajes: 268
Antigüedad: 10 años, 5 meses
Puntos: 0
De acuerdo imagen dividida

hola a todos quisiera saber como puedo dividir una imagen para la cual mostrarla como background

pense realizar lo siguiente:

#header1 {
background: url(images/bgheader1.jpg) no-repeat;
padding:0px 0px 0px 0px;
height:162px;
margin:0px 0px 0px 80px;}
#header2 { background: url(images/bgheader2.jpg);
padding:0px 0px 0px 0px;
height:162px;
margin:0px 0px 0px 80px;

}
#header3 { background: url(images/bgheader3.jpg);
padding:0px 0px 0px 0px;
height:162px;
margin:0px 0px 0px 80px;

}




<div id="header2">
</div>


<div id="header3">

</div>

el problema es que las imagenes no me quedan de forma seguida sino una debajo de la otra me gustaria como podria solucionar este inconveniente sin necesidad de utilizar tablas
  #2 (permalink)  
Antiguo 29/07/2009, 16:13
Avatar de pyroCL  
Fecha de Ingreso: marzo-2009
Ubicación: C#
Mensajes: 261
Antigüedad: 8 años, 9 meses
Puntos: 2
Respuesta: imagen dividida

en
header 2 pone float:left
y en header 3 float:right
asi te queda una al lado de la otra

y podría tambien hacer un div que contenga los header...

Saludos
__________________
La verdadera sabiduría está en reconocer la propia ignorancia.
  #3 (permalink)  
Antiguo 29/07/2009, 18:25
Avatar de konoyek  
Fecha de Ingreso: julio-2007
Mensajes: 268
Antigüedad: 10 años, 5 meses
Puntos: 0
Respuesta: imagen dividida

mira las imagenes las tengo de la siguiente manera:


Código HTML:
#header1 { 
background: url(images/bgheader1.jpg) no-repeat;
padding:0px 0px 0px 0px;
height:162px;
margin:0px 0px 0px 0px;
float:left;}

#header2 { background: url(images/bgheader2.jpg) no-repeat;
padding:0px 0px 0px 0px;
height:162px;
margin:0px 0px 0px 70px;
float:none;

 }
#header3 { background: url(images/bgheader3.jpg); 
padding:0px 0px 0px 0px;
height:162px;
margin:0px 0px 0px 580px;


 }


<div id="header1">

</div>


<div id="header2">
</div>


<div id="header3">

</div>




el problema es en l tercera imagen ya que cuando le coloco float desaparece, y si no le dejo nada sigue aun debajo de las 2 imagenes
  #4 (permalink)  
Antiguo 30/07/2009, 07:19
Avatar de pyroCL  
Fecha de Ingreso: marzo-2009
Ubicación: C#
Mensajes: 261
Antigüedad: 8 años, 9 meses
Puntos: 2
Respuesta: imagen dividida

Mira lo que podrias hacer es un div que contenga las tres imagenes.
Pensemos que cada imagen tiene un ancho de 100px y un alto de 162 px

Código HTML:
#contenedor    
{           
width:300px;
height:162px;
text-align:center;
}


#header1 { 
background: url(images/bgheader1.jpg) no-repeat;
padding:0px 0px 0px 0px;
height:162px;
width:100px;
margin:0px 0px 0px 0px;
float:left;}

#header2 { background: url(images/bgheader2.jpg) no-repeat;
padding:0px 0px 0px 0px;
height:162px;
width:100px;
margin:0px 0px 0px 70px;
float:right;

 }
#header3 { background: url(images/bgheader3.jpg); 
padding:0px 0px 0px 0px;
height:162px;
width:100px;
margin:0px 0px 0px 580px;
float:right;

 }

<div id="contenedor">

   <div id="header1">

   </div>


   <div id="header2">
   </div>


   <div id="header3">

   </div>

</div> 


Prueba eso. Espero te sirva.

Saludos!
__________________
La verdadera sabiduría está en reconocer la propia ignorancia.
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 18:57.