Foros del Web » Creando para Internet » CSS »

Iquierda-centro-Derecha en la misma linea

Estas en el tema de Iquierda-centro-Derecha en la misma linea en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/10/2007, 12:40
Avatar de PosProdukcion  
Fecha de Ingreso: noviembre-2004
Ubicación: Manzanares el Real (Madrid)
Mensajes: 726
Antigüedad: 13 años
Puntos: 9
Iquierda-centro-Derecha en la misma linea

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
  #2 (permalink)  
Antiguo 20/10/2007, 13:29
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
De acuerdo Re: Iquierda-centro-Derecha en la misma linea

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
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #3 (permalink)  
Antiguo 20/10/2007, 13:49
Avatar de PosProdukcion  
Fecha de Ingreso: noviembre-2004
Ubicación: Manzanares el Real (Madrid)
Mensajes: 726
Antigüedad: 13 años
Puntos: 9
Re: Iquierda-centro-Derecha en la misma linea

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
  #4 (permalink)  
Antiguo 21/10/2007, 10:17
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
De acuerdo Re: Iquierda-centro-Derecha en la misma linea

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
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #5 (permalink)  
Antiguo 23/10/2007, 12:56
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: Iquierda-centro-Derecha en la misma linea

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> 
  #6 (permalink)  
Antiguo 24/10/2007, 02:36
Avatar de PosProdukcion  
Fecha de Ingreso: noviembre-2004
Ubicación: Manzanares el Real (Madrid)
Mensajes: 726
Antigüedad: 13 años
Puntos: 9
Re: Iquierda-centro-Derecha en la misma linea

Perfecto, me quedo con la segunda

Gracias!!
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 08:32.