So I have a vertical navbar, and I haven't been able to center the tabs. The text is too far off to the right, and when I hover over it, the highlighted box doesn't extend to the margins. My code is below:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Matthew H. Goodman</title>
<link href="style2home.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ul id="nav">
<li>HOME</li>
<li>CV</li>
<li>RESEARCH</li>
<li>CONTACT</li>
</ul>
</body>
</html>
CSS:
#nav {
margin-top: 200px;
left: 0;
width: auto;
height: auto;
border-radius: 10px;
position: absolute;
background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg");
}
#nav li {
position: relative;
list-style: none;
padding: 15px;
width: auto;
}
#nav li a {
position: relative;
display: block;
text-decoration: none;
font-size: 15px;
font-weight: bold;
color: white;
text-align: center;
}
#nav li a:hover {
color: #778899;
background-color: black;
}
Browsers, and some CSS resets add default rules to elements like UL/OL to keep style-less html elements looking consistent.
ul#nav { padding-left: 0; }
I would recommend using a CSS reset (normalize, eric meyer's reset, etc) to allow you to start from scratch.
Use chrome/firefox/ie11 dev tools (F12, or right click and inspect element), go to the element in the window and hover over it to see the margin/padding rules. Scroll down the CSS rules on the right side to find where they are being applied Or click on 'computed styles' to see all the rules.
For the hover states,
you need to apply your hover to the li and handle the color separately
#nav li:hover { background-color: black; }
#nav li:hover a { color: #778899; }
You also need to add
#nav { overflow: hidden; }
to maintain your border-radius
You have some padding being applied to your #nav element you can fix it by adding:
#nav {padding:0px;}
To make the background cover the entire line add more padding to a and remove padding from the li with the current markup that will do the trick.
li {padding:0px;}
a {padding:15px;}
you can insted add a hover state to the li element but that but that will cause some problems with being able to click the a element correctly.
Related
I'm trying to make a sample website about photography, and as I start with my navigation bar, I have come to the issues of the background color not working. I have tried many things like putting an Id to call my nav on my CSS file. I have also tried using div, nav or even using a class and it won't work. I am sorry if this might be an easy fix but I am new to this.
body , html {
background-color: #F7FDFF;
}
div {
background-color: #000;
}
ul {
list-style-type: none;
}
li a {
display: block;
}
ul li a {
text-decoration: none;
float: right;
text-align: right;
color: black;
padding: 1.5em;
}
li a:hover{
display: block;
background-color: #B5B5B5;
color: #000;
}
.active {
background-color: green;
}
#navbar {
background-color: rgb(18, 171, 209);
}
<div>
<nav id="navbar">
<ul>
<li class="active">Home</li>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
Because your anchor tags are floated and there are no other non floated elements, your nav element collapsed. To fix these follow below steps.
Create a clearfix class like this. It will stop your nav element from collapsing.
.clearfix::after {
content: " ";
display: block;
height: 0;
clear: both;
}
and add this class to your nav element
Remove the float: right; rule from your anchor element, aka from ul li a selector. Right now, because of this rule, your last element becomes the first menu, aka "Contact" became first menu and "Home" became last. To understand why this happend read this.
Add a new rule float: left; for your li element. If you don't add this rule, your li elements each will take a seperate line, because by default li elements are block level elements. To keep them in the same line you have to add this rule. You can also add display: inline-block to change its default display property from block to inline to keep them in the same line. But there is a small problem with this solution, you will notice a small gap between inline-block elements. If those small gaps are not a problem for your design then go ahead and use display: block; rule, otherwise use float: left;. (To understand the difference hover over the menu next to the active menu)
Add two more rules float: right; and margin: 0; for your ul element. This will move your menu to the right as you intended. margin: 0; is there to remove the extra margins. You can change/delete this rule as per your design.
<!DOCTYPE html>
<html>
<head>
<link href="Css/Stylesheets.css" rel="stylesheet">
<meta charset= utf-8>
<meta name="viewport" content="width= device-width, initial-scale=1.0">
<title>LTphotography</title>
</head>
<style>
body , html {
background-color: #F7FDFF;
}
div {
background-color: #000;
}
ul {
list-style-type: none;
float: right;
margin: 0;
}
li {
float: left;
}
li a {
display: block;
}
ul li a {
text-decoration: none;
text-align: right;
color: black;
padding: 1.5em;
}
li a:hover{
display: block;
background-color: #B5B5B5;
color: #000;
}
.active {
background-color: green;
}
#navbar {
background-color: rgb(18, 171, 209);
}
.clearfix::after {
content: " ";
display: block;
height: 0;
clear: both;
}
</style>`
<body>
<div>
<nav id="navbar" class="clearfix">
<ul>
<li class="active">Home</li>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
</html>
Your containing li's are collapsing because they contain floated content. You need to add a clearfix to your li items.
.clearfix::after {
content: "";
clear: both;
display: table;
}
<ul>
<li class="clearfix"></li>
// and so on
</ul>
https://www.w3schools.com/howto/howto_css_clearfix.asp
That said, you can also simply remove float: right from your anchor elements. It shouldn't be necessary.
I found this menu sample on W3Schools. I'm trying to create a menu bar on my MVC layout page. My was looking very sloppy and I liked how this one looks. I pasted it into my website and it works as shown, but I don't understand how it is being styled. I don't see any height or vertical alignment settings. Is it the padding style that does it? Are ul and li tags commonly used for this kind of menu? I would have used something like a span tag to do this and not ul or li tags.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li style="float:right">About</li>
</ul>
</body>
</html>
The height is being set by the default CSS styling in addition to some padding applied to the links. The default CSS height for the ul element is auto, meaning that it will fill space (i.e. be as tall) as its children.
What this means is that it is taking the font-size / line-height of the links and adding padding, which is 14px on both top and bottom. That height becomes the height of the entire list / navigation bar.
I was able to create a drop down menu, but unable to center the text. Its
as if padding-left is set but I didn't set it. I just need help centering
the text in the drop down menu.
//drop down menu
<!DOCTYPE html>
<html>
<head>
<style>
.menu {
background-color:grey;
padding: 5px;
}
.menu li {
list-style:none;
padding: 3px;
}
.menu a {
text-decoration: none;
color: black;
}
.menu > li {
display:inline;
}
.dropmenu {
display:none;
float:right;
position:relative;
top:18px;
left:-422px;
}
.dropdown:hover > .dropmenu {
display:block;
}
.dropmenu {
background-color:grey;
}
</style>
</head>
<body>
<ul class = "menu">
<li>HOME</li>
<li>ABOUT</li>
<li class = "dropdown">SPORTS
<ul class = "dropmenu">
<li>NBA</li>
<li>NFL</li>
<li>MLB</li>
</ul>
</li>
<li>CONTACTS</li>
<li>BLOG</li>
</ul>
</body>
</html>
First, use text-align: center; on the dropdown menus. Your dropdown menus will look off center as there is default padding and margin the ul you are using for your dropdown menus that browser add by default. You will want to remove that padding/margin from the dropdown uls.
.dropmenu {
padding: 0;
text-align: center;
}
If the dropdown menu becomes too narrow after doing this you'll likely want to set a specific width for your dropdown menus.
.dropmenu {
padding: 0;
text-align: center;
width: 100%; /* same width as containing li */
}
jsFiddle: http://jsfiddle.net/7hjqjrjj/2/
If you're looking to clean up/fix alignment of your dropdown menu read below.
You want to apply position: relative; to the li's that contain a dropdown menu. Then apply position: absolute; to that dropdown menu (ul). You'll usually add left: 0; to the drowpdown menu (ul) as well.
Applying position: relative; to the containing li causes the absolutely positioned dropdown menu to position itself relative to the containing li, rather than some place like the top of the page.
We don't want the dropdown to position itself after the anchor tag or other content within the containing li so we use absolute positioning.
Update your CSS selectors as follows:
.menu li {
list-style: none;
padding: 3px;
position: relative;
}
.dropmenu {
display: none;
position: absolute;
top: 18px;
left: 0;
}
You may need to fiddle with your top and left values.
jsFiddle: http://jsfiddle.net/7hjqjrjj/1/
I'm not sure why my hover effect isn't working on my navigation bar, and I was wondering if anyone can point out where I've went wrong?
Here is my html and css:
<div id="nav">
<a class="selected" href="Property%20Advisor.html">Home</a>AboutContact Us
</div>
#nav {
position: fixed;
top: 0;
width: 100%;
height: 7%;
margin: 0;
text-align: center;
font-family: rosario, sans-serif;
background-image: -moz-linear-gradient(#44597F, #021840);
background-image: -ms-linear-gradient(#44597F, #021840);
background-image: -webkit-linear-gradient(#44597F, #021840);
background-image: linear-gradient(#44597F, #021840);
}
#nav a {
display: inline-block;
font-size: 100%;
padding-top: 1%;
padding-left: 2%;
padding-right: 2%;
margin: 0;
border: 0;
padding-bottom: 1%;
color: white;
text-decoration: none;
margin-right: 1px;
background-image: -moz-linear-gradient(#44597F, #021840);
background-image: -ms-linear-gradient(#44597F, #021840);
background-image: -webkit-linear-gradient(#44597F, #021840);
background-image: linear-gradient(#44597F, #021840);
}
#nav homeHover a:hover, onCLick {
background-color: #44597F;
color:orange;
}
.selected {
background-color: #000000;
color: orange;
}
Here is a JSfiddle of my code:
http://jsfiddle.net/VDmh8/1/
http://jsfiddle.net/VDmh8/3/
You need to change:
#nav homeHover a:hover, onCLick {
background-color: #44597F;
}
to:
#nav a:hover {
background-color: #44597F;
background-image: none;
}
because for one, #nav homeHover a:hover would select a hovered upon a element within an element with tag name homeHover within #nav, which won't target the a elements that you want.
Also, you need to reset the background-image property that you set for your unhovered a.
You just messed up your CSS target.
JSFiddle
You're trying to change #nav a I presume, so all you need to do is use the CSS selector - #nav a:hover.
Setting a background gradient for both your nav and link elements is generally a bad idea. The two gradients will attempt to fit into different sized spaces and clash together. Instead, try creating a nav with a gradient, and then making transparant buttons above the nav, so you don't need to specify a new gradient. This is a bit difficult to explain, so check below:
For the navigation button, just leave out the background entirely when it isn't being hovered, and it will show the #nav color behind, like here.
As a more general example:
#nav{
/* gradients here! */
}
.button /* not hovered */
{
/* Don't set a background color - it will be transparant. */
}
.button:hover /*the same button when it's hovered. */
{
background: #123456;
}
(Also PS: never use something like height: 7%; for the nav. It ends up scaling improperly.
Use a definite height, like height: 48px.
If you really want to make a responsive website, a CSS Media Query would be better suited in this situation.
Why do you have a HomeHover in your css? That way, it looks for #nav, then a HomeHover tag inside the nav and then the anchor tag to match.
nav a:Hover will do.
The background-image seems to be drawn over the background-color. You need to set the background-image to something else on the hover.
nav a:hover {
background-color: #44597F;
background-image: none;
}
Fiddle
How to grow the li elements in the way, that all the four li elements consume the complete 900 pixels space and add a little gap between the elements. And why is there already a gap now - I have none defined?
<html><head><title></title></head>
<style type="text/css">
#box { width: 900px; border: solid 1px black; }
#menu {
display: block;
position: relative;
width: 900px;
margin: 0;
padding: 0;
text-align: center;
}
#menu li {
display: inline;
position: relative;
margin: 0;
padding: 0;
}
#menu li a, #menu li a:visited {
display: inline-block;
position: relative;
padding: 10px;
background-color: yellow;
text-decoration: none;
}
#menu li a:hover, #menu li a:active {
background-color: green;
text-decoration: none;
color: white;
}
</style>
<body>
<div id="box">
<ul id="menu">
<li>Mozilla Firefox & Thunderbird</li>
<li>OpenOffice</li>
<li>Microsoft Office Visio</li>
<li>Apache OpenOffice 3.0.0</li>
</ul>
</div>
</body>
</html>
Inline blocks behave weirdly in the fact that they render whitespace. The gap shown between items is the new line characters in your code. You can either remove the new line characters as I have shown in the code below (or at this fiddle http://jsfiddle.net/UyQEK/). If you want to keep the HTML clean, and not have to do this removal of whitespace, use float left on the elements instead of display: inline-block and do a clearfix on the parent to set the height.
<div id="box">
<ul id="menu">
<li>Mozilla Firefox & Thunderbird</li><li>OpenOffice</li><li>Microsoft Office Visio</li><li>Apache OpenOffice 3.0.0</li>
</ul>
</div>
EDIT
Made the classic mistake of forgetting to check to ensure I answered the whole question. I have updated the fiddle http://jsfiddle.net/UyQEK/1/ to show the actual answer to utilize the entire bar rather then just get rid of your spaces. The basis of the solution was floating the elements and giving them each a width of 25% and applying a clearfix to the ul element.
Hope that solves the whole thing this time.