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>
Related
been trying to do a Nav bar, though through live stream it the #.media command does not effect my coding, no idea why. it should just keep a home sign in mobile state, though it does not effect it all. using chrome browsers, Brackets.
help me please.
----------------------------------------------------------------------- css stylesheet
/*#################Defults############*/
nav,
header,
footer {
display: block;
}
body {
line-height: 1;
margin: 0;
}
/*################Nav Bar##################*/
nav {
width: 100%;
margin: 0;
}
nav ul {
background-color: #eee;
overflow: hidden;
margin: 0;
padding: 0;
}
ul.topnav li {
list-style: none;
float: left;
}
ul.topnav li.topnav-right {
float: right;
}
ul.topnav li a {
display: block;
text-decoration: none;
min-height: 16px;
text-align: center;
padding: 14px;
text-transform: uppercase;
color: #666;
}
ul.topnav li a:hover {
background-color: #0080ff;
color: #fff;
}
ul.topnav li.dropdownIcon {
display: none;
}
/*################# mobile #############*/
u/media screen and (max-width: 680px) {
ul.topnav li:not(:nth-child(1)) {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<title> MY CSS website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul class="topnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="topnav-right">Sign Up</li>
<li class="topnav-right">Sign In</li>
<li class="dropdownIcon"><a href="">\☰
</a></li>
</ul>
</nav>
</body>
</html>
Seems to work fine for me. Try this code and you should also include <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your head
----------------------------------------------------------------------- css stylesheet
/*#################Defults############*/
nav,
header,
footer {
display: block;
}
body {
line-height: 1;
margin: 0;
}
/*################Nav Bar##################*/
nav {
width: 100%;
margin: 0;
}
nav ul {
background-color: #eee;
overflow: hidden;
margin: 0;
padding: 0;
}
ul.topnav li {
list-style: none;
float: left;
}
ul.topnav li.topnav-right {
float: right;
}
ul.topnav li a {
display: block;
text-decoration: none;
min-height: 16px;
text-align: center;
padding: 14px;
text-transform: uppercase;
color: #666;
}
ul.topnav li a:hover {
background-color: #0080ff;
color: #fff;
}
ul.topnav li.dropdownIcon {
display: none;
}
/*################# mobile #############*/
#media screen and (max-width: 680px) {
ul.topnav li:not(:nth-child(1)) {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<title> MY CSS website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul class="topnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="topnav-right">Sign Up</li>
<li class="topnav-right">Sign In</li>
<li class="dropdownIcon"><a href="">\☰
</a></li>
</ul>
</nav>
</body>
</html>
I've ran into a problem that I'm not sure how to fixed and I believe it may have to do with the position? I've tried to look up solutions but still can't figure out why this is happening.
So I am trying to put my header (name) in my fixed navigation bar. When I attempt to do this, the header is sitting behind the grey background colour...
How can I bring the header to be on top of the background? I want the header to be fixed with the navigation bar.. thanks so much in advance!
html {
margin: 0;
background: #ffffff;
}
body {
margin: 0;
background: #ffffff;
}
/*---font---*/
#font-face {
font-family: open-sans;
src: url('open-sans.regular.ttf');
}
#font-face {
font-family: Prata-Regular;
src: url('Prata-Regular.ttf');
}
#font-face {
font-family: Frontage-Outline;
src: url('Frontage-Outline.otf');
}
/*---nav bar---*/
h1 {
display: inline-block;
float: left;
position: fixed;
z-index: -1;
}
ul {
list-style-type: none;
background-color: #F5F5F5;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
display: inline-block;
}
li {
float: right;
}
li a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: open-sans;
}
li a:hover:not(.active) {
color: #555555;
}
.active {
color: #000;
}
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--nav bar-->
<div class="navbar">
<div class="bar">
<h1>cindy le</h1>
<ul>
<li>about</li>
<li>work</li>
<li>contact</li>
</ul>
</div>
</div>
</body>
</html>
Change z-index of h1 to 1
html {
margin: 0;
background: #ffffff;
}
body {
margin: 0;
background: #ffffff;
}
/*---font---*/
#font-face {
font-family: open-sans;
src: url('open-sans.regular.ttf');
}
#font-face {
font-family: Prata-Regular;
src: url('Prata-Regular.ttf');
}
#font-face {
font-family: Frontage-Outline;
src: url('Frontage-Outline.otf');
}
/*---nav bar---*/
h1 {
display: inline-block;
float: left;
position: fixed;
z-index: 1; /* Change to 1*/
}
ul {
list-style-type: none;
background-color: #F5F5F5;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
display: inline-block;
}
li {
float: right;
}
li a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: open-sans;
}
li a:hover:not(.active) {
color: #555555;
}
.active {
color: #000;
}
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--nav bar-->
<div class="navbar">
<div class="bar">
<h1>cindy le</h1>
<ul>
<li>about</li>
<li>work</li>
<li>contact</li>
</ul>
</div>
</div>
</body>
</html>
The best way to do this is to fix the navbar div and then float a div to the left and include the h1 tag and a div to the right and include the ul. I wouldn't float the h1 and the ul. Something like below:
.navbar{
position: fixed;
width: 100%;
top: 100%;
left: 100%;
background-color: #f5f5f5;
}
.navbar-left{
float left;
text-align: left;
}
.navbar-right{
float: right;
text-align: right;
}
.navbar ul{
display: inline-block;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.navbar ul li{
float: left;
}
.navbar ul li a{
display: block;
padding: 14px 16px;
color: #555555;
font-family: open-sans;
}
.navbar ul li a:hover{
color: #000;
}
.clear{
clear: both;
}
<div class="navbar">
<div class="navbar-left">
<h1>header text</h1>
</div>
<div class="navbar-left">
<ul>
<li>about</li>
<li>work</li>
<li>contact</li>
</ul>
</div>
<div class="clear"></div>
</div>
Sorry about formatting. Used mobile phone to post.
I'm trying to make the navigation bar for my personal site. I'm using flexbox because it's the only (pure CSS) solution I've found so far where the dropdown plays nicely with the link background color.
I'm trying to position the dropdown so that it floats over the content when opened. I tried setting the main nav li elements to have position: relative, then setting position: absolute and z-index: 1 for .dropdown ul , which technically works, but it breaks the grey background color for the link. I also tried using blocks, but it still looks bad either way. Does anyone know a pure CSS solution for this?
body {
font-family: 'Roboto', 'Helvetica', sans-serif;
background-color: black;
margin: 0 auto;
color: white;
}
.container {
display: flex;
flex: auto;
}
/*** NAV ***/
.navbar {
font-family: 'Zilla Slab', serif;
font-size: 16pt;
}
.navbar ul {
list-style: none;
padding: 0 0;
margin: 0 0;
}
.navbar a {
text-decoration: none;
color: white;
}
.navbar ul li {
padding: 5px;
position: relative;
}
.navbar li:hover {
background-color: grey;
transition: ease-in-out .25s;
}
.dropdown ul {
margin: 0;
display: none;
}
.dropdown ul li {
padding: 2px 0;
z-index: 1;
}
.dropdown:hover ul, .dropdown ul:hover {
display: flex;
flex-direction: column;
}
/*** CONTENT ***/
.content {
display: block;
position: relative;
z-index: -1;
margin-left: 0;
background-color: orange;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="author" content="Ariel Mordoch">
<meta name="description" content="The personal website of Ariel Mordoch.">
<title>Ariel Mordoch</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar">
<nav>
<ul class="container">
<li>ariel mordoch</li>
<li>about</li>
<li>resume</li>
<li>contact</li>
<li class="dropdown">drop
<ul class="container">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="content">
<p>placeholder</p>
</div>
</main>
</body>
</html>
jsfiddle: http://jsfiddle.net/eq6o3yp5/8/
When you position it as absolute, the relative element do not get 'stretched' or resized, and so, that is why the background of the relative element do not reflect on the absolute positioned element.
Position it as absolute and give it a width, perhaps a min-width... and set a desired background-color or set it background-color: inherit;
.dropdown:hover ul, .dropdown ul:hover {
...
background-color: grey;
min-width: 100%;
position: absolute;
}
body {
font-family: 'Roboto', 'Helvetica', sans-serif;
background-color: black;
margin: 0 auto;
color: white;
}
.container {
display: flex;
flex: auto;
}
/*** NAV ***/
.navbar {
font-family: 'Zilla Slab', serif;
font-size: 16pt;
}
.navbar ul {
list-style: none;
padding: 0 0;
margin: 0 0;
}
.navbar a {
text-decoration: none;
color: white;
}
.navbar ul li {
padding: 5px;
position: relative;
}
.navbar li:hover {
background-color: grey;
transition: ease-in-out .25s;
}
.dropdown ul {
margin: 0;
display: none;
}
.dropdown ul li {
padding: 2px 0;
z-index: 1;
}
.dropdown:hover ul, .dropdown ul:hover {
display: block;
position: absolute;
background-color: grey;
left: 0;
min-width: 100%;
position: absolute;
}
/*** CONTENT ***/
.content {
display: block;
position: relative;
z-index: -1;
margin-left: 0;
background-color: orange;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="author" content="Ariel Mordoch">
<meta name="description" content="The personal website of Ariel Mordoch.">
<title>Ariel Mordoch</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar">
<nav>
<ul class="container">
<li>ariel mordoch</li>
<li>about</li>
<li>resume</li>
<li>contact</li>
<li class="dropdown">drop
<ul class="container">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="content">
<p>placeholder</p>
</div>
</main>
</body>
</html>
I am trying to center my ul, but I can't seem to get it to center. I have tried using display: table margin: 0 auto That puts the ul in the middle, but not exactly in the center. I have also tried using display: block with margin: 0 auto but that doesn't center it either
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Droplet Games - Official Site</title>
<link rel="stylesheet" href="css/styles-index.css">
</head>
<body>
<header>
<h1>DROPLET GAMES</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Games</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</html>
You can add this rule to the <ul>:
display: inline-block;
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Droplet Games - Official Site</title>
<link rel="stylesheet" href="css/styles-index.css">
</head>
<body>
<header>
<h1>DROPLET GAMES</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Games</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</html>
I assume that the issue isn't so much that you want the ul element centered, but rather you want the menu items (the li items) inside the ul to be centered.
The entire issue is solved by simply changing the style on your li from float:left to display:inline-block. See below.
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
display:inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Droplet Games - Official Site</title>
<link rel="stylesheet" href="css/styles-index.css">
</head>
<body>
<header>
<h1>DROPLET GAMES</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Games</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</html>
Updated answer: use flexbox
For the best control over spacing of elements in a column or a row, I'd recommend using flexbox now that it has widespread browser support.
To use flexbox here, set display: flex; on the ul, making it the flex container. By default, this will make the ul act as a row with the li acting as flex items within that row. CSS Tricks has a great guide about using flexbox.
I've left my original answer which uses display: inline-block; below.
Original answer
Sounds like display: inline-block; is exactly what you need.
As the name alludes, an element with display: inline-block; acts as if it's an inline element as far as its parent is concerned, and internally it acts like a block element.
Its use here requires a container with width: 100%; and text-align: center;. I've used the <nav> element below. The <ul> can then be given display: inline-block; to achieve the effect you want.
You can also use display: inline-block; in combination with display: inline; for the <li> and their child <a> elements as follows, in order to avoid the float: left; use.
li {
display: inline;
}
li a {
display: inline-block;
...
}
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
}
li {
display: inline;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
nav {
width: 100%;
margin: 0 auto;
text-align: center;
}
<header>
<h1>DROPLET GAMES</h1>
<nav>
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>Games
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
</header>
whenever i hover over the currently selected menu item its color changes i want to prevent that. here my code.
<html>
<head>
<title> Another Page </title>
<link rel="stylesheet" href="style4.css" type="text/css" />
<head>
<body>
<div id="title">
<ul>
<li class="current">Home</li>
<li>Content</li>
<li>Search</li>
</ul>
<div id="clear">
</div>
</div>
<div id="wrapper">
<div id="header">
</div>
</div>
</body>
</html>
and here's the css
body
{
padding: 0;
margin: 0;
background-color: rgb(24,205,20);
}
h1,h2,h3
{
padding: 0;
margin: 0;
}
p
{
padding: 0;
margin: 0;
}
.current
{
background-color: black;
}
#title
{
background-color: orange;
}
#title ul
{
list-style: none;
padding: 0;
margin: 0;
}
#title li
{
float: left;
}
#title a
{
text-transform: uppercase;
text-align: center;
text-decoration: none;
display: block;
width: 120px;
font-weight: bold;
color: #ffffff;
padding: 4px;
}
#title a:hover
{
background-color: rgb(180,138,18);
}
#clear
{
clear: both;
}
need some urgent suggestions on solving this issue.
Thank you.
Add this line to the end of your CSS file:
#title .current a:hover {
background-color: inherit;
}