Zurück Zum Website Design Forum

CSS Hilfe bitte!

  • azneternity
  • Novice
  • Novice
  • No Avatar
  • Registriert: Jan 27, 2006
  • Beiträge: 26
  • Loc: Tallahassee
  • Status: Offline

Beitrag Oktober 29th, 2009, 12:38 pm

Help me please! Ive, das auf dieses Problem für einen ganzen Tag und jetzt Im stecken über alle meine Haare über sie zu verlieren! Ich möchte diese divs Inline-Display .. wie horizontal...Wenn i entfernen Sie alle div-Elemente aus meinem "li"-Elemente dann zeigen sie inline. Aber sobald ich die divs wieder ein. sie vertikal anzuzeigen! was ist denn hier los? Ich möchte nur eine ungeordnete Liste von Buttons mit abgerundeten Boarder machen ist, dass zu viel zu verlangen?!
HTML Code: [ 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
  • Registriert: 25 Feb 2008
  • Beiträge: ?
  • Loc: Ozzuland
  • Status: Online

Beitrag Oktober 29th, 2009, 12:38 pm

  • azneternity
  • Novice
  • Novice
  • No Avatar
  • Registriert: Jan 27, 2006
  • Beiträge: 26
  • Loc: Tallahassee
  • Status: Offline

Beitrag Oktober 29th, 2009, 1:48 pm

Ich fand heraus, dass, wenn ich Anzeige hinzufügen: inline-den. RcbtnBox CSS-Klasse, dann wird es horizontal in Google Chrome und Mozilla Firefox Internet Explorer angezeigt, aber nicht blockieren!!
damnit .. kann jemand bitte helfen Sie mir. Ich brauche es in erster Linie IE .. Arbeit Ich verstehe nicht, was Im falsch machen.
  • azneternity
  • Novice
  • Novice
  • No Avatar
  • Registriert: Jan 27, 2006
  • Beiträge: 26
  • Loc: Tallahassee
  • Status: Offline

Beitrag November 2nd, 2009, 6:34 am

Figured it out .. gerade hinzugefügt display: inline-block alle divs und dann habe ich bemerkt, dass sie angezeigt wurden korrekt in Firefox und Chrome, aber nicht im Internet Explorer. So, dann habe ich ein wenig google Forschung und fand einige Artikel über »hasLayout" Fehler mit Internet Explorer und die Lösungen fest mein Problem. So fügte hinzu: "zoom: 1;" und "* display: inline;" zu meinen divs und aus irgendeinem Grund arbeiten sie jetzt im Internet Explorer.

Ich glaube, nur eine von diesen IE-Bugs. Took 2 Tage, um herauszufinden.
  • bilhasry4you
  • Novice
  • Novice
  • No Avatar
  • Registriert: Feb 12, 2008
  • Beiträge: 23
  • Status: Offline

Beitrag November 6th, 2009, 7:33 am

wie wäre es mit der CSS-Version ist es, dass IE-Unterstützung?

Seite 1 von 1

Buchung Informationen

  • Beiträge in diesem Thema: 4 Beiträge
  • Mitglieder in diesem Forum: Bogey, Brian Jester und 126 Gäste
  • Du darfst keine neuen Themen in diesem Forum erstellen.
  • Du darfst keine Antworten zu Themen in diesem Forum erstellen.
  • Du darfst deine Beiträge in diesem Forum nicht ändern.
  • Du darfst deine Beiträge in diesem Forum nicht löschen.
  • Du darfst keine Dateianhänge in diesem Forum erstellen.
 
 

© Unmelted Enterprises 1998-2009. Angetrieben durch phpBB © 2001-2009 phpBB Group.