Volver al Foro de Diseño de páginas Web

CSS ayuda por favor!

Nota Octubre 29th, 2009, 12:38 pm

Help me please! Ive sido atrapado en este problema durante todo un día y ahora Im a punto de perder todo el pelo sobre ella! Quiero mostrar estos divs en línea .. como horizontal...Cuando puedo eliminar todos los elementos div de mi "li" a continuación, que muestran los elementos en línea. Pero tan pronto como pongo los divs volver pulg. muestran vertical! lo que está pasando aquí? Sólo quiero hacer una lista desordenada de los botones con los pensionistas redondeadas es que demasiado pedir?!
HTML Código: [ Download ] [ Select ]
<html><head>
<style type="text/css">
#steps { text-align: center; }
#steps ul { margin: 20px auto 5px auto; }
#steps ul li { list-style-type: none; display: inline; margin: 0 20px; }
 
.rcbtnBox {
   background: url(../images/rcbtnTopLeft.png) no-repeat top left;
   width: 75px;  
}
.rcbtnTop { background: url(../images/rcbtnTopRight.png) no-repeat top right; }
.rcbtnBottom { background: url(../images/rcbtnBottomLeft.png) no-repeat bottom left; }
.rcbtnBottom div { background: url(../images/rcbtnBottomRight.png) no-repeat bottom right; }
.rcbtnContent {
   background: url(../images/rcbtnRight.png) top right repeat-y;
   text-align: center;
}
 
.rcbtnTop div,.rcbtnTop,
.rcbtnBottom div, .rcbtnBottom {
   height: 15px;
   font-size: 1px;
}
.rcbtnContent {padding: 0 10px;}
</style>
</head><body>
<div id="steps">
   <ul>
      <li>
         <a href="#step1">
            <div class="rcbtnBox">
               <div class="rcbtnTop"><div></div></div>
               <div class="rcbtnContent">Step 1</div>
               <div class="rcbtnBottom"><div></div></div>
            </div>
         </a>
      </li>
      <li>
         <a href="#step2">
            <div class="rcbtnBox">
               <div class="rcbtnTop"><div></div></div>
               <div class="rcbtnContent">Step 2</div>
               <div class="rcbtnBottom"><div></div></div>
            </div>
         </a>
      </li>
   </ul>
</div>
</body></html>
  1. <html><head>
  2. <style type="text/css">
  3. #steps { text-align: center; }
  4. #steps ul { margin: 20px auto 5px auto; }
  5. #steps ul li { list-style-type: none; display: inline; margin: 0 20px; }
  6.  
  7. .rcbtnBox {
  8.    background: url(../images/rcbtnTopLeft.png) no-repeat top left;
  9.    width: 75px;  
  10. }
  11. .rcbtnTop { background: url(../images/rcbtnTopRight.png) no-repeat top right; }
  12. .rcbtnBottom { background: url(../images/rcbtnBottomLeft.png) no-repeat bottom left; }
  13. .rcbtnBottom div { background: url(../images/rcbtnBottomRight.png) no-repeat bottom right; }
  14. .rcbtnContent {
  15.    background: url(../images/rcbtnRight.png) top right repeat-y;
  16.    text-align: center;
  17. }
  18.  
  19. .rcbtnTop div,.rcbtnTop,
  20. .rcbtnBottom div, .rcbtnBottom {
  21.    height: 15px;
  22.    font-size: 1px;
  23. }
  24. .rcbtnContent {padding: 0 10px;}
  25. </style>
  26. </head><body>
  27. <div id="steps">
  28.    <ul>
  29.       <li>
  30.          <a href="#step1">
  31.             <div class="rcbtnBox">
  32.                <div class="rcbtnTop"><div></div></div>
  33.                <div class="rcbtnContent">Step 1</div>
  34.                <div class="rcbtnBottom"><div></div></div>
  35.             </div>
  36.          </a>
  37.       </li>
  38.       <li>
  39.          <a href="#step2">
  40.             <div class="rcbtnBox">
  41.                <div class="rcbtnTop"><div></div></div>
  42.                <div class="rcbtnContent">Step 2</div>
  43.                <div class="rcbtnBottom"><div></div></div>
  44.             </div>
  45.          </a>
  46.       </li>
  47.    </ul>
  48. </div>
  49. </body></html>
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Octubre 29th, 2009, 12:38 pm

Nota Octubre 29th, 2009, 1:48 pm

Me enteré de que si añado display: inline-block a la clase. Css rcbtnBox continuación se mostrará horizontalmente en cromo y Mozilla Firefox de Google, pero no IE!!
maldita sea .. ¿Puede alguien por favor me ayude. Lo necesito para trabajar en es decir, principalmente .. No entiendo por qué Im que hace mal.

Nota Noviembre 2nd, 2009, 6:34 am

Figured it out .. sólo muestra agregó: inline-block a todos los divs y luego me di cuenta de que se muestren correctamente en Firefox y Chrome, pero no en el IE. Así, pues hice un poco de investigación de Google y encontré algunos artículos sobre "hasLayout" errores con el explorador de Internet y las soluciones fijas mi problema. Recién añadido "zoom: 1;" y "* display: inline;" a mi divs y por alguna razón que trabajan actualmente en el IE.

Creo que sólo uno de esos fallos de IE. Tomó 2 días para averiguar.
  • bilhasry4you
  • Novice
  • Novice
  • No Avatar
  • Registrado: Feb 12, 2008
  • Mensajes: 23
  • Status: Offline

Nota Noviembre 6th, 2009, 7:33 am

¿qué hay de la versión de CSS, es el apoyo que el IE?

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 4 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 123 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© Unmelted Enterprises 1998-2009. Impulsado por phpBB © 2001-2009 phpBB Group.