Retour à Forum de site web

CSS aider s'il vous plaît!

  • azneternity
  • Novice
  • Novice
  • No Avatar
  • Inscription: Jan 27, 2006
  • Messages: 26
  • Loc: Tallahassee
  • Status: Offline

Message Octobre 29th, 2009, 12:38 pm

Aidez-moi s'il vous plaît! Ive été bloqué sur ce problème pour une journée entière maintenant et Im environ pour perdre tous mes cheveux over it! Je veux afficher ces inline divs .. comme à l'horizontale...Lorsque je supprimer tous les éléments div de mon "li" éléments alors qu'ils affichent en ligne. Mais dès que j'ai mis le divs Retour po. ils affichent verticalement! ce qui se passe ici? Je veux juste faire une liste non-ordonnée des boutons arrondis avec des frontières est-ce trop demander?!
HTML Code: [ 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
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Octobre 29th, 2009, 12:38 pm

  • azneternity
  • Novice
  • Novice
  • No Avatar
  • Inscription: Jan 27, 2006
  • Messages: 26
  • Loc: Tallahassee
  • Status: Offline

Message Octobre 29th, 2009, 1:48 pm

J'ai découvert que si j'ajoute display: inline-block à la classe. RcbtnBox css alors il sera horizontalement afficher dans Google Chrome et Firefox Mozilla mais pas IE!!
damnit .. quelqu'un peut-il s'il vous plaît aidez-moi. J'en ai besoin pour travailler principalement dans IE .. Je ne comprends pas ce qui Im faire le mal.
  • azneternity
  • Novice
  • Novice
  • No Avatar
  • Inscription: Jan 27, 2006
  • Messages: 26
  • Loc: Tallahassee
  • Status: Offline

Message Novembre 2nd, 2009, 6:34 am

Figured it out .. qu'afficher ajouté: inline-block à tous les divs et puis j'ai remarqué qu'ils étaient afficher correctement dans Firefox et Chrome, mais pas dans IE. Ainsi, alors j'ai fait une petite recherche google et trouvé quelques articles sur "hasLayout" bugs avec l'explorateur Internet et les solutions fixes mon problème. Vient d'ajouter "zoom: 1;" et "* display: inline;" à mes divs et pour une raison quelconque, ils travaillent désormais dans IE.

Je pense juste un de ces bogues d'IE. A pris 2 jours pour comprendre.
  • bilhasry4you
  • Novice
  • Novice
  • No Avatar
  • Inscription: Fév 12, 2008
  • Messages: 33
  • Status: Offline

Message Novembre 6th, 2009, 7:33 am

Que diriez-vous la version CSS, est-ce IE soutien qui?

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 4 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 112 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC