Foros del Web » Creando para Internet » CSS »

alinear 2 texto uno a la derecha y otro a la izquierda dentro de una linea

Estas en el tema de alinear 2 texto uno a la derecha y otro a la izquierda dentro de una linea en el foro de CSS en Foros del Web. hola necesito alinear horizontalmente un texto a la derecha para esto tengo dos opciones: text-align:right o bien margin-right: 0px el problema es que no me ...
  #1 (permalink)  
Antiguo 07/12/2006, 16:02
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
alinear 2 texto uno a la derecha y otro a la izquierda dentro de una linea

hola

necesito alinear horizontalmente un texto a la derecha para esto tengo dos opciones:
text-align:right
o bien
margin-right: 0px

el problema es que no me lo acepta el span.

la idea es que dento de un elemento p tenga dos texto uno alineado a la derecha y otro a la izquierda.

algo asi:

Código PHP:
span.derecha{
margin-right0px;
}

span.izquierda{
margin-left0px;
}

<
p><span class="derecha">Cursos Infantiles</span><span class="izquierda">Cursos Adultos</span></p
o

Código PHP:
span.derecha{
text-alignright;
}

span.izquierda{
text-alignleft;
}

<
p><span class="derecha">Cursos Infantiles</span><span class="izquierda">Cursos Adultos</span></p
es posible? como lo puedo lograr?
tengo entendido que el text-align es solo para elementos de bloques, entonces
de que otra forma puedo lograr esto con CSS.

Gracias y salu2

Última edición por zsamer; 07/12/2006 a las 16:55
  #2 (permalink)  
Antiguo 07/12/2006, 17:19
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: alinear 2 texto uno a la derecha y otro a la izquierda dentro de una linea

probá algo así:

span.derecha{
display: block;
float: right
}

span.izquierda{
display: block;
float: left
}
__________________
...___...
  #3 (permalink)  
Antiguo 07/12/2006, 17:48
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: alinear 2 texto uno a la derecha y otro a la izquierda dentro de una linea

Ahora... me entra una duda... ¿es para colocar 2 enlaces? Porque si es así, podrías usar un <ul> en vez de un <p> con dos <span> para esto.
__________________
...___...
  #4 (permalink)  
Antiguo 07/12/2006, 17:53
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Re: alinear 2 texto uno a la derecha y otro a la izquierda dentro de una linea

Cita:
Iniciado por Al Zuwaga Ver Mensaje
probá algo así:

span.derecha{
display: block;
float: right
}

span.izquierda{
display: block;
float: left
}
gracias funciona muy bien.

tambien se me ocurrió hacer lo siguiente y también funciona de maravilla:

Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>footerStick Footer sticks to bottom of page</title>

<
style type="text/css">
p.row span.left {
  
floatleft;
  
text-alignleft;
  
font-weightbold;
  
width49%;
  }

p.row span.right {
  
floatright;
  
text-alignright;
  
font-weightbold;
  
width49%;
  }

p.home span.left {
  
floatleft;
  
text-alignleft;
  
font-weightbold;
  
width300px;
  
Border-bottom1px solid #050A1D;
  
Color#ccc;
  
Margin6px 0px;
  
Padding0px;
  
display:inline;
  }

p.home span.right {
  
floatright;
  
text-alignright;
  
font-weightbold;
  
width300px;
  
Border-bottom1px solid #050A1D;
  
Color#999;
  
Margin6px 0px;
  
Padding0px;
  
display:inline;
  }
  
</
style>

</
head>

<
body>
<
div style="width:600px">
<
class="home"><span class="left">titulo</span> <span class="right">titulo2</span></h3>
<
class="row"><span class="left">Home Products</span> <span class="right">[logo]</span></p>
<
class="row"><span class="left">Home Products</span> <span class="right">[logo]</span></p>
<
class="row"><span class="left">Home Products</span> <span class="right">[logo]</span></p>
</
body>
</
div>
</
html
  #5 (permalink)  
Antiguo 07/12/2006, 18:23
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Re: alinear 2 texto uno a la derecha y otro a la izquierda dentro de una linea

Cita:
Iniciado por Al Zuwaga Ver Mensaje
Ahora... me entra una duda... ¿es para colocar 2 enlaces? Porque si es así, podrías usar un <ul> en vez de un <p> con dos <span> para esto.
hola Zuwaga, efectivamente van ha ser enlaces como sería con <ul>, me podrías ayudar con el código?

muchas gracias

salu2.
  #6 (permalink)  
Antiguo 08/12/2006, 10:46
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Re: alinear 2 texto uno a la derecha y otro a la izquierda dentro de una linea

Aqui tienes, le hice unas cuantas modificaciones al codigo, cosas innecesarias, y como consejo te digo que es mejor usar propiedades iguales a un solo elemento comun, para los titulos siempre usa <h#>, cheka cuanto codigo me ahorre y consegui lo mismo que tu.

Saludos y espero te sirva

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>footerStick - Footer sticks to bottom of page</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#container{
width:600px;
}
h4{
width: 300px;
margin: 6px 0px;
border-bottom: 1px solid #050A1D;
}
h4.left {
float: left;
color: #ccc;
}
h4.right {
float: left;
text-align: right;
color: #999;
}
li{
font-weight: bold;
width: 49%;
list-style-type: none;
}
li.left {
float: left;
}
li.right {
float: right;
text-align: right;
}
</style>
</head>
<body>
<div id="container">
<h4 class="left">titulo1</h4>
<h4 class="right">titulo2</h4>
<ul class="row">
<li class="left">Home > Products
<li class="right">[logo]
<li class="left">Home > Products
<li class="right">[logo]
<li class="left">Home > Products
<li class="right">[logo]
</ul>
</div>
</body>
</html>
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #7 (permalink)  
Antiguo 08/12/2006, 11:05
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Re: alinear 2 texto uno a la derecha y otro a la izquierda dentro de una linea

muy bueno fearlex, excelente.

Muchas gracias y salu2
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 16:59.