Aligning the navigation bar in the title
Hopefully just a quick question: I'm trying to make my nav bar next to my logo, however it doesn't work. I have tried the solutions provided for other questions and none of them work. I tried float: left; for my title and float: right; for the navigator, but it is not displayed correctly. Thanks in advance for your help. Here is my code:
body{
width:90%;
padding-left:3%;
padding-right:3%;
}
header{
float:left;
}
nav{
background-color: yellowgreen;
padding-left: 2em;
white-space: nowrap;
}
header.banner > nav a:link{
font-size:large;
text-decoration: none;
color:white;
margin-right:20%;
}
header.banner > nav a:hover{
text-decoration: underline;
}
section{
float:left;
column-count:3;
column-gap:2em;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header class="banner">
<a title="Cleveland State University" href="http://www.csuohio.edu/">
<img src="CSU Shield.png" alt="CSUshield"
alt="navigation to Cleveland State University website" />
</a>
<nav>
<a href="cis.csuohio.edu/~hubteibe/CBA.html">Home</a>
<a href="cis.csuohio.edu/~hubteibe/Internships.html">Internships</a>
<a href="cis.csuohio.edu/~hubteibe/Co-Ops.html">Co-Ops</a>
<a href="cis.csuohio.edu/~hubteibe/Careers.html">Careers</a>
</nav>
<h1>College of Business Internships, Co-Ops, and Career Programs</h1>
</header>
+3
source to share
1 answer
Just make the following changes to your CSS,
header{
float:left;
width:100%
}
header > a{
float: left;
}
nav{
background-color: yellowgreen;
padding-left: 2em;
white-space: nowrap;
float: left;
}
header.banner > nav a:link{
font-size:large;
text-decoration: none;
color:white;
padding: 0 20px;
}
The property margin-right: 20%
given header.banner > nav a:link
was causing the problem. Usually you should use left and right paddings for such situations.
<------------- UPDATE ------------>
To span the full width, do something like this,
*{
box-sizing: border-box;
}
header > a{
float: left;
width: 20%;
}
nav{
white-space: nowrap;
float: left;
width: 80%;
margin-bottom: 25px;
}
header.banner > nav a:link{
font-size: large;
text-decoration: none;
color: white;
padding: 16px 20px;
background-color: yellowgreen;
float: left;
width: 25%;
text-align: center;
}
+2
source to share