3
Dies ist, wie es aussieht, wenn ich schweben nicht (wie ich es will immer aussehen):Schrift lichtet, wenn ich über meine navbar schweben
Dies ist, wie es aussieht, dünn:
habe ich eine header und navbar eingerichtet, aber wenn ich versuche, die navbarfixed ich diesen seltsamen Effekt erhalten an der Spitze zu machen.
Die Schriftart in den Titel, Adresse und navbar alles aus irgendeinem Grund dünn kann ich nicht herausfinden. Hier
ist der Code:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ^Reset style. DO NOT DELETE! */
/*-------------------------------------------------------------------------*/
body {
background-color: #254117;
color: white;
width: 100%;
/*max-width: 960px;*/
margin: 0 auto;
margin-top: 12em;
/* ADDED TO MAKE HEADER FIXED*/
}
#header {
/* ADDED TO MAKE HEADER FIXED*/
position: fixed;
/* ADDED TO MAKE HEADER FIXED*/
width: 100%;
/* ADDED TO MAKE HEADER FIXED*/
top: 0;
/* ADDED TO MAKE HEADER FIXED*/
height: 12em;
/* ADDED TO MAKE HEADER FIXED*/
background-color: #254117;
/* ADDED TO MAKE HEADER FIXED*/
}
/* ADDED TO MAKE HEADER FIXED*/
#logo {
font-size: 2em;
width: 60%;
display: inline;
float: left;
text-align: center;
font-family: cursive;
margin-top: 0.5em;
/*position: fixed;*/
/*top: 0;*/
}
#address {
width: 31%;
display: inline;
font-family: cursive;
font-size: 1.5em;
float: right;
/*text-align: right;*/
margin-bottom: 1em;
margin-right: 1em;
margin-top: 0.5em;
/*position: fixed;*/
/*top: 0;*/
}
/* ^LOGO AND ADDRESS STUFF */
/*-------------------------------------------------------------------------*/
nav {
width: 99%;
margin: 20px 0.5%;
clear: both;
/*position: fixed;*/
}
nav ul {
list-style: none;
/*overflow: hidden;*/
overflow: auto;
}
nav ul li {
float: left;
width: 16.6666%;
}
/*FFEE2E*/
nav ul li a {
text-align: center;
/*text-shadow: 2px 1px 2px ; include text shadow or no? */
font-family: cursive;
padding: 8px 0;
display: block;
width: 97.5%;
border-top: 4px solid #FFEE2E;
border-right: 4px solid #E5C000;
border-bottom: 4px solid #E5C000;
border-left: 4px solid #FFEE2E;
background-color: #FCD717;
font-size: 1.5em;
}
nav ul li a,
nav ul li a:focus,
nav ul li a:visited,
nav ul li a:hover,
nav ul li a:active {
text-decoration: none;
color: #0000EE;
}
nav ul li a:hover,
nav ul li a:active {
background-color: #FFE424;
border-top: 4px solid #E5C000;
border-right: 4px solid #FFE424;
border-bottom: 4px solid #FFE424;
border-left: 4px solid #E5C000;
border-radius: 0;
}
nav ul li:first-child a {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
nav > ul li:last-child a {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
/* ^NAVIGATION BAR - LEVEL 1 */
/*-------------------------------------------------------------------------*/
nav li > ul li {
display: block;
width: 99%;
}
nav li > ul {
display: none;
width: inherit;
}
nav li > ul li:first-child a {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
nav li > ul li:last-child a {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
nav li > ul:last-child a {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
nav li:hover > ul {
display: block;
}
nav li:hover > ul {
position: absolute;
display: block;
}<div id="header">
<div id="logo">Bonlee Grown Farm</div>
<div id="address">650 Al Davis Road
<br>
<p style="font-size: 0.1em">
<br>
</p>Bear Creek, NC 27514
<p style="font-size: 0.1em">
<br>
</p>(012)345-6789 | [email protected]</div>
<nav>
<ul>
<li> <a href="BonleeGrownFarm2.html"> Home </a>
</li>
<li> <a href="OurStory.html"> Our Story </a>
</li>
<li>
<a href="WheretoFindUs.html"> Where to Find Us </a>
<ul>
<li> <a href="Market1.html"> Market1 </a>
</li>
<li> <a href="Market2.html"> Market2 </a>
</li>
<li> <a href="Market3.html"> Market3 </a>
</li>
<li> <a href="Market4.html"> Market4 </a>
</li>
</ul>
</li>
<li>
<a href="FromOurFarm.html"> From Our Farm </a>
<ul>
<li> <a href="Plant1.html"> Plant1 </a>
</li>
<li> <a href="Plant2.html"> Plant2 </a>
</li>
<li> <a href="Plant3.html"> Plant3 </a>
</li>
<li> <a href="Plant4.html"> Plant4 </a>
</li>
<li> <a href="Plant5.html"> Plant5 </a>
</li>
<li> <a href="Plant6.html"> Plant6 </a>
</li>
<li> <a href="Plant7.html"> Plant7 </a>
</li>
<li> <a href="Plant8.html"> Plant8 </a>
</li>
<li> <a href="Plant9.html"> Plant9 </a>
</li>
<li> <a href="Plant10.html"> Plant10 </a>
</li>
<li> <a href="Plant11.html"> Plant11 </a>
</li>
<li> <a href="Plant12.html"> Plant12 </a>
</li>
<li> <a href="Plant13.html"> Plant13 </a>
</li>
<li> <a href="Plant14.html"> Plant14 </a>
</li>
<li> <a href="Plant15.html"> Plant15 </a>
</li>
<li> <a href="Plant16.html"> Plant16 </a>
</li>
<li> <a href="Plant17.html"> Plant17 </a>
</li>
<li> <a href="Plant18.html"> Plant18 </a>
</li>
<li> <a href="Plant19.html"> Plant19 </a>
</li>
<li> <a href="Plant20.html"> Plant20 </a>
</li>
</ul>
</li>
<li>
<a href="FromOurKitchen.html"> From Our Kitchen </a>
<ul>
<li> <a href="Jam1.html"> Jam1 </a>
</li>
<li> <a href="Jam2.html"> Jam2 </a>
</li>
<li> <a href="Jam3.html"> Jam3 </a>
</li>
<li> <a href="Jam4.html"> Jam4 </a>
</li>
<li> <a href="Jam5.html"> Jam5 </a>
</li>
<li> <a href="Jam6.html"> Jam6 </a>
</li>
<li> <a href="Jam7.html"> Jam7 </a>
</li>
<li> <a href="Jam8.html"> Jam8 </a>
</li>
<li> <a href="Jam9.html"> Jam9 </a>
</li>
<li> <a href="Jam10.html"> Jam10 </a>
</li>
</ul>
</li>
<li> <a href="CarolinaBabe.html"> Carolina Babe </a>
</li>
</ul>
</nav>
</div>
Wollen Sie die Schrift des Titels in Navigationsleiste fett? –
kann kein Problem mit Ihrem Code sehen, es sei denn, die Navbar Scrollbar, die ich bereits behoben, wenn Sie wissen möchten – dippas
erstellt Code Pen URL für die Referenz - http://codepen.io/nagasai/pen/ezJEEX –