Foros del Web » Creando para Internet » CSS »

Imagen unida

Estas en el tema de Imagen unida en el foro de CSS en Foros del Web. Saludos: Tengo una imagen dividida en tres Espero explicarme bien. Esto será para los numeritos de una paginación. la paginación está para un máximo de ...
  #1 (permalink)  
Antiguo 30/01/2008, 08:05
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 931
Antigüedad: 14 años, 7 meses
Puntos: 8
Imagen unida

Saludos:

Tengo una imagen dividida en tres



Espero explicarme bien. Esto será para los numeritos de una paginación. la paginación está para un máximo de 10 numeros, pero en caso de no tener 10 paginas, quiero que la imagen del medio aumente o disminuya de acuerdo a la cantidad de paginas que me devuelva el resultado.

Espero que me haya echo entender.
__________________
El aprendiz.
  #2 (permalink)  
Antiguo 30/01/2008, 08:56
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.021
Antigüedad: 13 años, 6 meses
Puntos: 832
Re: Imagen unida

En la imagen del medio coloca un fondo de 1px de ancho y le das repeat-x. Te lo repetirá horizontalmente sin problemas. La misma imagen del medio que pusiste te puede servir. Sólo recórtala a 1px conservando lo de arriba y abajo.

Siendo más específico. Crea un div contenedor con el background de 1px que te expliqué. Dale también posición relativa. Luego créate 2 span con ancho y alto definido. A esos dos los vas a posicionar absolutos, uno a la izquierda y otro a la derecha. Eso te dará tu recuadro elástico.
  #3 (permalink)  
Antiguo 30/01/2008, 09:19
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 931
Antigüedad: 14 años, 7 meses
Puntos: 8
Re: Imagen unida

Esto debe estar centrado dentro de un div que contiene las dimensiones de la página y alineado a la parte inferior de la página. Si pongo esos dos span en absoluto no abrá problemas con que me quede al medio?.

Si fuera posible, me pondrias un ejemplo.
__________________
El aprendiz.
  #4 (permalink)  
Antiguo 30/01/2008, 12:16
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.021
Antigüedad: 13 años, 6 meses
Puntos: 832
Re: Imagen unida

Aquí está tu ejemplo

Cita:
Iniciado por juandedios Ver Mensaje
Esto debe estar centrado dentro de un div que contiene las dimensiones de la página y alineado a la parte inferior de la página. Si pongo esos dos span en absoluto no abrá problemas con que me quede al medio?.
Eso lo sabrías si lo hubieses puesto en práctica primero
  #5 (permalink)  
Antiguo 31/01/2008, 14:11
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 931
Antigüedad: 14 años, 7 meses
Puntos: 8
Re: Imagen unida

lo que eh hecho esta asi:
Código PHP:
<div style = "height: 30px">        
<div id = 'ContentPag'>
<span class = 'PagLeft'></span>
<?php echo $anc?>
<span class = 'PagRight'></span>
</div>
</div>
Se ve bien, pero el del lado izquiero me aparece centrado en vez de salirme a la izquierda.
Aquí esta la parte del CSS
Código PHP:
.PagLeft {
    
positionabsolute;
    
backgroundurl(../img/imgPaginacionLeft.jpgno-repeat;
    
width140px;
    
height30px;
}

.
PagRight {
    
positionabsolute;
    
backgroundurl(../img/imgPaginacionRight.jpgno-repeat;
    
width100px;
    
height30px;
}

#ContentPag {
    
positionrelative;
    
backgroundurl(../img/imgPaginacionFill.jpg);
    
height30px;

__________________
El aprendiz.
  #6 (permalink)  
Antiguo 31/01/2008, 18:44
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.021
Antigüedad: 13 años, 6 meses
Puntos: 832
Re: Imagen unida

Juandedios, mira el código fuente del ejemplo. Ahí está resuelto. Otra cosa, usa comillas dobles " " en tu html.
  #7 (permalink)  
Antiguo 01/02/2008, 08:30
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 931
Antigüedad: 14 años, 7 meses
Puntos: 8
Re: Imagen unida

Disculpa, no me había dado cuenta del enlace, lo revise, lo hice tal cual, pero la imagen que se repite sale encima de los lados, a que se deberá?
__________________
El aprendiz.
  #8 (permalink)  
Antiguo 01/02/2008, 14:08
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 931
Antigüedad: 14 años, 7 meses
Puntos: 8
Re: Imagen unida

El problema era que no estaba indicando bien las direcciones de las imagenenes del costado, ahora todo quedó ok. Muchas gracias metacortex.
__________________
El aprendiz.
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 02:17.