Texto a la derecha

[nobo]

Hola en la administracion de mi web, tengo un texto a la izquierda que queda asi como en la foto... Y me gustaria que justo al lado, pero con un margen de separacion saliesen otros datos, como por ejemplo la direccion donde se tiene que enviar el pedido, si puso algun comentario en la compra, etc.. etc..

Pero no se como hacerlo... Si seria con CSS, solo alineando el texto a la derecha igual queda un poco cutre, habria que dar algunos pixeles de margen , no ?

Aqui os dejo la foto:

[C2am]

Todo depende que la estructura que tengas.
Publica el código html y css que usas y lo que tienes pensado para ese parrafo (p o div).

No creo que la solución se "alinear el texto a la derecha", aunque supongo que quisiste decir alinear a la derecha el contenedor donde se ubicará el texto, que no es lo mismo.

Podrías aplicar float: right, o left, etc. Mucho más no puedo opinar sin saber que hay alrededor, si tablas, si div flotados etc.

Saludos

[nobo]

jejeje no puse nada porque el texto de al lado esta solo con <p> .. No tiene tabla ni div ni nada de nada ;)

Si quieres lo posteo pero vamos es lo que ves con <p>okdsaok</p> ;)

[cristian_cena]

podes hacerlo con la propiedad float: http://www.librosweb.es/css/capitulo...nto_float.html
con overflow:hidden; al padre lo limpias: http://www.librosweb.es/css_avanzado...ar_floats.html
también podes usar la propiedad text-align más su valor left o right

Para una respuesta más precisa necesito una pregunta más precisa.
Espero te sea de ayuda

Bye

[nobo]

Si.... Mas o menos me sirve... Es lo que decia, que con alinear el texto a la derecha igual servia, no ?

Si no... Creando una capa ?

mmm... Una pregunta mas precisa? Es que no se me ocurre como formularla. Quiero poner en ese recuadro la informacion que puse arriba...

Alineando el texto a la derecha con <div style="text-align:right;"> queda asi:
Es algo como lo que queria, pero... Me gustaria que quedase mas alineado es decir las indicaciones estan una linea mas arriba que el nombre... Me gustaria que quedasen a misma altura...

[cristian_cena]

Iniciado por nobo

... con alinear el texto a la derecha igual servia, no ?

Si no creas el html correcto no lograrás lo que necesitas. Es decir si tienes todo dentro de una misma caja no podrás hacer que una porción de texto esté para un lado y otra porción vaya para otro. Para ello debes tener más cajas sobre las que trabajar, es decir, crear otra capa, como bien dices. Lee esto: http://www.librosweb.es/css/capitulo4.html

Tal vez la forma que te resulte más facil de hacerlo es trabajando con posicion absoluta y ubicando la caja donde quieras con coordenadas. Para lo cual siempre es bueno que la anides dentro de un contenedor relativo para hacerla depender de el. [+info]

Por ejemplo:

Código HTML:

<div id="contenedor">
<div id="absoluto"> ... texto de la derecha ... </div>
</div>
 

Código CSS:

#contenedor{
position:relative;
}
#absoluto{
position:absolute;
top: ...px; /*distancia respecto del borde superior*/
right: ...px; /*distancia respecto del borde derecho*/
/*también podes usar: left y bottom*/
}
 

Saludos.

pd: Probá con esto y si no te sale posteá el código y lo vemos. Así sobre la nada no sirve, hay que trabajar sobre el código del problema.

[nobo]

OK! Que diferencia hay entre poner "." o "#" ? En el CSS ???

Habia probado esto:

Codigo CSS:

.paginacion {
padding: .5em;
border: 1px solid #CCC;
background-color: #E0E0E0;
}

.derecha {
float: right;
}

.izquierda {
float: left;
}

div.clear {
clear: both;
}


Codigo HTML:

<h1>Consultar Compra</h1>
<div class="paginacion">
<span class="derecha">Indicaciones: <?php echo $row_Datoscompra['strIndicaciones']; ?></span>
<span class="izquierda"><p>Nombre:<?php echo ObtenerNombreUsuario($row_Datoscompra['idUsuario']); ?><br />
Fecha:<?php echo $row_Datoscompra['fchcompra']; ?><br />
Forma Pago:<?php echo TextoTipoPago($row_Datoscompra['intTipoPago']); ?><br />
Total: <?php echo $row_Datoscompra['dbTotal']; ?>
<p>Estado Actual de la Compra: <?php echo TextoEstadoCompra($row_Datoscompra['intEstado']); ?><br />
<a href="compra_cancelar.php?recordID=<?php echo $row_Datoscompra['idCompra']; ?>&usuario=<?php echo $row_Datoscompra['idUsuario']; ?>">Cancelar Compra</a><br />
<a href="compra_aceptar.php?recordID=<?php echo $row_Datoscompra['idCompra']; ?>&usuario=<?php echo $row_Datoscompra['idUsuario']; ?>">Compra Confirmada</a></span>
<div class="clear"></div>

El problema de esto.... Que se me ve todo del color de fondo:
Todo el cuadro ese tendria que ir de blanco...


EDITO:

He probado esto que me pasaste asi:

CSS:

#contenedor{
position:relative;
}
#absoluto{
position:absolute;
top:10px; /*distancia respecto del borde superior*/
right:10px; /*distancia respecto del borde derecho*/

}

HTML:

<div id="contenedor">
<div id="absoluto"> Indicaciones: <?php echo $row_Datoscompra['strIndicaciones']; ?> <br />
Direccion:
</div>
</div>
Resultado:



Parece que perfecto... Pero me gustaria saber pues que diferencias hay entre poner el #contenedor y .contenedor. Poner div id o div class. El valor absoluto, o desde donde toma el margen top. Desde la capa container que tengo creada en el css ?

Otra cosa... Que pasaria si Indicaciones: fuese mucho mas largo de lo que es ? Saldrian las letras debajo de indicaciones... O indicaciones iria alineandose a la izquierda ?

De momento me gusta mucho como queda y que la solucion es bastante facil aunque me gustaria entenderla 100%.... Y eso me gustaria saber si puede originar algun error cuando indicaciones sea mas largo...

De todas formas, muchas gracias !!!

[C2am]

# es para aplicar estilos a un elemento en particular con igual id

div id="contenedor" - #contenedor{ width: muyancho;}

Como (en teoría y así debería ser siempre) un id NUNCA debe repetirse le estarías asignando estilo a un único elemento.

En cambio con class (.contenedor) puedes asignar este estilo a cuantos elementos quieras.

ver Selectores


La position;absoluta toma como origen de coordenas el vértice superior izquierdo del contenedor que tenga definida la propiedad position:(relative, absolute o fixed), en caso de no encontrar ningún padre posicionado se ubica con respecto a la pantalla.
Ver Posicionamiento absoluto


En cuanto al largo de indicaciones, pues no tienes más que probar a ver que resulta. No tengas miedo de romper, luego puedes volver al original :)

Bueno si quieres entender: www.librosweb.es, elige el que quieras.

Saludos

[cristian_cena]

Iniciado por nobo

me gustaria saber pues que diferencias hay entre poner el #contenedor y .contenedor

En este caso ninguna. Nada más ten encuenta que las #id deben darse a elementos únicos, y que las .clases se utilizan sobre un grupo de elementos a los que le darás los mismos estilos. [+info]

Iniciado por nobo

Que pasaria si Indicaciones: fuese mucho mas largo de lo que es ?

Dependería del estado de overflow que tenga asignado.
Acá lo que debes hacer es alinear sobre la derecha el texto: dando a esa capa text-align:right;
para evitar problemas cuando crezca debés controlar el width de esa capa.
Por tanto, dale un width: ... px; igual a "lo que necesites". Lo que va a ocurrir es que va a crecer hasta que llegue al ancho correspondiente y cuando no quepa bajará a la línea siguiente.

Saludos.

[nobo]

Asi??

#contenedor{
position:relative;
}
#absoluto{
text-align:right;
position:absolute;
/*top:10px; distancia respecto del borde superior*/
right:10px; /*distancia respecto del borde derecho*/
width:250px;

}

La verdad que muchas gracias, porque mas que solventar el problema, me ayudasteis a comprender mejor CSS :D

EDITO: Le he puesto mas o menos 250px porque la capa donde esta metida, que es content ocupa 780px. Asi que mas o menos... Iba a poner 390px; pero igual era demasiado largo, no? Y se acababa juntando con la otra... Igual 250 o alrededor de 300px...

EDITO2: He dejado el top comentado para que no haya separacion con la otra capa. Asi queda visualmente alineado con el nombre. Puede estar asi tambien, no? ;)

[cristian_cena]

Si, esta bien, solo que puedes reemplazar la línea
/*top:10px; distancia respecto del borde superior*/
por:
top:0;
Tendrás el mismo resultado pero quedará más bonito

[nobo]

jajaja OK! :D