Imagen unida

[juandedios]

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.

[metacortex]

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.

[juandedios]

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.

[metacortex]

Aquí está tu ejemplo

Iniciado por juandedios

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

[juandedios]

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 {
    position: absolute;
    background: url(../img/imgPaginacionLeft.jpg) no-repeat;
    width: 140px;
    height: 30px;
}

.PagRight {
    position: absolute;
    background: url(../img/imgPaginacionRight.jpg) no-repeat;
    width: 100px;
    height: 30px;
}

#ContentPag {
    position: relative;
    background: url(../img/imgPaginacionFill.jpg);
    height: 30px;
} 
   

[metacortex]

Juandedios, mira el código fuente del ejemplo. Ahí está resuelto. Otra cosa, usa comillas dobles " " en tu html.

[juandedios]

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á?

[juandedios]

El problema era que no estaba indicando bien las direcciones de las imagenenes del costado, ahora todo quedó ok. Muchas gracias metacortex.