CSS error with header and nav list - Not alignment
This is my first time using stackoverflow and first time trying to create a webpage, please don't lynch me. I am a network engineer by trade, trying my best at some coding.
I am trying to create a basic portfolio web page. header, navbar, image, content and footer. Nothing special. I am having some trouble getting my title to match with my nav. It was ok before I changed the title text "Terry" to oleo. If I keep it as default, it aligns with the navigation text.
How do I resolve this so that my NAvs show up in my header (looks like it's clicked)? Would it be better if I had two divs side by side (as I did with the left column and the right column directly below it? Does it have something to do with using 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>
source to share
You can use display: flex; justify-content: space-between; align-items: center;
in the header to click the name and nav to the sides and center them vertically, keeping them on the same line. Then you don't need to float nav or nav li, so I used display: inline-block
the nav li and redirected them so they are in the same order in the code as they are on the page.
You should probably also remove height: 20%
in the header, and let it be the 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>
source to share
Is this what you want?
body {
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>
source to share