Comunidad de diseño web y desarrollo en internet online

Lista alineada por ambos lados en CSS

Ir a página 1, 2  Siguiente

Foros de discusión > CSS y HTML

Citar            
MensajeEscrito el 14 Jun 2008 02:51 am
Muy buenas amiguetes, ando diseñando una web y tengo un problemilla.


Esta es la lista que quiero hacer en CSS

Quiero hacer una lista alineada por ambos lados (texto a la izq e imagen a la derecha), es posible hacerlo con css? Si alineo el texto a la izq el texto se queda bien pero las imagenes no se cuadran, y viceversa... alguna recomendacion?

Muchas gracias :)
Sergio

Por sosfactory

135 de clabLevel

1 tutorial

 

Envíale un mensaje privado     Web

msie
Citar            
MensajeEscrito el 14 Jun 2008 09:02 am

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Titulo</title>
<style type="text/css">
li{display:block;width:150px;}
span{display:block;}
.left{float:left;width:100px;background-color:#999}
.right{float:right;width:50px;background-color:#9BF}
</style>
</head>
<body>
<ul>
<li><span class="left">uno</span><span class="right">dos</span></li>
<li><span class="left">1</span> <span class="right">2</span></li>
</ul>
</body>
</html>

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Envíale un mensaje privado    

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 14 Jun 2008 11:51 am
Perfecto :D

Muchas gracias Rizome ;)

Por sosfactory

135 de clabLevel

1 tutorial

 

Envíale un mensaje privado     Web

msie
Citar            
MensajeEscrito el 14 Jun 2008 12:14 pm
:)

un placer

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Envíale un mensaje privado    

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 14 Jun 2008 01:01 pm
Ops, espera, cante victoria demasiado rapido.

En IE se ve perfecto, pero en Firefox la cosa esta regular nada mas, fijate:

http://www.sosfactory.com/webdesign/musicblattle

Tienes idea de que falla?

Por sosfactory

135 de clabLevel

1 tutorial

 

Envíale un mensaje privado     Web

msie
Citar            
MensajeEscrito el 14 Jun 2008 01:02 pm

Por sosfactory

135 de clabLevel

1 tutorial

 

Envíale un mensaje privado     Web

msie
Citar            
MensajeEscrito el 14 Jun 2008 01:11 pm

sosfactory escribió:

* En IE se ve perfecto, pero en Firefox la cosa esta regular nada mas.
* Pecado.

Yo lo veo bien en FF.
Y en Opera.
Y en IE.

En cualquier caso, revisate este hilo, y sus hijos, que te darán alguna que otra pista.
Si después sigues con dudas, pregunta con confianza.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Envíale un mensaje privado    

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 14 Jun 2008 01:16 pm
Si, mas o menos tengo idea de como hacer que se vean bien mis sitios, he hecho ya varios.

Pero no lo entiendo, mira como lo veo yo

Por sosfactory

135 de clabLevel

1 tutorial

 

Envíale un mensaje privado     Web

msie
Citar            
MensajeEscrito el 14 Jun 2008 01:23 pm


Qué versión de FF usas? Qué SO?

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Envíale un mensaje privado    

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 14 Jun 2008 01:26 pm
FF: 2.0.0.14
Windows XP

Por sosfactory

135 de clabLevel

1 tutorial

 

Envíale un mensaje privado     Web

msie
Citar            
MensajeEscrito el 14 Jun 2008 02:07 pm
Actualiza FireFox

PD: y si te esperas al día 17, podrás descargar el ultra-nuevo: FireFox 3

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Envíale un mensaje privado    

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 14 Jun 2008 02:21 pm
Pero esa no es la cuestion, necesito que se vea bien en todas las versiones de FF y IE.

A ver si alguien mas me puede decir como se ve en sus navegadores, please :)

Por sosfactory

135 de clabLevel

1 tutorial

 

Envíale un mensaje privado     Web

msie
Citar            
MensajeEscrito el 14 Jun 2008 02:35 pm
Los usuarios de FireFox, solemos tenerlo actualizado siempre a la última versión (entre otros motivos, porque se actualiza "solo").

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Envíale un mensaje privado    

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 14 Jun 2008 03:00 pm
Pero entonces por que el mio, no?

Por sosfactory

135 de clabLevel

1 tutorial

 

Envíale un mensaje privado     Web

msie
Citar            
MensajeEscrito el 14 Jun 2008 03:09 pm
Pues porq lo deshabilitarías en algún momento.

(click para ampliar)

Si quieres, haz la actualización directa.

(click para ampliar)

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Envíale un mensaje privado    

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 14 Jun 2008 03:18 pm
Lo que te quiero decir es que al igual que no se me actualizó a mí, le puede pasar a cualquiera.

Es un encargo, no puedo dejar la integridad del diseño en manos del usuario. Tengo que solucionarlo, en caso de que no sea imposible tendré que buscar alguna alternativa.

Necesito saber si ese error aparecerá en la mayoría de usuarios o es sólo un problema de mi navegador. A ver si alguien más me dice que tal se vé.

Saludos.

Por sosfactory

135 de clabLevel

1 tutorial

 

Envíale un mensaje privado     Web

msie
Citar            
MensajeEscrito el 14 Jun 2008 03:23 pm
Actualiza el navegador.
- Si sigue dando problemas, será culpa de tu PC.
- Si no, ya sabrás por dónde empezar.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Envíale un mensaje privado    

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 14 Jun 2008 04:34 pm
sosfactory, te falta un clear en #stats li

Código :

#stats li {
background:transparent url(../images/arrow1.gif) no-repeat scroll 0px 5px;
display:block;
padding:0pt 0pt 0pt 10px;
width:155px;
clear:right;
}

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Envíale un mensaje privado     Web

Piccola Venezia...

firefox
Citar            
MensajeEscrito el 14 Jun 2008 08:52 pm
Genial The Fricky!, ahora si se ve todo correcto, bueno, aun no veo las flechitas de los bullets, no es un problema mayor pero tienes idea de porque pasa?

Muchas gracias :)

Por sosfactory

135 de clabLevel

1 tutorial

 

Envíale un mensaje privado     Web

msie
Citar            
MensajeEscrito el 14 Jun 2008 10:29 pm
Pues, la verdad es que no tengo una teoría clara, realmente lo coloqué como experimento al ver que los elementos del li flotan, yo suelo chequear mucho los clear para evitarme problemas de comportamiento, y por lo general funciona.

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Envíale un mensaje privado     Web

Piccola Venezia...

firefox
Citar            
MensajeEscrito el 14 Jun 2008 11:30 pm

sosfactory escribió:

[...] no veo las flechitas de los bullet[...]
¿Qué flechitas?
Los "puntos" de las listas.
  • Punto uno.
  • Punto dos
Si es eso, creo porque al tener "li{display:block;}", ya no aparecen.
(pero esto lo digo al tun-tun)

Confirma a qué flechas te refieres.
Y/o pon screen-shot

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Envíale un mensaje privado    

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 15 Jun 2008 12:11 am
Me refiero a las flechitas del principio de cada elemento de la lista.

Fijate que en IE salen:



Pero en FF no:

Por sosfactory

135 de clabLevel

1 tutorial

 

Envíale un mensaje privado     Web

msie
Citar            
MensajeEscrito el 15 Jun 2008 12:16 am

sosfactory escribió:

Me refiero a las flechitas del principio de cada elemento de la lista.
Fijate que en IE salen:
[...]

¿debería ver alguna flecha?
:S

Dios... no entiendo...
:(

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Envíale un mensaje privado    

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 15 Jun 2008 12:23 am
Jeje, no ves la flechita a la izq de HP, Energy, awake...? Es un gris bastante oscuro, puede que al contraste con esta pagina tan clara no lo aprecies, visita mejor el link: http://www.sosfactory.com/webdesign/musicblattle

En IE veras las flechitas, en FF no salen.

Por sosfactory

135 de clabLevel

1 tutorial

 

Envíale un mensaje privado     Web

msie
Citar            
MensajeEscrito el 15 Jun 2008 08:05 am
Creo que tenéis los monitores demasiado brillantes.

Código :

.left{float:left;background:url('http://www.sosfactory.com/webdesign/musicblattle/images/arrow1.gif') no-repeat 0px 5px;padding-left:10px;}

- La ruta del gif estaba mal. (?)
- Si lo pones en el <li>, no funciona, pero en el <span>, sí (?)

Lo del último punto, me ha parecido demasiado curioso, como para dejarlo pasar por alto.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Envíale un mensaje privado    

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 15 Jun 2008 12:44 pm
En el segundo caso ya todo funciona perfecto, no lo entiendo pero funciona :)
Tengo dos monitores, una Cintiq y un CRT y veo las flechitas en ambos, no sera que lo tienes un poco oscuro? O que tienes mucha luz en la habitacion?

Muchas gracias a The Fricky! y rizome ;)

Por sosfactory

135 de clabLevel

1 tutorial

 

Envíale un mensaje privado     Web

msie
Citar            
MensajeEscrito el 15 Jun 2008 12:59 pm
(Uso un TFT)
Lo he probado con y sin luz ambiental.
Hasta que no pongo el monitor tan brillante, que casi me arañe los ojos, no veo las flechitas.
xD

Y he seguido varios manuales para su calibración...
U_U
O soy muy bobo... o todos navegáis con gafas de sol.
xD

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Envíale un mensaje privado    

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 15 Jun 2008 01:56 pm
Usa esta imagen:



Hazlo con luz suave y sobre fondo negro, si distingues los 23 rectangulos de la parte superior y las ABC de los laterales todo esta correcto, si no, algo esta mal calibrado.

Saludos y gracias de nuevo :)

Por sosfactory

135 de clabLevel

1 tutorial

 

Envíale un mensaje privado     Web

msie
Citar            
MensajeEscrito el 15 Jun 2008 04:25 pm

sosfactory escribió:

[...]Saludos y gracias de nuevo :)
IDEM

^^
Ahora veo las flechitas, y tampoco me sangran los ojos.
:D

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Envíale un mensaje privado    

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 15 Jun 2008 06:30 pm
Rizome, como siempre, tu monitor es raro, yo veia las flechitas desde el principio. Y suelo tenerlo bastante oscuro por las horas que me tiro delante del pc.

Por bydaface

303 de clabLevel

1 tutorial

 

Envíale un mensaje privado    

Barcelona, Spain

firefox
Ir a página 1, 2  Siguiente
Foros de discusión > CSS y HTML

   Página 1 de 2

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.