Nav Bar!!!!!!
- Thomas Spencer
- May 16, 2021
- 1 min read
I tried and pushed really hard and I got a nav bar! When I hover over the link names, the background changes colour. Unfortunately you won't be able to see that. It was a pain lining up the picture on the far right. At first the the top border hugged the top but the bottom boarder didn't hug the bottom of the navigation bar; So it didn't look centered. As it is now, there is still white space at the top though. I haven't figured out how to get rid of that. To be honest, there was some copy and pasting to do this. It was complicated for me. I decided to take a break and focus on my course at school for a bit. or wait until I had some more energy. It's one thing to just put in tags, but another to understand the concept of what I am doing. I know this will be covered in an organized way on my course.
<!DOCTYPE html>
<html>
<head>
<title>AUM 108</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: blue;
font-size: 25px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 30px;
text-decoration: none;
}
li a:hover {
background-color: grey
}
</style>
</head>
<body style="background-color:white;">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#asanas">Asanas</a></li>
<li><a href="#breathwork">Breathwork</a></li>
<li><a href="#Pranayama">Pranayama</a></li>
<li><a href="#Meditation">Meditation</a></li>
<li><a href="#Mindfulness">Mindfullness</a></li>
<img style="float: right;" src="https://scontent-yyz1-1.xx.fbcdn.net/v/t1.6435-9/178343571_3719467201495361_3939036074400110872_n.jpg?_nc_cat=106&ccb=1-3&_nc_sid=09cbfe&_nc_ohc=Dswq0Sj_7uAAX820v0Y&_nc_ht=scontent-yyz1-1.xx&oh=405f15f781262ba7918e57ea3d685ecf&oe=60ACF269" alt="me" width:"50" height="100">
</ul>
</body>
</html>
Comments