Iquierda-centro-Derecha en la misma linea

PosProdukcion · #1 (**permalink**) 20/10/2007, 11:40

Hola, en breve lo que quiero es tener 3 span o div en la misma linea, uno a la izquierda, otro centrado y otro a la derecha, el de la izquierda o derecha podria no existir asi que debe ser fluido

Más en detalle, estoy intentando hacer el pie de una tabla de datos paginada, quisiera poner a la izquierda "<<Anterior", a la derecha "siguiente>>" y en el centro "Pagina X de N". De momento he hecho todos con span

De momento he hecho q el contenedor (es una celda del grid) tenga text-align: center, y luego el texto "<<Anterior" tiene float:left y el "siguiente>>" float:right, pero aunque al texto del centro le ponga display: inline, me desplaza el texto flotado a la derecha abajo, como si el bloque del centro ocupara toda la linea, aqui pongo una foto para aclararlo:

Como veis, el texto "siguiente>>" se va para abajo y deberia estar en la misma linea

Ayuda por

favor

Carxl · #2 (**permalink**) 20/10/2007, 12:29

Hola PosProdukcion, còmo vas?'

Mira, mas que ayudarte, es solo una cosa:

Se supone que estás presentando datos, y para eso se hicieron las tablas, el hacer la presentaciòn de dicha necesidad con estilos, pues los estarías utilizando innecesariamente

Sólo eso...

En cuanto a lo que necesitas, pues es darle a los tres div's o span's, el atributo float:"left". Con eso siempre estaràn uno al lado del otro.

Saludos

PosProdukcion · #3 (**permalink**) 20/10/2007, 12:49

Claro, si es todo una tabla, pero justo esa fila creo que tiene que ser posicionada con CSS, pq la otra opcion q tengo en esa fila seria hacer COLSPAN:

Supongamos que tiene 6 celdas, pues haria 3 celdas con COLSPAN 2, en la primera pondria <<Anterior, en la segunda celda Pagina X de Y y en la tercera Siguiente>>, pero como el ancho de las celdas depende de su contenido (o del contenido mas largo q haya en la columna), pues el posicionamiento de Pagina X de Y no seria centrado realmente.

La otra solucion q me das no me vale, si hago a todas float: left quedariian todas a la izquierda, una a continuacion de la otra, y ademas, en la primera pagina q no existe <<Anterior el texto Pagina X de Y quedaria a la izquierda y no centrado

Gracias de todas formas

Carxl · #4 (**permalink**) 21/10/2007, 09:17

Hola de nuevo PosProdukcion... cómo vas??

Pues de todas formas, sigo insistiendo

que la mejor opción es presentar esa parte en tablas... jeje.

Tú mismo lo dices!! colocas colspan en las columnas que necesitas... si eso es variable (el colspan), osea si no se sabe cuando colocar colspan y cuando no... pues ahí necesitas la ayuda de un lenguaje de programación, php, asp, para tomar la decisión.

Lo otro que veo, es que puedes hacer un <div> contenedor, y dentro de ese div, hacer tres <span>, aplicándoles las características que necesitas.

Cualquier cosa... me dices

Saludos

kahlito · #5 (**permalink**) 23/10/2007, 11:56

Hola, aquí dejo dos posibles maneras para hacer algo así:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo de paginado</title>
<style type="text/css">
#paginado{
width:770px;
background-color:#ccc;
float:left;}
.paginado-anterior{
display:inline;
text-align:left;
float:left;}
.paginado-centro{
display:inline;
text-align:center;
float:left;
margin-left:90%;
}
.paginado-siguiente{
display:inline;
text-align:right;
float:right;}
#paginado2{
width:770px;
background-color:#fc0;
float:left;}
.centros{
width:33%;
text-align:center;
display:inline;
float:left;}
</style>
</head>

<body>
<div id="paginado">
<p class="paginado-anterior">anterior</p>
<p class="paginado-centro">página</p>
<p class="paginado-siguiente">siguiente</p>
</div>
<div id="paginado2">
<div class="centros"><p>anterior</p></div>
<div class="centros"><p>pagina</p></div>
<div class="centros"><p>siguiente</p></div>
</div>
</body>
</html>

PosProdukcion · #6 (**permalink**) 24/10/2007, 01:36

Perfecto, me quedo con la segunda

Gracias!!