formato para un echo

Arraymoon · #1 (**permalink**) 09/02/2012, 06:16

Buenas.
Estoy empezando con CSS y necesito hacer unas tareas. El caso es que no consigo que funcione el siguiente código:

foreach($personas as $persona)
{
if ($persona['sexo'] == "mujer" )
$persona['nombre'] = "DOÑA " .$persona['nombre'];
else
$persona['nombre'] = "DON " .$persona['nombre'];

echo '<span style="font-size:16px;background-color:#8B0000;color:#FFE4B5"> ||'.$persona['sexo'].
'<span style="font-size:16px;background-color:#8B0000;color:#FFE4B5"> ||'.$persona['nombre'].
'<span style="font-size:16px;background-color:#8B0000;color:#FFE4B5;position:absolute;left :230"> ||'.$persona['apellidos'].
'</span><br/>';
}

Necesito darle formato al ECHO, concretamente mostrar en una columna la variable .$persona[sexo], al lado otra columna con .$persona[nombre] y por ultimo otra con .$persona[apellidos]
Estaba intendando hacerlo sin crear tabla, poniendo simplemente márgenes. El caso es que no consigo que la columna DON XXX o DOÑA XXX salga recta. He probado a poner otro Position:absolute/relative para esa columna, pero me salía todo descuadrado.
Con el código actual me queda así:
http://desmond.imageshack.us/Himg808/scaled.php?server=808&filename=pantallazoen.png&re s=medium

Algún consejo para centrar la columna Nombre? Gracias

C2am · #2 (**permalink**) 09/02/2012, 10:59

Hola
Me parece que deberías usar una tabla, ya que es para esto que se han creado las tablas, es decir datos tabulados.

Saludos

Arraymoon · #3 (**permalink**) 09/02/2012, 11:46

mm, pero puedo combinar una tabla con span o divs?Lo de la tabla ya lo había pensado para sacar las 3 variables por columnas, pero al tener que hacerlo obligatoriamente con DIV o SPAN pues estoy aquí bloqueado... :(
Me podrías poner un ejemplo de tabla y div para ver como sería? Los tutoriales que he mirado (que no son pocos) trabajan con un archivo externo .css en el que guardan los estilos . Yo necesito hacerlo sin archivo externo, pero estoy pez en CSS
Lo unico que quiero es que salga así:
$persona[sexo] || $persona[nombre] || $persona[apellidos]
-------- --------- ----------
-------- --------- ----------

C2am · #4 (**permalink**) 09/02/2012, 12:25

Bien, entonces habrá que simular una tabla con div o span.
Una alternativa, sin usar display: table etc.

Código HTML:

Ver original<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin título</title>
<style>
#tabla{
    width:600px;
    border:1px solid #666;
    font-size:16px;
    color:#FFE4B5;
    background:#CCC;
    }
#fila{
    height:30px;
    width:100%;
    clear:left;
    border:1px solid #0C9;
    }   
#sexo, #nombre, #apellido
    {
    background-color:#8B0000;
    margin:1px;
    padding:2px;
    }
#sexo{
    float:left;
    width: 80px;
    }
#nombre{
    width: 250px;
    float:left;
    }   
 
#apellido{
    float:left;
    width: 250px;
        }   
 
</style>
 
</head>
 
<body>
 
<div id="tabla">
 
<p id="fila">
<span id="sexo">Hombre </span>
<span id="nombre">Marcelo José</span>
<span id="apellido"> Arraymonn Juarez</span>
</p>
 
<p id="fila">
<span id="sexo">Mujer </span>
<span id="nombre">Marcelo José</span>
<span id="apellido"> Arraymonn Juarezasasasasa</span>
</p>
<p id="fila">
<span id="sexo">Hombre </span>
<span id="nombre">Marcelo José Antonio</span>
<span id="apellido"> Arraymonn </span>
</p>
 
<p id="fila">
<span id="sexo">Hombre </span>
<span id="nombre">Marcelo José</span>
<span id="apellido"> Arraymonn Juarez</span>
</p>
 
<p id="fila">
<span id="sexo">Mujer </span>
<span id="nombre">Marcelo José</span>
<span id="apellido"> Arraymonn Juarezasasasasa</span>
</p>
<p id="fila">
<span id="sexo">Hombre </span>
<span id="nombre">Marcelo José Antonio</span>
<span id="apellido"> Arraymonn </span>
</p>
 
</div>
</body>
</html>

Investiga sobre display:table

Los estilos que están en un archivo externo .css o que están es el encabezado (ejemplo que te dí) también pueden ir en estilos en linea dentro de cada etiqueta, solo debes poner los que corresponden a cada elemento en particular.
Es necesario aclarar que esto de poner <etiqueta style "blabla" no es aconsejable, porque rompe con el esquema de separación de diseño-contenido. Además estás usando php, lo cual añade mas enredo a toda la situación. Cuando tengas que cambiar algo será un dolor de cabeza.

Manuales css puedes encontrar en www.librosweb.es

Si te están enseñando así, pues la verdad no es la mejor manera de aprender. Si en cambio solo se trata de un ejercicio para aplicar los conocimientos y ver de las posibilidades del css, pues bien.

Saludos

Arraymoon · #5 (**permalink**) 09/02/2012, 13:48

Muchisimas gracias por tu ayuda C2am. Probaré eso que me has puesto y te digo en cuanto tenga algo, pero vamos que con eso, aunque no esté perfecto, me apaño seguro XD
Con respecto al tema de aprendizaje, no es que me estén enseñando así, es simplemente que estoy haciendo las practicas del Ciclo superior de Inform. el de programación y entonces pues estoy viendo por encima algo de todo. El problema es que en el ciclo no dimos NADA de programación web, y estoy pez en este asunto. Afortunadamente de C controlo algo asique php no me resulta tan complicado, pero la parte de diseño ya... es otra historia :) Hasta ahora he visto bastante de HTML para hacer cosas básicas y bastante de php, y ahora toca algo por encima el diseño y aquí me estoy chocando contra todo XDD

emprear · #6 (**permalink**) 09/02/2012, 17:12

Si vas a terminar usando una tabla, dale formato a las celdas, no necesitas de los span o elementos auxiliares

Saludos

Arraymoon · #7 (**permalink**) 10/02/2012, 05:36

Muchas gracias a ambos. Al final lo conseguí hacer de las dos formas, creando estilos en cabecera etc, y de manera simple con unos divs básicos. Aquí os dejo como me quedó con los divs

Hasta la próxima

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ArraysAsoc y Divs</title>
</head>

<body>
<?php
// Declaro un array asociativo llamado $PERSONAS y le introduzco 5 arrays para 5 personas.
$personas = array (
array ('nombre' => 'Juan', 'apellidos' => 'Sánchez Vilar', 'sexo' => 'Hombre'),
array ('nombre' => 'Ana', 'apellidos' => 'Martínez González', 'sexo' => 'Mujer' ),
array ('nombre' => 'Maria', 'apellidos' => 'Corbelle Marin', 'sexo' => 'Mujer' ),
array ('nombre' => 'Miguel', 'apellidos' => 'García Montero', 'sexo' => 'Hombre'),
array ('nombre' => 'Jose', 'apellidos' => 'Novo Foz', 'sexo' => 'Hombre'),
);

// Añado dos personas nueva al array.
$personas[] = array ("nombre" => "Sonia", "apellidos"=> "Mosquera Arazal", "sexo"=>"Mujer");
$personas[] = array ("nombre" => "Daniel", "apellidos"=> "Santos Varela", "sexo"=> "Hombre");

// Muestro el titulo del ejercicio
echo '<div style="border:#FFE4B5 1px solid;width:604px;float:center;text-align:center;font-size:16px;background-color:#8B0000;color:#FFE4B5"> NÚMERO DE PERSONAS { '.count($personas).' } </div>
<div style="clear:left"></div>';

// Recorro el array completo.
foreach($personas as $persona)
{
if ($persona['sexo'] == "mujer" )
$persona['nombre'] = "DOÑA " .$persona['nombre'];
else
$persona['nombre'] = "DON " .$persona['nombre'];

// Muestro el array completo
echo '<div style="border:#FFE4B5 1px solid;width:200px;float:left;font-size:16px;background-color:#8B0000;color:#FFE4B5"> '.$persona['sexo']. '</div>
<div style="border:#FFE4B5 1px solid;width:200px;float:left;font-size:16px;background-color:#8B0000;color:#FFE4B5"> '.$persona['nombre']. '</div>
<div style="border:#FFE4B5 1px solid;width:200px;float:left;font-size:16px;background-color:#8B0000;color:#FFE4B5"> '.$persona['apellidos']. '</div>
<div style="clear:left"></div>';
}
?>
</body>
</html>