4

こんばんはStackOverflowers！
私は自分のコードでキャッチ22のように見えるものに遭遇しています。画像ロゴ付きの新しいCSS3リボンナビゲーションを使用しています。

これが私の問題です：

リボンナビゲーションがオーバーフローしました：非表示。cssで、リボンの下部を非表示にします。ただし、ナビゲーションの途中でロゴを取得するには、それをDIVに含める必要があります。オーバーフローあり：非表示; オンにすると、ロゴがトリミングされ（オーバーフローするため）、ナビゲーションは次のようになります：http:
//i.stack.imgur.com/JoXyJ.png

ロゴを切り取りたくないので、overflow：hidden;を削除します。しかし、その後、次のように、ナビゲーションの下にリボンタグが表示されるという問題が発生します：http： //i.stack.imgur.com/bZE26.png

これに対する簡単な解決策はないようです。新しい開発者として、私は自分の髪を少し引き出し始めていることに気づきました。リボンの尾が消えてロゴが表示されるようにする回避策はありますか？

これは私のHTMLコードです：

<body>
    <div class="ribbon">
        <a href='#'><span>Home</span></a>
    <a href='#'><span>Portfolio</span></a>
    <a href="index.php"><img id="logo" src="img/logo-grungewh.png" alt="logo"/></a>
    <a href='#'><span>About</span></a>
    <a href='#'><span>Contact</span></a>
</div>

と私のCSSコード：

/************************* 
* Left Ribbon Navigation *
**************************/
.ribbon {
    margin-top:6em; 
}

.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #fff;
}

.ribbon:after {
border-right-color:transparent;
}

.ribbon:before {
border-left-color:transparent;
}

.ribbon span {
background:#fff;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;

-webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span {
background:#D55E96;
margin-top:0;
}

.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}

.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}

.ribbon a:link, .ribbon a:visited { 
color:#000;
text-decoration:none;
float:left;
height:3.5em;
}

/********************* 
* Logo In Navigation *
**********************/
#logo {
margin-top:-5em;
z-index:3;
border:0;
}

正直なところ、アドバイスやガイダンスをいただければ幸いです。私はこれに投稿された多くのスレッドを読みました、そしてそれらは同じ波に乗っていないようです。私のような初心者に我慢し、髪を引き裂かないようにしてくれたOverflowersに感謝します。
最高、
ローラ

4

1 に答える 1

2

私がすることは、ロゴを保持するものを除いて、リボンのアンカーをオーバーフロー非表示に設定することです

.ribbon a:not(#logo-anchor){
    overflow:hidden;
}

フィドル

ターゲット ブラウザがサポートしていない場合は:not、ロゴのあるアンカーを除くすべてのアンカーにクラスを指定します。

.ribbon a.overflow-hidden{
    overflow:hidden;
}

フィドル

于 2012-05-20T04:57:39.857 に答える