Establecer espaciados diferentes de texto

manujav · #1 (**permalink**) 22/03/2007, 13:52

Hola
Quisiera que me ayudaran con este problema.
Necesito mostrar un menu en un footer con texto de la siguiente manera:

ELEMENTO UNO ◊ ELEMENTO DOS ◊ OTRO ELEMENTO HOME ◊ LINK ◊ MAS

en donde ELEMENTO UNO es un link, y el ◊ es solo decorativo pero necesito poner dos espacios en blanco entre el elemento y el ◊, asi como una separación mayor entre OTRO ELEMENTO y HOME.

Cómo puedo hacer esto en CSS? Necesito asignarles clases diferentes a cada elemento o que puedo hacer?

Algo parecido al footer de esta pagina...

paolamurias · #2 (**permalink**) 22/03/2007, 19:53

Ponele un padding: 0 10px; a las img de las viñetas, quizás funcione

sxceron · #3 (**permalink**) 22/03/2007, 20:21

mete tus vinculos ( links ) en una tabla( en una celda cada uno ), asi le das una dimesion constante a tus celdas y listo

Saludos!

paolamurias · #4 (**permalink**) 23/03/2007, 05:44

no estoy de acuerdo con sxceron, no es necesario usar tablas. para eso hacé el menú en un ul y a las li le das float left para que se haga horizontal, y a cada li le pones la img como fondo.

manujav · #5 (**permalink**) 26/03/2007, 10:27

Gracias Paola
Eso corrige el problema del espacio entre los elementos de la izquierda, pero ahora ¿como hago para poner el espacio entre los links de la izquierda (HOME / SITE MAP / ABOUT THIS SITE) y los textos de la derecha (®Airline Accounting... All rights reserved etc.)?

Aquí tal vez la respuesta de sxceron me lo resuelva...

De antemano Gracias

jesusbet · #6 (**permalink**) 26/03/2007, 11:22

back to basics...

<!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>Test</title>
<style type="text/css">
ul {
float: left;
display: inline;
}

ul li {
display: inline;
padding-right: 20px;
}

p {
text-align: right;
}
</style>
</head>
<body>

<ul>
<li>item 1</li>
<li>tu viñeta</li>
<li>item 2</li>
<li>tu viñeta</li>
<li>item 3</li>
</ul>

<p>®Airline Accounting... All rights reserved etc.</p>

</body>

</html>

manujav · #7 (**permalink**) 26/03/2007, 13:37

Perfecto...
Que haríamos sin los basics?

Gracias a todos por su tiempo...

manujav · #8 (**permalink**) 26/03/2007, 17:46

Pues todo iba bien hasta que introduje el código en la página que estoy haciendo...
Ahora los elementos quedaron separados y uno de ellos no respeta un div style que estoy colocandole.
Si alguien pudiera ayudarme a deducir que esta pasando, le mando los códigos vía MP.
Gracias de nuevo.
Por cierto, creo que en FF no esta desplegandose como debería...

jesusbet · #9 (**permalink**) 26/03/2007, 21:18

Eso probablemente pase porque estás usando el mismo código... agrégale un id o class...

manujav · #10 (**permalink**) 27/03/2007, 09:28

Soy novato en esto asi que cualquier otra corrección es bienvenida.
Gracias

manujav · #11 (**permalink**) 27/03/2007, 09:33

Esta imagen tambien es necesaria para ubicar el texto del pie:

manujav · #12 (**permalink**) 28/03/2007, 09:35

Pues aun no soluciono esto que de seguro es muy sencillo pero estoy pagando mi novatada...

En fin, cualquier ayuda es bien recibida.
Gracias

manujav · #13 (**permalink**) 30/03/2007, 18:06

Pues ya quedo... y como bien pensé era una total y completa tontería.
Bastaba con quitar el float del ul y listo.
Gracias a todos los que lo intentaron.