I am a new learner of CSS.
There's something I'm doing wrong, regarding the pseudo classes because my code doesn't work.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul.navigationbar {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
}
li.navigationbar {
float: left;
padding: 10px;
}
a.navigationbar:link, a.navigationbar:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a.navigationbar:hover, a.navigationbar:active {
background-color: #7A991A;
}</style>
</head>
<body>
<ul class="navigationbar">
<li class="navigationbar" role="presentation">Inicio</li>
<li class="navigationbar" role="presentation">Proveedores</li>
<li class="navigationbar" role="presentation">ArtÃculos</li>
<li class="navigationbar" role="presentation">Contacto</li>
</ul>
</body>
</html>
Anyone that can tell me what am I doing wrong?
Thank you.
It should be
.navigationbar a:link {
/*some styles*/
}
and
.navigationbar a:visited {
/*some styles*/
}
because the a is a child element of .navigationbar
This a.navigationbar:link, a.navigationbar:visited is not working beacause
the class navigationbar is assigned to the list elementli in your markup not to the anchor a element.
<li class="navigationbar" role="presentation">Inicio</li>
to solve this change it to
[role=presentation] a:link, [role=presentation] a:visited
or to
li.navigationbar a:link, li.navigationbar a:visited
Here is the final demo
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul.navigationbar {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
}
li.navigationbar {
float: left;
padding: 10px;
}
li.navigationbar a:link, li.navigationbar a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a.navigationbar:hover, a.navigationbar:active {
background-color: #7A991A;
}</style>
</head>
<body>
<ul class="navigationbar">
<li class="navigationbar" role="presentation">Inicio</li>
<li class="navigationbar" role="presentation">Proveedores</li>
<li class="navigationbar" role="presentation">ArtÃculos</li>
<li class="navigationbar" role="presentation">Contacto</li>
</ul>
</body>
</html>
Related
Im trying to make a navbar but I am having trouble with the a:hover. only the content box changes color, but I want it to be the content box and the padded area around it. What is happening?
I have tried everything, but for some reason only the content box changes, which looks awful. I am trying to get a full box to change color. I feel like an idiot, can someone look through this and tell me what I am doing wrong?
#container {
box-sizing: content-box;
}
body {
font-family: "avenir light", sans-serif;
}
#container{
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.navbar-links {
max-width: 1090px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.navbar-links a:hover {
background: #831517;
color: #FFFFFF;
}
.navbar-links a {
color: #444444;
text-decoration: none;
text-align: center;
}
.navbar ul {
margin: 0 auto;
padding: 0;
list-style: none;
text-decoration: none;
width: 100%;
}
ul li {
list-style: none;
display: inline-block;
margin-top: 50px;
padding: 20px 20px;
}
.navbar {
background-color: #FFFFFF;
overflow: hidden;
height: 91px;
}
#number {
float: right;
padding-right: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Brushworks NW Inc.</title>
</head>
<body>
<nav class="navbar">
<ul class="navbar-links">
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>GALLERY</li>
<li>CONTACT US</li>
<li id="number">(360)679-4444</li>
</ul>
</nav>
I've moved the padding from li to a
See working code:
#container {
box-sizing: content-box;
}
body {
font-family: "avenir light", sans-serif;
}
#container{
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.navbar-links {
max-width: 1090px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.navbar-links a:hover {
background: #831517;
color: #FFFFFF;
}
.navbar-links a {
color: #444444;
text-decoration: none;
text-align: center;
padding: 20px;
}
.navbar ul {
margin: 0 auto;
padding: 0;
list-style: none;
text-decoration: none;
width: 100%;
}
ul li {
list-style: none;
display: inline-block;
margin-top: 50px;
}
.navbar {
background-color: #FFFFFF;
overflow: hidden;
height: 91px;
}
#number {
float: right;
padding-right: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Brushworks NW Inc.</title>
</head>
<body>
<nav class="navbar">
<ul class="navbar-links">
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>GALLERY</li>
<li>CONTACT US</li>
<li id="number">(360)679-4444</li>
</ul>
</nav>
I have this navbar in html:
<div class="navbar">
<p class ="logo">Vris</p>
<ul class="navitems">
<li>Home</li>
<li>About me</li>
<li>My work</li>
<li>Contact</li>
</ul>
</div>
</header>
And the following css to go along with it:
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
}
.navbar {
background: #181818;
height: 3.5em;
line-height: 1em;
}
.navitems {
float: right;
margin-right: 3em;
}
.logo {
float: left;
font-size: 1.3em;
color: white;
}
li {
font-family: 'Montserrat';
font-size: 1.3em;
text-decoration: none;
list-style-type: none;
padding-right: 2em;
float: left;
}
.navbar a {
text-decoration: none;
color: white;
}
But the UL and elements in the navbar won't take on the same line-height. Why? I set the line-height in the parent navbar class, so the and children should inherit it, right?
If you want to center vertically you need to use the same line-height as it is in height.
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
}
.navbar {
background: #181818;
height: 3.5em;
line-height: 3.5em;
}
.navitems {
float: right;
margin-right: 3em;
}
.logo {
float: left;
font-size: 1.3em;
color: white;
}
li {
font-family: 'Montserrat';
font-size: 1.3em;
text-decoration: none;
list-style-type: none;
padding-right: 2em;
float: left;
}
.navbar a {
text-decoration: none;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="navbar">
<p class ="logo">Vris</p>
<ul class="navitems">
<li>Home</li>
<li>About me</li>
<li>My work</li>
<li>Contact</li>
</ul>
</div>
</header>
</body>
</html>
line-height is one of those weird things that doesn't nest... put the line-height on the li.
Here's a codepen: https://codepen.io/justicart/pen/goJdBx
How do I vertically align the element in this picture?
<html lang="en-us">
<head>
<meta charset="utf-8">
</head>
<style type="text/css">
* {
text-decoration: none;
padding: 0px; margin: 0px;
list-style: none;
}
#headercontainer {
background-color:gray;
}
#headercontainer ul li {
display: inline-block;
}
nav {
margin: 0px 10%;
padding: 10px 0px;
}
#floatedright {
float: right;
}
#floatedright a {
color: darkgreen;
font-size: 20px;
margin: 10px;
}
#floatedright > li {
float: left;
}
#piercarla {
font-size: 48px;
color: white;
font-family: cursive;
}
</style>
<body>
<section id="headercontainer">
<nav>
<ul>
<li>Piercarla</li>
<section id="floatedright">
<li>Home</li>
<li>Events</li>
<li>Contact</li>
</section>
</ul>
</nav>
</section>
you can resolve your problem using this.
I think vertical-align: middle; is suitable for your question.
Just give some class to the three list items Home,Events,Contact class="m", and then style them to give margin-left margin-right to vertically align them accordingly.
I'm having trouble getting the a:hover element to work. I am an amateur, so please be easy... I've tried using the #menubar:hover as well but that doesn't seem to work either.
This code is going into the header of another program. The only reason I got into this was to make the header of this program look identical to the website. Below is my code for the header.
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Events</li>
<li>Specials</li>
</ul>
Please Help!
check this
#menubar li a:hover {
color: yellow;
}
full code :
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
#menubar li a:hover{
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Events</li>
<li>Specials</li>
</ul>
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow !important;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Events</li>
<li>Specials</li>
</ul>
Here the style of a tag is overriding the hover. So if you place it as !important, that style will be given priority than other styles and it will override all other styles. Just place !important at color:yellow and it works.
I wanted to see if I could get this working without an !importance. The issue is that the CSS selector which sets the text to white is using a greater specificity than the hover style. The best way to do this is to set a better level of specificity to the hover which will allow it to work. Use this in the hover.
#menubar li a:hover {
color: yellow;
}
It is because #menubar>li>a{background-color: #303432;} will overlap your css. a:hover{color:yellow;} So, make it important on hover like in answer.
a:hover {color: yellow !important;}
Or
#menubar>li>a:hover{color: yellow;}
Will solve your issue.
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow !important;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Events</li>
<li>Specials</li>
</ul>
Hope it helps.
I'm working on this page but am having trouble figuring a few things out. First question is how do I keep the navigation links from moving on a hover? Second is how do I get the navigation links closer together? I've been trying to figure this out and seem to be missing something. Thanks!!
header{
height: 80px;
color: #ffffff;
border: 3px solid #000000;
background-color: white;
background-repeat: no-repeat
}
header img {
float: left;
width: auto;
height: 230%;
}
nav ul{
list-style: none;
}
nav li {
display: inline;
padding: 5px;
}
nav a{
margin-left: 150px;
}
nav li a{
color: #92d050;
text-decoration: none;
padding: 5px;
}
nav a:hover {
font-weight: bold;
color: black;
}
nav a.current{
color: black;
}
#about{
float: left;
padding-top: 75px;
padding-left: .25em;
width: 300px;
}
the HTML5 sheet is this:
<!doctype html>
<head>
<meta charset="utf-8">
<title>Hair by Sasha </title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="main_print.css" media="print">
</head>
<body>
<header>Hair by Sasha
<img src="images/logo.jpg" alt="Hair by Sasha">
<nav>
<ul>
<li>Home</li>
<li><a href="services.html" >Services</a></li>
<li><a href="about.html" >About Us</a></li>
<li><a href="contact.html" >Contact Us</a></li>
</ul>
</nav>
</header>
Remove
nav a:hover {
font-weight: bold; /* this moving links remove it */
}
And to bring them closer give float to li.