I used another post (positioning an image next to a menu bar with html/css), and it worked well, but now my heading is acting really weird! If you look at the result of the example code in full screen, you'll see some of it is stuck next to my menu bar. May someone please help me? I want my heading to be BELOW my menu bar.
body {
font-family: sans-serif;
}
h1 {
font-family: comic sans ms;
float: top;
}
nav ul {
list-style-type: none;
background-color: blue;
border: 4px solid orange;
border-radius: 500px;
font-family: sans-serif;
font-weight: bold;
padding: 16px;
}
nav ul li {
display: inline;
border-right: 2px solid orange;
padding-right: 8px;
padding-left: 8px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
text-decoration: none;
color: orange;
}
nav {
display: inline;
}
div {
float: left;
}
nav {
float: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link type="text/css" rel="stylesheet" href="css/example.css"/>
<div>
<img src="images/example.jpg">
</div>
<nav>
<ul>
<li>Home</li>
<li>Example</li>
<li>Random</li>
<li>Blah Blah</li>
<li>Other</li>
<li>Something Else</li>
<li>More</li>
</ul>
</nav>
</head>
<body>
<h1>Example Example Example Example Example Example Example</h1>
</body>
</html>
Your html is invalid, you're not supposed to place those html tags inside the <head>. Anyway, I think your css is way too invasive, setting a float for every div on the page? Definitely too aggressive, I removed some of those unnecessary floats and set the nav to be inline-block
body {
font-family: sans-serif;
}
h1 {
font-family: comic sans ms;
}
nav {
display: inline-block;
}
nav ul {
list-style-type: none;
background-color: blue;
border: 4px solid orange;
border-radius: 500px;
font-family: sans-serif;
font-weight: bold;
padding: 16px;
}
nav ul li {
display: inline;
border-right: 2px solid orange;
padding-right: 8px;
padding-left: 8px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
text-decoration: none;
color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link type="text/css" rel="stylesheet" href="css/example.css"/>
</head>
<body>
<div>
<img src="images/example.jpg">
</div>
<nav>
<ul>
<li>Home</li>
<li>Example</li>
<li>Random</li>
<li>Blah Blah</li>
<li>Other</li>
<li>Something Else</li>
<li>More</li>
</ul>
</nav>
<h1>Example Example Example Example Example Example Example</h1>
</body>
</html>
Related
Hello,
I have been making a website recently and I was making a dropdown navigation bar. The thing is, whenever I insert text and hover over my navigation bar, it does not cover the text. I have searched along Stack Overflow for a little bit now, and everything I've tried hasn't worked. I have tried "position: absolute;", "z-index: 1000;" etc. I was wondering if I made my own forum, someone could possibly help me out. Internet Explorer, Google Chrome, and Microsoft Edge all do not work. Thank you for responding.
/*Title*/
html, body {
margin: 0;
padding: 0;
font-family: Cursive, Sans-Serif;
}
#header {
width: auto;
height: 10px;
padding: 1% 1% 1% 2%;
background-color: #5e0d0d;
box-shadow: 1px 1px 2px 2px #262626;
}
#header #title {
font-family: "Open Sans", "Segoe UI";
font-size: 150%;
font-weight: lighter;
color: #fff;
text-decoration: none;
float: left;
margin-top: -.65%;
}
/*Navigation Bar*/
ul {
font-family: Arial;
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-top: -.60%
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: #911515;
z-index: 1000;
}
<!DOCTYPE html>
<html>
<head>
<title>Slasher Hub - Latest</title>
<meta name="viewport" content="width:device-width; initial-scale:1;">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header">
Slasher Hub
<nav>
<ul>
<li style="margin-left: 40px;"><a>Home</a></li>
<li><a>About Me</a></li>
<li><a>Slasher Dev Team</a>
<ul>
<li><a>About Us</a></li>
<li><a>Contact</a></li>
<li><a>News</a></li>
<li><a>Recent</a></li>
</ul>
</li>
<li><a>Gallary</a></li>
</ul>
</nav>
</header>
<h3>Welcome to the Slasher Hub! This is the latest stuff going on with Slasher now!</h3>
</body>
</html>
To make z-index work you have to add position:absolute to the element.
ul li a:hover {
background-color: #911515;
z-index: 1000;
position: absolute; }
Overall, all you had to do was add position: relative to either your <nav> or <header> element.
/*Title*/
html,
body {
margin: 0;
padding: 0;
font-family: Cursive, Sans-Serif;
}
#header {
width: auto;
height: 10px;
padding: 1% 1% 1% 2%;
background-color: #5e0d0d;
box-shadow: 1px 1px 2px 2px #262626;
}
#header #title {
font-family: "Open Sans", "Segoe UI";
font-size: 150%;
font-weight: lighter;
color: #fff;
text-decoration: none;
float: left;
margin-top: -.65%;
}
/*Navigation Bar*/
ul {
font-family: Arial;
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-top: -.60%
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: #911515;
z-index: 1000;
}
/* Here's the change */
header {
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<title>Slasher Hub - Latest</title>
<meta name="viewport" content="width:device-width; initial-scale:1;">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header">
Slasher Hub
<nav>
<ul>
<li style="margin-left: 40px;"><a>Home</a></li>
<li><a>About Me</a></li>
<li><a>Slasher Dev Team</a>
<ul>
<li><a>About Us</a></li>
<li><a>Contact</a></li>
<li><a>News</a></li>
<li><a>Recent</a></li>
</ul>
</li>
<li><a>Gallary</a></li>
</ul>
</nav>
</header>
<h3>Welcome to the Slasher Hub! This is the latest stuff going on with Slasher now!</h3>
</body>
</html>
I also modified your <nav> menu a bit to give you some ideas of an overall setup.
/*Title*/
html,
body {
margin: 0;
padding: 0;
font-family: Cursive, Sans-Serif;
}
#header {
width: auto;
/* height: 10px; Remove the height */
display: inline-block; /* Set the display */
padding: 1% 1% 1% 2%;
background-color: #5e0d0d;
box-shadow: 1px 1px 2px 2px #262626;
}
#header #title {
font-family: "Open Sans", "Segoe UI";
font-size: 150%;
font-weight: lighter;
color: #fff;
text-decoration: none;
float: left;
margin-top: -.65%;
}
/*Navigation Bar*/
/* Make the position of the container relative to have it sit above the content */
nav {
position: relative;
}
/* Add nav to each of the navigation bar selectors to be more specific */
nav ul {
font-family: Arial;
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
}
nav li a {
text-decoration: none;
color: white;
display: block;
}
nav li:not(.top-level) a {
background-color: #5e0d0d;
}
nav li:not(.top-level) a:hover {
background-color: #911515
}
nav li.top-level > ul {
display: none;
}
nav li.top-level:hover > ul {
display: block;
}
<header id="header">
Slasher Hub
<nav>
<ul>
<li class="top-level">Home</li>
<li class="top-level">About Me</li>
<li class="top-level">Slasher Dev Team
<ul>
<li>About Us</li>
<li>Contact</li>
<li>News</li>
<li>Recent</li>
</ul>
</li>
<li class="top-level">Gallary</li>
</ul>
</nav>
</header>
<h3>Welcome to the Slasher Hub! This is the latest stuff going on with Slasher now!</h3>
Let me know if you have any questions.
I'm new to HTML and CSS and I'm making my first website. I came across this issue in my project and I can't find the way to solve it. For some reason, my navbar isn't sitting on the top of my page. I also want to know how I can centre my image and also text so it's inline with the box.
CSS/HTML
body {
margin: 0;
padding: 0;
font-family: 'Arial', serif;
background-color: #232323
}
.nav {
background-color: #b73844;
color: #FFFFFF;
list-style: none;
text-align: left
}
.nav > li {
display: inline-block;
padding-right: 25px;
}
.nav > li > a {
text-decoration: none;
color: #ffffff;
}
.nav > li > a:hover {
color: #ffffff;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AccountPanda - Home</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<ul class="nav">
<a href="index.html">
<img src="images/logo.png" title="AccountPanda" style="width:225px;height:75px;">
</a>
<li>Accounts</li>
<li>About</li>
<li>FAQ</li>
</ul>
</body>
</html>
vertical-align: middle and line-height: 0 is what you're looking for.
.nav > li {
display: inline-block;
padding-right: 25px;
vertical-align: middle;
line-height: 0;
}
I also wrapped the <a> that holds the image with a li, so all items in the ul are li:
<ul class="nav">
<li>
<a href="index.html">
<img src="//placehold.it/225x75" title="AccountPanda" style="width:225px;height:75px;">
</a>
</li>
<li>Accounts</li>
<li>About</li>
<li>FAQ</li>
</ul>
Plunker Demo here: http://plnkr.co/edit/PUpoQcGn6qexWD1hkDKF?p=preview
Using flex you can align it center. Also your class nav is on a ul element which has its default properties like margin, padding etc. You can either override them or use them. See below.
/* CSS Document */
body {
margin: 0;
padding: 0;
font-family: 'Arial', serif;
background-color: #232323
}
.nav {
background-color: #b73844;
color: #FFFFFF;
list-style: none;
text-align: left;
margin: 0;
display: flex;
align-items: center;
padding: 10px;
}
.nav > li {
display: inline-block;
padding-right: 25px;
}
.nav > li > a {
text-decoration: none;
color: #ffffff;
}
.nav > li > a:hover {
color: #ffffff;
}
<body>
<ul class="nav">
<a href="index.html">
<img src="images/logo.png" title="AccountPanda" style="width:225px;height:75px;">
</a>
<li>Accounts</li>
<li>About</li>
<li>FAQ</li>
</ul>
</body>
I am trying to use CSS so when you hover on something it changes background colors. The code I am using does not work though. I can't seem to find out why though. It should work, right?
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
}
li a :hover {
background-color: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
Please help!
Adjust your on-hover rule slightly and consider the a element as well:
li:hover, li:hover a {
background: blue;
}
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
transition: .7s;
}
li:hover, li:hover a {
background: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
You have a VERY simple mistake.
When you have this code...
li a: hover
remove the space between a and :hover and see the magic.
Now, it should look like this.
li a:hover
#Joseph Young mentioned this, don't forget to upvote his comment.
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
}
li a:hover {
background-color: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.wrapper {
padding-top: 10px;
width: 320px;
margin: 0 auto;
overflow: hidden;
}
.menu {
background: #093;
}
.menu ul {
margin-left: 0;
list-style: none;
text-align: center;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
display: block;
padding: 10px;
color: #CC0;
text-decoration: none;
}
.menu ul li a:hover {
background: #C30;
color: #FFF;
}
<div class="wrapper">
<div class="menu">
<ul>
<li>HOME
</li>
<li>CONTACT
</li>
<li>ABOUT
</li>
</ul>
</div>
I'm a little new to HTML as my classes has recently started and etc. In our task we have to hand in a website that has different characteristics, one of them being a drop down menu.
I managed to almost get it all working, but when I tried to hover my mouse over one of the navigation menu tags, the drop down menu is a little bit to the left like it would be as a listing object?
Here is how it shows up
This is how it looks when I hover over About
I have no idea what I'm doing wrong! I tried to do some research where I ended up centering my navigation menu, but that was all I managed to do! What do I have to do to make it be aligned with the "About" tag?
p {
font-size: 44px;
color: white;
font-family: verdana;
background-color: #333;
text-align: center;
}
p2 {
font-size: 12px;
color: white;
font-family: verdana;
}
body {
background-image: url(background.jpg);
}
div {
margin-left: 400px;
margin-right: 400px;
margin-top: 30px;
border: solid white 3px;
background-color: #333;
}
div2 {
margin-left: auto;
margin-right: auto;
width: 6em;
}
#nav {
text-align:center;
}
#nav ul {
display:inline-block;
}
#nav a {
float:left;
text-decoration:none;
padding:0 30px;
}
ul {
background-color: #333;
font-family: verdana;
}
ul li {
display: inline;
background-color: #333;
font-size: 24px;
height: 47px;
width: 200px;
line-height: 47px;
text-align: center;
float: left;
list-style: none;
}
ul li a {
color: white;
text-decoration: none;
display: block;
}
ul li a:hover {
background-color: white;
}
ul li a:active{
background-color: #333;
color: #333
}
ul li ul li {
display: none;
}
ul li:hover ul li{
display: block;
}
.active {
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<title>Sleepless hub</title>
</head>
<body>
<div> <!-- Denne er med for å kun skape en fin designer strek ;) -->
</div>
<div>
<p>There is nothing like a good nut </p>
</div>
<div> <!-- Samme her. -->
</div>
<div id="nav">
<ul>
<li> Home</li>
<li> About
<ul>
<li> <a href="#">Wikipedia</li>
</ul>
</li>
<li> Projects</li>
<li> Contact me</li>
<li> Fun Room</li>
</div>
<div>
<p>Okay</p>
</div>
</body>
</html>
Issue is because of padding you have for the child ul and anchor tag. If you remove those it will align properly. Try to add the classes to the child elements, as this is not the proper way to write the css.
p {
font-size: 44px;
color: white;
font-family: verdana;
background-color: #333;
text-align: center;
}
p2 {
font-size: 12px;
color: white;
font-family: verdana;
}
body {
background-image: url(background.jpg);
}
div {
margin-left: 400px;
margin-right: 400px;
margin-top: 30px;
border: solid white 3px;
background-color: #333;
}
div2 {
margin-left: auto;
margin-right: auto;
width: 6em;
}
#nav {
text-align:center;
}
#nav ul {
display:inline-block;
}
#nav a {
float:left;
text-decoration:none;
padding:0 30px;
}
ul {
background-color: #333;
font-family: verdana;
}
ul li {
display: inline;
background-color: #333;
font-size: 24px;
height: 47px;
width: 200px;
line-height: 47px;
text-align: center;
float: left;
list-style: none;
}
ul li a {
color: white;
text-decoration: none;
display: block;
}
ul li a:hover {
border: 1px solid red;
}
ul li a:active{
background-color: #333;
color: #333
}
ul li ul li {
display: none;
}
ul li ul{
padding-left: 0;
}
ul li:hover ul li{
display: block;
}
.active {
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<title>Sleepless hub</title>
</head>
<body>
<div> <!-- Denne er med for å kun skape en fin designer strek ;) -->
</div>
<div>
<p>There is nothing like a good nut </p>
</div>
<div> <!-- Samme her. -->
</div>
<div id="nav">
<ul>
<li> Home</li>
<li> About
<ul>
<li> <a href="#">Wikipedia</li>
</ul>
</li>
<li> Projects</li>
<li> Contact me</li>
<li> Fun Room</li>
</div>
<div>
<p>Okay</p>
</div>
</body>
</html>
What I've done is I placed   a lot of times but when you change the size of the window, the logout button does not stay put.How do you make the logout button stay in the rightmost portion of the navigation bar besides using the   code? Thanks
Try This
<!DOCTYPE html>
<html>
<head>
<style>
div.horizontal ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
div.horizontal {
width: 100%;
height: 30px;
background-color: #98BF21;
}
div.horizontal li {
float: left;
}
div.horizontal a:link, div.horizontal a:visited {
font-weight: bold;
color: #FFF;
background-color: #98BF21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
div.horizontal a {
display: block;
width: 100px;
}
li.last
{
float:right !important;
}
</style>
</head>
<body>
<div class="horizontal">
<ul>
<li>Home</li>
<li>News</li>
<li>Articles</li>
<li>Forum</li>
<li>Contact</li>
<li>About</li>
<li class="last">Logout</li>
</ul>
</div>
</body>
</html>