1
私はその中にロゴ付きのnavbarを作成しようとしています。私は基本的には、navbarが動作しているが、ページコンテンツのヘッダーもnavbarに強制されています。ここでヘッダーと干渉するNavbar HTML/CSS
は、ここに私のHTMLと完全なソースのための私のウェブサイトへのリンクと閲覧(http://frankkreutzer.com/)
<header class="section">
<a id="logo" href="http://frankkreutzer.com"><img src="images/logo.png" width="75" height="75"></a>
<nav>
<ul>
<li><a href="http://frankkreutzer.com" id="current">Home</a></li>
<li><a href="http://frankkreutzer.com/it-130/assignment-3/assignment3.html" target="_blank">IT 130</a></li>
<li><a href="http://frankkreutzer.com/csgo/csgo-home.html" target="_blank">CS:GO Project</a></li>
<li><a href="http://frankkreutzer.com/cth-247/index.html" target="_blank">CTH Final Project</a></li>
<li><a href="http://frankkreutzer.com/contact.html">Contact Me</a></li>
</ul>
</nav>
</header>
である私のCSSのいくつかされています
header {
top: 0;
right: 0;
left: 0;
border-bottom: 1px solid #e3e3e8;
}
#logo {
float: left;
font-size: 3em;
margin: 0;
padding: .4em;
text-decoration: none;
color: #222222;
transition: .5s all;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 2.8em 2em;
}
nav ul li {
display: inline;
padding: 0 .4em;
}
nav ul li a {
color: #222222;
text-decoration: none;
font-size: 20px;
padding-bottom: .5em;
transition: .5s color;
}
nav ul li a:hover {
border-bottom: 3px solid #222222;
}
#current {
color: #ff4629;
border-bottom: 3px solid #222222;
}
'.content {クリア:両方;}' - よりここに:https://css-tricks.com/all-about-floats/#article-header-id-2 – sol
使用しているので、 divのfloatプロパティ.content {clear:both}またはheader {width:100%;}を使用できます。 float:left;} –
@ovokuro uhhh、どうしたらうまくいったのですか? – Frank