Obere Umrandung der Umrandung komplett machen

Ich habe eine Navigationsleiste mit drei Links darin. Wenn Sie genau hinsehen, werden Sie sehen, dass der dunkelgrüne obere Rand des Schwebeflugs und die aktiven Anker nicht den braunen Rand abdecken. Gibt es eine Möglichkeit, dies zu tun?Obere Umrandung der Umrandung komplett machen

So sieht es aus;

body { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 300; 
 
    background-color: #C8E6C9; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    margin: 0 10% 0 10%; 
 
} 
 

 
header, ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #4CAF50; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    border-bottom: 1px solid #FFFFFF; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 400; 
 
} 
 

 
li { 
 
    float: left; 
 
    margin: 0 0 0 0; 
 
} 
 

 
h1, li a { 
 
    display: block; 
 
    color: #FFFFFF; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    border: 2px solid #4CAF50; 
 
    border-top: 6px solid #4CAF50 
 
} 
 

 

 
/*link actions*/ 
 

 
li a.active { 
 
    background-color: #795548; 
 
    border: 2px solid #795548; 
 
    border-top: 6px solid #388E3C; 
 
} 
 

 
li a:hover { 
 
    background-color: #FDD835; 
 
    border: 2px solid #795548; 
 
    border-top: 6px solid #388E3C; 
 
    color: #795548; 
 
} 
 

 
li a.active:hover { 
 
    background-color: #FDD835; 
 
    border: 2px solid #795548; 
 
    border-top: 6px solid #388E3C; 
 
} 
 

 
a:first-child { 
 
    text-decoration: none; 
 
    color: #FFFFFF; 
 
} 
 

 
a:first-child:hover { 
 
    color: #795548; 
 
}

<body> 
 
    <noscript>Please Use JavaScript you loser.</noscript> 
 
    <div class="container"> 
 
    <header> 
 
     <nav> 
 
     <h1><a href="index.html">My Website</a></h1> 
 
     <ul> 
 
      <li><a href="index.html" class="active">Home</a></li> 
 
      <li><a href="page2.html">About</a></li> 
 
      <li><a href="page3.html">Getting Started</a></li> 
 
     </ul> 
 
     </nav> 
 
    </header> 
 
    </div> 
 
</body>

Quelle

2016-07-13 Paul V

So treffen sich Grenzen. Ich würde vorschlagen, einen Box-Schatten statt die obere Grenze

HINWEIS Verwendung:

Sie wurden den Schwimmer mit overflow:hidden auf den ul löschen. Dies würde diese Technik stoppen. Ich würde eine alternative Clearfix-Methode vorschlagen.

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 300; 
 
    background-color: #C8E6C9; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    margin: 0 10% 0 10%; 
 
} 
 
header, 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    float: left; 
 
    width: 100%; 
 
    background-color: #4CAF50; 
 
} 
 
h1 { 
 
    margin: 0; 
 
    border-bottom: 1px solid #FFFFFF; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 400; 
 
} 
 
li { 
 
    float: left; 
 
    margin: 0 0 0 0; 
 
} 
 
h1, 
 
li a { 
 
    display: block; 
 
    color: #FFFFFF; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    border: 2px solid #4CAF50; 
 
    border-top: none; 
 
    box-shadow: 0 -6px 0px 0px #4CAF50; 
 
} 
 
/*link actions*/ 
 

 
li a.active { 
 
    background-color: #795548; 
 
    border: 2px solid #795548; 
 
    border-top: none; 
 
    box-shadow: 0 -6px 0 0px #388E3C; 
 
} 
 
li a:hover { 
 
    background-color: #FDD835; 
 
    border: 2px solid #795548; 
 
    border-top: none; 
 
    box-shadow: 0 -6px 0 0px #388E3C; 
 
    color: #795548; 
 
} 
 
li a.active:hover { 
 
    background-color: #FDD835; 
 
    border: 2px solid #795548; 
 
    border-top: none; 
 
    box-shadow: 0 -6px 0px 0px #388E3C; 
 
} 
 
a:first-child { 
 
    text-decoration: none; 
 
    color: #FFFFFF; 
 
} 
 
a:first-child:hover { 
 
    color: #795548; 
 
}

<div class="container"> 
 
    <header> 
 
    <nav> 
 
     <h1><a href="index.html">My Website</a></h1> 
 
     <ul> 
 
     <li><a href="index.html" class="active">Home</a> 
 
     </li> 
 
     <li><a href="page2.html">About</a> 
 
     </li> 
 
     <li><a href="page3.html">Getting Started</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</div>

Quelle

2016-07-13 18:32:39

Ahh schön! Ich habe dies als Lösung markiert. Ich habe gerade erst angefangen und noch nie einen Box-Schatten benutzt, also danke. –

Wie @Paulie_D kommentiert, ist die braune in der oberen Grenze des Anker-Tag der Schnittpunkt zwischen dem oberen grünen und braunen Rand umgeben. Da die Hintergrundfarbe Ihrer li bereits braun ist, würde ich empfehlen die braune Grenze entfernt in etwa so:

body { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 300; 
 
    background-color: #C8E6C9; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    margin: 0 10% 0 10%; 
 
} 
 

 
header, ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #4CAF50; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    border-bottom: 1px solid #FFFFFF; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 400; 
 
} 
 

 
li { 
 
    float: left; 
 
    margin: 0 0 0 0; 
 
} 
 

 
h1, li a { 
 
    display: block; 
 
    color: #FFFFFF; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    border-top: 6px solid #4CAF50 
 
} 
 

 
h1 { 
 
    border: 2px solid #4CAF50; 
 
} 
 

 

 
/*link actions*/ 
 

 
li a.active { 
 
    background-color: #795548; 
 
    border-top: 6px solid #388E3C; 
 
} 
 

 
li a:hover { 
 
    background-color: #FDD835; 
 
    border: 2px solid #795548; 
 
    border-top: 6px solid #388E3C; 
 
    color: #795548; 
 
} 
 

 
li a.active:hover { 
 
    background-color: #FDD835; 
 
    border: 2px solid #795548; 
 
    border-top: 6px solid #388E3C; 
 
} 
 

 
a:first-child { 
 
    text-decoration: none; 
 
    color: #FFFFFF; 
 
} 
 

 
a:first-child:hover { 
 
    color: #795548; 
 
}

<body> 
 
    <noscript>Please Use JavaScript you loser.</noscript> 
 
    <div class="container"> 
 
    <header> 
 
     <nav> 
 
     <h1><a href="index.html">My Website</a></h1> 
 
     <ul> 
 
      <li><a href="index.html" class="active">Home</a></li> 
 
      <li><a href="page2.html">About</a></li> 
 
      <li><a href="page3.html">Getting Started</a></li> 
 
     </ul> 
 
     </nav> 
 
    </header> 
 
    </div> 
 
</body>

Hinweis: Ich entfernte auch die Ausweich grüne Grenze Ihrer li nur anwenden zum h1.

Quelle

2016-07-13 16:38:17

Der aktive Link auf diese Weise viel besser aussieht, aber über die Verbindungen schweben verursachen sie die anderen Verbindungen über schubsen. Auch das Problem besteht immer noch, da ich beim Hover einen braunen Rand habe. –

Obere Umrandung der Umrandung komplett machen

Antwort

Verwandte Themen