Foros del web, para los que viven de bits

zsamer · 07-dic-2006, 15:02

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-right: 0px;

}



span.izquierda{

margin-left: 0px;

}



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

o

Código PHP:


			
span.derecha{

text-align: right;

}



span.izquierda{

text-align: left;

}



<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

Al Zuwaga · 07-dic-2006, 16:19

probá algo así:

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

span.izquierda{
display: block;
float: left
}

Al Zuwaga · 07-dic-2006, 16:48

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.

zsamer · 07-dic-2006, 16:53

Cita:

Iniciado por Al Zuwaga

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 {

  float: left;

  text-align: left;

  font-weight: bold;

  width: 49%;

  }



p.row span.right {

  float: right;

  text-align: right;

  font-weight: bold;

  width: 49%;

  }



p.home span.left {

  float: left;

  text-align: left;

  font-weight: bold;

  width: 300px;

  Border-bottom: 1px solid #050A1D;

  Color: #ccc;

  Margin: 6px 0px;

  Padding: 0px;

  display:inline;

  }



p.home span.right {

  float: right;

  text-align: right;

  font-weight: bold;

  width: 300px;

  Border-bottom: 1px solid #050A1D;

  Color: #999;

  Margin: 6px 0px;

  Padding: 0px;

  display:inline;

  }

  

</style>



</head>



<body>

<div style="width:600px">

<p class="home"><span class="left">titulo</span> <span class="right">titulo2</span></h3>

<p class="row"><span class="left">Home > Products</span> <span class="right">[logo]</span></p>

<p class="row"><span class="left">Home > Products</span> <span class="right">[logo]</span></p>

<p class="row"><span class="left">Home > Products</span> <span class="right">[logo]</span></p>

</body>

</div>

</html>

zsamer · 07-dic-2006, 17:23

Cita:

Iniciado por Al Zuwaga

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.

fearlex · 08-dic-2006, 09:46

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>

zsamer · 08-dic-2006, 10:05

muy bueno fearlex, excelente.

Muchas gracias y salu2

07-dic-2006, 15:02	#1 (permalink)
zsamer Fecha de Ingreso: noviembre-2003 Mensajes: 781	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-right: 0px; } span.izquierda{ margin-left: 0px; } <p><span class="derecha">Cursos Infantiles</span><span class="izquierda">Cursos Adultos</span></p>` o Código PHP: `span.derecha{ text-align: right; } span.izquierda{ text-align: left; } <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 __________________ Blog Zend Framework: Estado del Arte Bolsa de Ideas Última edición por zsamer; 07-dic-2006 a las 15:55.

07-dic-2006, 16:19	#2 (permalink)
Al Zuwaga Moderador Fecha de Ingreso: noviembre-2002 Ubicación: 34.517 S, 58.500 O Mensajes: 12.334	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 } __________________ ···---···

07-dic-2006, 16:48	#3 (permalink)
Al Zuwaga Moderador Fecha de Ingreso: noviembre-2002 Ubicación: 34.517 S, 58.500 O Mensajes: 12.334	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. __________________ ···---···

07-dic-2006, 16:53	#4 (permalink)
zsamer Fecha de Ingreso: noviembre-2003 Mensajes: 781	Re: alinear 2 texto uno a la derecha y otro a la izquierda dentro de una linea Cita: Iniciado por Al Zuwaga 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 { float: left; text-align: left; font-weight: bold; width: 49%; } p.row span.right { float: right; text-align: right; font-weight: bold; width: 49%; } p.home span.left { float: left; text-align: left; font-weight: bold; width: 300px; Border-bottom: 1px solid #050A1D; Color: #ccc; Margin: 6px 0px; Padding: 0px; display:inline; } p.home span.right { float: right; text-align: right; font-weight: bold; width: 300px; Border-bottom: 1px solid #050A1D; Color: #999; Margin: 6px 0px; Padding: 0px; display:inline; } </style> </head> <body> <div style="width:600px"> <p class="home"><span class="left">titulo</span> <span class="right">titulo2</span></h3> <p class="row"><span class="left">Home > Products</span> <span class="right">[logo]</span></p> <p class="row"><span class="left">Home > Products</span> <span class="right">[logo]</span></p> <p class="row"><span class="left">Home > Products</span> <span class="right">[logo]</span></p> </body> </div> </html> __________________ Blog Zend Framework: Estado del Arte Bolsa de Ideas

07-dic-2006, 17:23	#5 (permalink)
zsamer Fecha de Ingreso: noviembre-2003 Mensajes: 781	Re: alinear 2 texto uno a la derecha y otro a la izquierda dentro de una linea Cita: Iniciado por Al Zuwaga 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. __________________ Blog Zend Framework: Estado del Arte Bolsa de Ideas

08-dic-2006, 09:46	#6 (permalink)
fearlex Fecha de Ingreso: septiembre-2003 Ubicación: Exiliado de mi patria Mensajes: 1.048	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

08-dic-2006, 10:05	#7 (permalink)
zsamer Fecha de Ingreso: noviembre-2003 Mensajes: 781	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 __________________ Blog Zend Framework: Estado del Arte Bolsa de Ideas

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado