Comunidad de diseño web y desarrollo en internet online

Menú de flujo horizontal, mediante <ul>

Citar            
MensajeEscrito el 14 Sep 2010 01:44 pm
Hola a todos,
hace un par de día que me estoy peleando con el siguiente tema...

Necesito crear un menú horizontal de flujo (no puedes pasar a la siguiente pantalla, sin haber rellanado la pantalla actual). Mi idea para maquetarlo es usar una Unordered List mediante <ul>, <li> y <a> anidados. Del siguiente modo:

Código HTML :

<div id="AplZonaFlujo">
        <ul>
          <li class="first">
           <a href="#">Flujo 01</a>
   </li>
        <li class="current">
           <a href="#"> Flujo 02</a>
        </li>
        <li>
           <a href="#">Flujo 03</a>
        </li>
          <li class="disabled">
            <a>Traspasar</a></li>
          <li class=" last">
           <a href="#">Flujo 04</a>
        </li>
        </ul>
      </div>


Como cada elemento de la List tiene diferentes estados (current, disabled, last y first)... se coloca una imagen diferente segun la clase en el background de los <li>. Hasta ahí bien.

Me surge el siguiente problema:

* El texto del item se pone en el <a></a>.. hasta ahi perfecto. Pero cuando el literal del texto ocupa mas de una linea... desplaza la imagen de fondo del <li> para arriba en IE8 !!
A ver si con vuestra ayuda.. me dais una solución cross-browser (almenos FF e IE) del CSS.
Adjunto una imagen del error:

[url=http://img816.imageshack.us/i/2010914945.png][/url]
Muchas gracias de antemano!

Un saludo!

Por CLAnonimo

Claber

600 de clabLevel

5 tutoriales
1 articulo

 

Este es un usuario anónimo genérico para las cuentas borradas o perdidas.

firefox
Citar            
MensajeEscrito el 14 Sep 2010 04:53 pm
Un gif de 1x1 pixel? , ese es el error? :?

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 15 Sep 2010 07:10 am
Disculpa, no sé que ha ocurrido con la imagen subida a imageshack...
A ver con esta..

http://imm.io/1jvb

Gracias de antemano!!

Salut!

Por CLAnonimo

Claber

600 de clabLevel

5 tutoriales
1 articulo

 

Este es un usuario anónimo genérico para las cuentas borradas o perdidas.

firefox
Citar            
MensajeEscrito el 15 Sep 2010 09:03 am
¿Cuál es el Código css que usas?

Por ivanfc0o

Claber

391 de clabLevel

3 tutoriales

Genero:Masculino  

Hardcore UI

chrome
Citar            
MensajeEscrito el 15 Sep 2010 09:49 am
Este es el css:

Código :

#AplZonaFlujo
{

background-color:transparent;
margin:30px 10px 60px 10px;
width:auto;

}

#AplZonaFlujo ul
{
background-color:transparent;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: white;
text-align: center;
margin: 0;
list-style-type:none;
padding-right:43px;



}

#AplZonaFlujo ul li
{
background:url("imagenes/flujo_normal.png") no-repeat center;
background-color:transparent;
width:145px;
height:48px;
display: -moz-inline-stack; /* FF2*/
display: inline-block;
margin-left:-3px;
*display: inline; /* IE */


}

#AplZonaFlujo ul li a
{

color:#000;
display:inline;
text-decoration: none;
font: 12px Arial, Helvetica, sans-serif;
font-weight:bold;
width:135px;
display:block;
position:relative;
top:0px;
padding-top:48px;
margin-left:7px !important;
margin-left:-65px;

}


Y estos los sucesivos fondos de item:

Código :

#AplZonaFlujo ul li.last
{
  background:url("imagenes/flujo_last.png") no-repeat center !important;
  background:url("imagenes/flujo_normal.png") no-repeat center;

}


Ayuda por favooor! :wink:

Por CLAnonimo

Claber

600 de clabLevel

5 tutoriales
1 articulo

 

Este es un usuario anónimo genérico para las cuentas borradas o perdidas.

firefox
Citar            
MensajeEscrito el 02 Oct 2010 02:02 pm
No puedes pretender meter 5 lineas en el mismo sitio que 1, quedaría fatal.
Es el texto el que te tira de la li hacia abajo y la hace más grande, con lo cual la imagen se alinea como tu quieres pero al ser de distinto tamaño no coinciden.
Yo te recomiendo que el nombre de las opciones tengan 1 linea (2 máx.) y que le asignes una altura al div#AplZonaFlujo que será la que calcules entre el espacio superior, el de la imagen y el inferior (el que necesites)

Por malcomcc

39 de clabLevel



Genero:Masculino  

Desarrollador Web/Multiplataforma/Gráfico

firefox

 

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