Menu
This is my first time using stackoverflow and first time attempt at developing a webpage please don't lynch me. I am a network engineer by trade trying my hand at some coding.
I'm trying to build a basic portfolio webpage. header, nav, image,content and footer. Nothing too fancy. I am having some issues getting my header to line up with my nav. Was ok before I change the header text 'Terry' to the oleo font.If I keep it as default it lines up with the nav text.
How do I resolve this so my NAv shows in my header (it looks like its pushed down)? Would I have been better having two divs side by side, (as I have done with a left column and right column directly below? Is it something to do with the use of floats?
Any advice would be great!
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: inherit;
}
#container {
width: 100%;
height: inherit;
background-color: green;
}
#nav li {
float: right;
font-family: Courier;
padding: 15px;
}
.navli {
display: inline;
list-style-type: none;
font-family: "Brush Script MT", cursive;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: bold;
line-height: 26.4px;
text-decoration: none;
}
a {
text-decoration: none;
}
#banner {}
#leftcolumn {
width: 40%;
background-color: yellow;
height: 75%;
float: left;
}
#rightcolumn {
width: 60%;
background-color: grey;
height: 75%;
float: right;
}
#header {
background-color: #6495ed;
width: 100%;
height: 20%;
float: left;
font: 200 100px/1.3 'Oleo Script', Helvetica, sans-serif;
color: white;
text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
}
#footer {
background-color: #6495ed;
height: 15%;
width: 100%;
}<link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>
<script src="C:\Users\nick.szilagyi\Desktop\PROJECT\JS\jquery-3.2.1.min.js"></script>
<script src="C:\Users\nick.szilagyi\Desktop\PROJECT\JS\jquery-ui-1.12.1.custom\jquery-ui.js"></script>
<div id="container">
<div id="header">
Terry
<div id="nav">
<ul class="navli">
<li><a href="#">Contact</a></li>
<li><a href="#">Teaching</a></li>
<li><a href="#">My research</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
</div>
<div id="leftcolumn">left</div>
<div id="rightcolumn">right</div>
<div id="footer">Footer</div>
</div>
946
asked Mar 03 '26 18:03
You can use display: flex; justify-content: space-between; align-items: center; on the header to push the name and nav to the sides and center them vertically while keeping them on the same line. Then no need to float your nav or the nav li's, so I used display: inline-block on the nav li's instead and re-ordered them so they are in the same order in the code as they display on the page.
You should probably also remove the height: 20% on the header and let it be it's natural height, but you didn't ask about that so I didn't change it.
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: inherit;
}
#container {
width: 100%;
height: inherit;
background-color: green;
}
#nav li {
font-family: Courier;
padding: 15px;
display: inline-block;
}
.navli {
list-style-type: none;
font-family: "Brush Script MT", cursive;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: bold;
line-height: 26.4px;
text-decoration: none;
}
a {
text-decoration: none;
}
#banner {}
#leftcolumn {
width: 40%;
background-color: yellow;
height: 75%;
float: left;
}
#rightcolumn {
width: 60%;
background-color: grey;
height: 75%;
float: right;
}
#header {
background-color: #6495ed;
width: 100%;
height: 20%;
font: 200 100px/1.3 'Oleo Script', Helvetica, sans-serif;
color: white;
text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
#footer {
background-color: #6495ed;
height: 15%;
width: 100%;
}<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='stylesheetterry.css' />
<link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>
<script src="C:\Users\nick.szilagyi\Desktop\PROJECT\JS\jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<div>Terry</div>
<div id="nav">
<ul class="navli">
<li><a href="#">Home</a></li>
<li><a href="#">My research</a></li>
<li><a href="#">Teaching</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="leftcolumn">left</div>
<div id="rightcolumn">right</div>
<div id="footer">Footer</div>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
