Foros del Web » Creando para Internet » CSS »

alinear texto

Estas en el tema de alinear texto en el foro de CSS en Foros del Web. Hola vereis, tengo un problema que parece estúpido pero yo no consigo que funcione. Lo que quiero hacer es esto: | TextoTexto texto texto texto ...
  #1 (permalink)  
Antiguo 19/02/2008, 06:17
 
Fecha de Ingreso: febrero-2008
Mensajes: 6
Antigüedad: 9 años, 9 meses
Puntos: 0
alinear texto

Hola vereis, tengo un problema que parece estúpido pero yo no consigo que funcione. Lo que quiero hacer es esto:

| TextoTexto texto texto texto | Las líneas verticales son el borde del div.
| TextoTexto texto texto texto |
| TextoTexto texto texto texto |
| ----------------------- |
| opcion1 --------- opcion 2 | Estas malditas opciones no consigo ponerlas en su sitio.
| ----------------------- | Las lineas horizontales son espacios en blanco.

Pues vereis, he probado poniendo 2 párrafos, un párrafo dentro de otro, un div dentro de otro, un div dentro de un párrafo, una lista, etiquetas span, y no hay manera.
El mejor resultado lo he conseguido haciendo esto

p.opciones{

display:block;

}

span.opcion2{

margin-left:50%;

}

<p class="opciones"> opcion 1 <span class="opcion 2"> opcion 2 </span> </p>

El problema de esto es que si cambia la resolución de pantalla se deshace el encanto.

Si le das text-align:right al span no va, claro, y con float:right, solo va en opera, en mozilla y explorer hace cosas raras, para variar.

¿Alguien lo ha hecho y le ha funcionado de alguna manera, para cualquier resolución de pantalla?

Última edición por punegas; 19/02/2008 a las 06:21 Razón: lo habia escrito mal
  #2 (permalink)  
Antiguo 20/02/2008, 07:43
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Re: alinear texto

podés hacerlo con 2 párrafos usando "clear" y "float":

Código:
parrafo1 {
    float : left;
    clear : left;
    width : 40%; /* por ejemplo */
}

parrafo2 {
    float : right;
    clear : right;
    width : 40%;
}

Saludos
  #3 (permalink)  
Antiguo 21/02/2008, 09:18
 
Fecha de Ingreso: febrero-2008
Mensajes: 6
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: alinear texto

Hola alvin, muchas gracias por tu respuesta, pero tampoco me ha funcionado. Creo q funcionaria si no hubiera nada debajo de los párrafos. Pero al haber otras capas, pues los párrafos se ponen encima de ellas. He probado haciendo un float:clear a las capas inferiores pero no me va. Bueno, no es algo que afecte a la funcionalidad de la página, pero molesta bastante querer hacer algo y verte incapaz de hacer que salga.
Si a alguien se le ocurre cómo hacerlo, pues bienvenida su respuesta, si no, espero q no os pase porque os rompereis la cabeza.
Nuevamente gracias alvin. Hasta otra!!
  #4 (permalink)  
Antiguo 21/02/2008, 10:13
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: alinear texto

Mano, si fuese posible que hicieses algun dibujo aunque sea en paint para ilustrar mejor lo que deseas conseguir...
En lo personal no me quedo claro cuantas capas deseas crear.
Si solo es la parte de opcion 1 y 2, entonces seria algo asi:

Markup:

Código:
<div id="container">
	<div class="option">
		...contenido...
	</div>
	<div class="option last">
		...contenido...
	</div>
	<div class="clear"><span></span></div>
</div>
CSS:

Código:
#container {
	width: 420px;
	}

#container option {
	float: left;
	margin-right: 20px;
	width: 200px;
	}

#container .last {
	margin-right: 0px;
	}

#container .clear {
	clear: both;
	}
(Aunque aqui habria que tomar en cuenta el bendito bug del Box Model en IE.)
Bueno, en si, hay muchas maneras de hacer algo. Tambien podrias flotar el un div a la izquierda y otro a la derecha, etc.

Tal vez entendi mal lo que deseas conseguir...

Última edición por cleft; 21/02/2008 a las 10:17 Razón: Olvide decir sobre el bendito IE
  #5 (permalink)  
Antiguo 21/02/2008, 14:08
 
Fecha de Ingreso: febrero-2008
Mensajes: 6
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: alinear texto



Primero, muchísimas gracias por el tiempo que os tomais en leer y atender a las peticiones de la gente. Y ahora, las imagenes:

La imagen de arriba corresponde a como lo tengo actualmente, pero quiero que el delete aparezca pegado a la derecha, y si lo hago, al cambiar la resolución, crea otra linea, y la de abajo a lo que pasa cuando hago el float:right.




Lo que se muestra por pantalla es el resultado de una consulta sql a una base de datos, que muestra los resultados para que el usuario pueda modificarlos o borrarlos. Aqui os paso el código:

<div id="consultar">

<!--Aquí se realiza la carga del contenido de la sección que ha seleccionado el usuario-->
<h4>Section content</h4>

Código PHP:
<?php

include("conexion.php");
//Conexion devuelve la variable $link con la base de datos sobre la que trabajar

$resultado mysql_query('select * from home order by fecha_home desc'$link);
                
while( 
$fila mysql_fetch_array($resultado) ){

$contador++;

//Aqui empieza la escritura del div en el que quiero meter el texto alineado.
printf('<div id="elemento">

<h3>%s</h3>
<h6>%s</h6>
<p>%s</p>
<p>Fecha de escritura: %s</p>

//Aqui está el maldito texto que me causa problemas
<p class="actualizarbbdd"><a href="menuModificarRegistro.php?id=%d">Modify this register</a>
<span class="borrar"><a href="borrarRegistro.php?id=%d">Delete this register</a></span></p>
</div>'
,
                            
$fila['titular_home'],$fila['encabezado_home'],$fila['noticia_home'],$fila['fecha_home'],$fila['id_home'],$fila['id_home']);                    
}

if ( 
$contador == ){

echo 
"<p>La tabla está vacía.</p>";
                
}

include(
"desconexion.php");
?>
</div>

El texto con el que tengo problemas es el que está dentro del <div id="elemento">

He probado metiendo el texto en un div nuevo y alinearlo a la derecha, pero no va.

No crei que fuera a dar tantos problemas, asi que si has leido hasta aqui, pues muchas gracias.

Última edición por punegas; 21/02/2008 a las 14:27
  #6 (permalink)  
Antiguo 21/02/2008, 14:51
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: alinear texto

A como entiendo, esta es la parte que te da problemas:

Código:
<p class="actualizarbbdd">
<a href="menuModificarRegistro.php?id=%d">Modify this register</a>
<span class="borrar"><a href="borrarRegistro.php?id=%d">Delete this register</a></span>
</p>
Asi que, prueba lo siguiente:

Código:
p.actualizarbbdd {
background: #EEE; /* Este lo agregue solo para que verifiques que los enlaces se encuentran dentro del p */
height: 30px; /* opcional, el que desees */
width: 100%;
}
Aplicale clases a tus hipervinculos. No creo que necesites mas el <span>

Markup:

Código:
<a href="..." class="modify">Modify this register</a>
<a href="..." class="delete">Delete this register</a>
CSS:
Código:
a.modify {
	display: block; /* Estos block van por si deseas agregar padding, margin, etc */
	width: auto;
	float: left;
	}

a.delete {
	display: block;
	width: auto;
	float: right;
	}
Bueno, tal vez no es el mejor codigo, creo que podrias simplificarlo un poco mas. La idea es que definas clases para ambos <a> y flotes uno a la izquierda y otro a la derecha.
Nos avisas.
  #7 (permalink)  
Antiguo 27/02/2008, 03:42
 
Fecha de Ingreso: febrero-2008
Mensajes: 6
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: alinear texto

Bueno bueno bueno, ha funcionado!!!!

Muchas gracias a todos por molestarse y sobre todo a cleft, porque me has dado la solución. Buenísimo. Muchas gracias de nuevo.
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

SíEste tema le ha gustado a 1 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 22:21.