0

クライアントの CSS をクリーンアップしているところです。

私はフロントエンドの人ではありませんが、bootstrap (ありがとう、twitter) に救われました。

ただし、カスタム ナビゲーション パネル (Twitter なし) をクリーンアップするのに非常に苦労しています。以下にCSSを用意しました。次のことができるようにする必要があります。

1) 最後を優雅に閉じます (最初は矢印ではなく垂直の境界線で始まります。最後は対称にして、最初のように閉じたいと思います)。

2) コンテナーがページの最後まで展開されないようにします。

3）クロムで動作させることができないようです。クロムではバラバラになりますが、IE と Ff では動作します。

ここにリンクがあります。何かアドバイス？本当にありがとう。

http://annualdinnerdev.elasticbeanstalk.com/

 /* ------- Wizard Interface ---------- */

 #wizHeader
        {
            border: solid 3px #fff;
            margin-bottom:25px;
            -moz-box-shadow: 3px 3px 4px #C2CBCE;
            -webkit-box-shadow: 3px 3px 4px #C2CBCE;
            box-shadow: 3px 3px 4px #C2CBCE; /* For IE 8 */
            -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#C2CBCE')"; /* For IE 5.5 - 7 */
            filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color= '#C2CBCE' );

        }

        #wizHeader li label
        {
            font-size:x-large;
        }

        #wizHeader li a
        {
            font-size:large;
        }

        #wizHeader li .prevStep
        {
            background-color: #D6E6FA;
            color:#000;
        }
        #wizHeader li .prevStep:after
        {
            border-left-color: #D6E6FA !important;
        }
        #wizHeader li .currentStep
        {
            background-color: #6699CC;
            color:#fff;
        }
        #wizHeader li .currentStep:after
        {
            border-left-color: #6699CC !important;
        }
        #wizHeader li .nextStep
        {
            background-color: #F0E9EA;
            color:gray;
        }
        #wizHeader li .nextStep:after
        {
            border-left-color: #F0E9EA !important;
        }
        #wizHeader
        {
            list-style: none;
            overflow: hidden;
            font: 14px Helvetica, Arial, Sans-Serif;
            margin: 0px;
            padding: 0px;
        }
        #wizHeader li
        {
            float: left;
        }
        #wizHeader li a
        {
            color: white;
            text-decoration: none;
            padding: 10px 0 10px 55px;
            background: brown; /* fallback color */
            background: hsla(34,85%,35%,1);
            position: relative;
            display: block;
            float: left;
        }
        #wizHeader li a:after
        {
            content: " ";
            display: block;
            width: 0;
            height: 0;
            border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
            border-bottom: 50px solid transparent;
            border-left: 30px solid hsla(34,85%,35%,1);
            position: absolute;
            top: 50%;
            margin-top: -50px;
            left: 100%;
            z-index: 2;
        }
        #wizHeader li a:before
        {
            content: " ";
            display: block;
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 35px solid white;
            position: absolute;
            top: 50%;
            margin-top: -50px;
            margin-left: 1px;
            left: 100%;
            z-index: 1;
        }
        #wizHeader li:first-child a
        {
            padding-left: 10px;
        }
        #wizHeader li:last-child
        {
            padding-right: 18px;
        }
4

1 に答える 1

0
  1. 背景色を #wizHeader に追加して、右側の境界線のビジュアルを作成します。
  2. #wizHeader で幅の値を指定して、ページの右側に拡張されないようにします。
  3. 私にとってはChromeで問題なく動作しているようです（最新バージョン）

#wizHeader に追加する宣言の例を次に示します (これらを現在 CSS 宣言にあるものに追加します)。

 #wizHeader {
   background: #6699CC; 
   width: 960px; 
}

コメントに基づいてさらに追加...

矢印が押し下げられている理由は、 がブロック要素であり、左にフロートしているため、使用可能な幅に合わせて流れ、使い果たすと次の行にドロップダウンするためです。

最後の矢を断ち切りたい場合は、

  • 最後の . これは私にとってはうまくいき、Chromeのインスペクターで編集しました：

    #wizHeader li:last-child {
  width: 172px; /* you might have to tweak this a bit*/
  overflow: hidden;
  padding-right: 0;
}

    次に、それに応じて #wizHeader の幅を変更します。上記のスニペットでは、幅 930px で問題ないように見えました。

    • 于 2012-09-27T20:50:27.987 に答える