I'm using a navigation bar for a project I'm working on. I've always had trouble with horizontal navigation bars, and I've looked everywhere for the right solution, without success. The navigation bar was shifted to the left, so I put in some padding in my css, and now it's centered, however the text is not centered in it, and the hover effect for the first link doesn't cover the whole 'box' the text is in.
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFFFFF;
text-align: center;
padding: 30px;
margin-bottom: 0px;
margin-top: 0px;
background-color: #63B8FF;
}
.headers2{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav{
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0px 0px 0px 0px;
}
.nav li{
display: inline-block;
}
.nav a{
display: inline-block;
padding: 10px 110px 10px 0.80px;
text-align: center;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: overline;
}
a:active{
background-color: #FF9C00;
color: #FFFFFF;
text-decoration: underline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
HTML5 (Index Page)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<h1 class="headers">Welcome to KUBE Toy Library!</h1>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<h2 class="headers2">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
Note that I'm quite new compared to the others here on this forum, so please take it easy on me! :) Also this is a fictional company, etc. for an assignment I was given. Thanks!
Hi your page in my browser was displayed like below
I changed your css to make it browser resolution independent. As a UI developer I felt that overline was not looking good so I removed that. Use my code
/* Body CSS */
.body {
background-color: #61B329;
color: #FFFFFF;
}
/* Header CSS */
.headers {
color: #FFFFFF;
text-align: center;
padding: 30px;
margin: 0;
background-color: #63B8FF;
}
.headers2 {
color: #FFD89A;
text-align: center;
padding: 10px;
}
.container {
margin: 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link,
a:visited,
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
background-color: #028482;
}
a:active {
background-color: #FF9C00;
color: #FFFFFF;
text-decoration: underline;
}
.Links A:hover {
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
Demo:
http://jsfiddle.net/NphBK/
This is a common problem. But to fix this you need to make the parent text-align: center and give the children display: inline-block;
If you want to have it completely equalizing you'll need to switch to display: table and display: table-cell.
Related
I am new to CSS. I am trying to re-create a website from case-study in the book. As you can see in the picture I attached the navigation bar leaves little space on the left. I am not able to find out what is causing this or How can I fix this?View of the webpage
#wrapper {
width: 80%;
margin: 0 auto;
}
a:link {
text-decoration: none;
}
a:hover {
color: red;
}
nav {
letter-spacing: 0.5em;
padding: 10px 10px;
border: 1px solid black;
background-color: white;
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
text-decoration: none;
display: block;
border-right: 1px solid black;
}
#dot {
list-style-type: none;
}
body {
background-color: #4286f4;
text-align: center;
}
footer {
text-align: center;
font-size: small;
font-family: italic;
}
header {
background-color: #91b0e2;
}
main {
background-color: white;
border: 1px solid black;
}
<div id="wrapper">
<header>
<h1>Nature Walk</h1>
</header>
<ul id="dot">
<nav>
<li>Home</li>
<li>Login</li>
<li>Amenities</li>
<li>eForms</li>
</nav>
</ul>
</div>
You just need to update one class which is #dot
Whenever used ul by default it has padding at left side so you need to update using padding:0 or padding-left:0
#dot{
list-style-type: none;
padding:0;
}
When I add a dropdown menu using "position: absolute", I want to add "position: relative" to its nearest ancestor "li.dropDownBtn" and find out that it makes the whole dropdown menue disappear. I have been trying to find out the reason but still haven't got an answer. Can anyone help me with this please? Thanks a lot!
<html>
<head>
<style>
ul.navBar {
list-style-type: none;
margin: 0px;
padding:0px;
overflow: hidden;
background-color: #4277f4;
cursor: pointer;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
text-decoration: none;
}
li:hover {
background-color: #A2AEB3;
}
/*When this is added, the dropdown disappear
li.dropDownBtn {
position: relative
}
*/
.dropDownContent {
display: none;
position: absolute;
background-color: #7DC9E3;
width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
text-decoration: none;
}
.dropDownContent a {
color: white;
display: block;
}
.dropDownContent a:hover{
background-color: #4A96B0;
}
li.dropDownBtn:hover .dropDownContent{
display: block;
}
</style>
</head>
<body>
<ul class="navBar">
<li>Home</li>
<li class="dropDownBtn">Products
<div class="dropDownContent">
Product1
Product2
Product3
</div>
</li>
<li>Service</li>
<li>Contact</li>
</body>
</html>
Here's the jsfiddle for this navigation bar page.
overflow: hidden on the main menu is keeping the submenu from showing. I'm assuming you're using that to clear the floats in your nav menu, so added a .clearfix with a different technique that doesn't use overflow: hidden and removed overflow: hidden from your menu's CSS
ul.navBar {
list-style-type: none;
margin: 0px;
padding:0px;
background-color: #4277f4;
cursor: pointer;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
text-decoration: none;
}
li:hover {
background-color: #A2AEB3;
}
li.dropDownBtn {
position: relative;
}
.dropDownContent {
display: none;
position: absolute;
background-color: #7DC9E3;
width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
text-decoration: none;
}
.dropDownContent a {
color: white;
display: block;
}
.dropDownContent a:hover{
background-color: #4A96B0;
}
li.dropDownBtn:hover .dropDownContent{
display: block;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<body>
<ul class="navBar clearfix">
<li>Home</li>
<li class="dropDownBtn">Products
<div class="dropDownContent">
Product1
Product2
Product3
</div>
</li>
<li>Service</li>
<li>Contact</li>
Set a height for ul.navBar and take out overflow hidden
ul.navBar {
list-style-type: none;
margin: 0;
padding:0;
background-color: #4277f4;
cursor: pointer;
height:55px;
}
It's because you have this setting:
.dropDownContent {
display: none;
position: absolute;
etc.
Which means the dropdown is not displayed by default (which usually is the desired function...).
And then you have this rule, which makes it visible when you hover its li parent:
li.dropDownBtn:hover .dropDownContent{
display: block;
}
That's the way CSS dropdown menus work, what do you not like about it?
I've been working on my navbar and with the help of this site, managed to find out how to center it using text align. However, there is a weird indent that I cannot account for in my navbar as you can see in the example so when I center it, it's taking the indent into consideration too, so it doesn't look right.
How do I remove this indent and have it centered properly? I'm rather new to this, so advice would be great. Many thanks.
http://jsfiddle.net/f2eNm/
HTML
<div class="links_container">
<div class="nav1">
<ul>
<li>Home</li>
<li>About</li>
<li>Challenges</li>
<li>Progress</li>
<li>Forum</li>
</ul>
</div>
</div>
CSS
*{
margin:0;
}
.links_container {
width: 100%;
height: 25px;
background-color: #33C4AB;
margin-right: auto;
margin-left: auto;
border-bottom-style: double;
border-bottom-width: 2px;
border-color: #000000;
/* [disabled]-webkit-box-sizing: inherit; */
/* [disabled]-moz-box-sizing: inherit; */
/* [disabled]box-sizing: inherit; */
position: absolute;
max-width: 1000px;
}
.nav1 {
display: inline;
float: left;
}
.nav1 ul li {
list-style-type: none;
float: left;
display: block;
}
.nav1 ul li a {
color: #FFFFFF;
text-decoration: none;
background-color: #333333;
display: inherit;
height: 25px;
width: 100px;
text-align: center;
line-height: 25px;
border-left: thin solid #CCCCCC;
}
.noBorder {
border-left-style: none !important;
}
.nav1 ul li a:hover {
background-color: #6B6B6B;
}
.leftedge {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.rightedge {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
You need to change some things.
.nav1
{
text-align: center;
}
.nav1 ul {
margin: 0;
padding: 0;
display: inline-block;
overflow: hidden;
}
http://jsfiddle.net/f2eNm/3/
I'm trying to get the nav_right section of the nav bar to align to the right but line up against the right hand edge of the company name: http://i.stack.imgur.com/8xXfV.png
I can set .nav ul to 24.5em to line things up but on different screen sizes this doesn't work.
Here is the CSS:
*{
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
color: inherit;
}
.nav{
width: auto;
padding: 2em 0 0 0.5em;
background-color:rgba(0,0,0,1);
}
.nav ul{
width: 24.5em;
font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
text-transform: uppercase;
}
.nav li{
font-weight: 100;
font-size: 3em;
color: #fff;
}
.nav b{
font-weight: 900;
}
.nav li:hover{
text-decoration: #000;
}
#nav_right{
font-size: 0.8em;
font-weight: 600;
text-align: right;
}
.triangle{
width: 0;
height: 0;
border-top: 10px solid #000;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
margin: auto;
opacity: 0.4;
}
img{
float: right;
width: 10%;
margin-top: 1em;
margin-left: 1em;
margin-right: 1em;
}
.main_wrapper{
width: auto;
height: 100px;
margin-left: 1em;
margin-top: 20%;
overflow: hidden;
float: left;
background-color: #000;
border-radius: 10px;
opacity: 0.4;
box-shadow: 0 0 1em #000;
}
And here is the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/test.css" />
<title>TEST</title>
</head>
<body>
<nav>
<div class="nav">
<ul>
<li id="nav_right">HOME | ABOUT | CONTACT</li>
<li>company<b>name</b></li>
</ul>
</div>
</nav>
</body>
</html>
You can restructure your CSS and HTML to set a width for the nav class. Separate all your links into li and add styling that adds margin and a white line. This way, when you add more items, the style will automatically be applied to other list items.
This code will always align the menu to the right edge across all browsers. The only downside is that your list items have to be put backwards. From last to first because float:right is switching the order.
CSS:
* {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
nav {
background: #000;
}
.nav {
width: 24.5em;
padding: 2em 0 0 0.5em;
background-color: rgba(0,0,0,1);
font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
text-transform: uppercase;
}
.nav ul {
text-align: right;
list-style-type: none;
}
.nav a {
text-decoration: none;
color: inherit;
padding: 0;
}
.nav li {
color: #fff;
display: inline;
padding: 0 6px;
border-right: 1px solid #fff;
font-size: 0.8em;
font-weight: 600;
float: right;
}
.nav li:first-child {
padding-right: 0;
border: none;
}
.nav li:last-child {
padding-left: 0;
}
.nav #companyName {
font-size: 3em;
color: #fff;
}
.nav #companyName b {
font-weight: 900;
}
.nav li:hover {
text-decoration: underline;
}
.triangle {
width: 0;
height: 0;
border-top: 10px solid #000;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
margin: auto;
opacity: 0.4;
}
img {
float: right;
width: 10%;
margin-top: 1em;
margin-left: 1em;
margin-right: 1em;
}
.main_wrapper {
width: auto;
height: 100px;
margin-left: 1em;
margin-top: 20%;
overflow: hidden;
float: left;
background-color: #000;
border-radius: 10px;
opacity: 0.4;
box-shadow: 0 0 1em #000;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/test.css" />
<title>TEST</title>
</head>
<body>
<nav>
<div class="nav">
<ul>
<li>CONTACT</li>
<li>ABOUT</li>
<li>HOME</li>
</ul>
<div id="companyName">
company<b>name</b>
</div>
</div>
</nav>
</body>
</html>
Does adding
nav li {
text-align: right;
}
Do what you are looking for?
Example
Edit
To achieve what you want, you can remove the width declaration and instead declare display: inline-block on the ul element. The element will then stretch only to the width of its widest content (in this case your li containing the big CompanyName) instead of the whole width of the parent element.
Your other menu will then align to the right of the element as you wish.
So basically:
nav ul {
display: inline-block;
}
nav li {
text-align: right;
}
Example
P.S.
By the way, your markup is really weird, and you probably should refactor that. Your menu items are all enclosed in one single <li> while they should each be a separate element; you could then add the purely presentational | vertical bars through CSS.
put the a tag with company name on the outside of the div called nav.
HTML
<html>
<head>
<link rel="stylesheet" href="css/test.css" />
<title>TEST</title>
</head>
<body>
<nav>
<a href="#" class="companyname"><li>company<b>name</b>
<div class="nav">
<ul>
<li id="nav_right">HOME | ABOUT | CONTACT</li>
</li>
</ul>
</div>
</nav>
</body>
</html>
CSS
nav {
margin: 0;
padding: 0;
overflow: hidden
}
.companyname {
display: inline-block;
float: left;
margin: 0;
padding: 0;
}
.nav ul{
display: inline-block;
float: right
margin: 0;
padding: 0;
}
I am trying to get start a web site for fun but I am having issues with CSS styles and tags with aligning I have a container, horizontal nav, left Nav, right Nav, Header and footer.
They are all in the container element but I can not align them properly. The header and norz nav are fine and so are the footers. The problem I am having is that the left body and right do not align properly can any one help. below is the coding for the HTML
<body>
<div id="container">
<div id="header">
</div>
<div id="horizontalnav">
<div class="navlinks ">
<ul>
<li>Facebook</li>
<li>Gaia</li>
<li>Roblox</li>
<li>Adventure Quest</li>
<li>Anime Freak</li>
<li>Youtube</li>
</ul>
</div>
</div>
<div id="leftnav">
<p>Left Nav </p>
</div>
<div id="body">
</div>
<div id="rightnav">
<p>right Nav </p>
</div>
<div id="footer">
this is the footer
</div>
</div>
</body>
and now for the css yes i use the one off of 2createawebsite.com and try to manipulate it
#container {
width: 100%;
}
#header {
width: 89%;
height: 15%;
position: relative;
background-image: url(Header.jpg);
border-bottom: 2px solid #000000;
}
#header a {
color: #ffffff;
text-decoration: underline;
font-weight: bold;
font-family: Verdana;
font-size: 14px;
}
#header a:visited {
color: #000000;
text-decoration: underline;
font-weight: bold;
}
#header a:hover {
color: #cc0000;
text-decoration: none;
font-weight: bold;
}
#horizontalnav {
width: 89%;
height: 30px;
position: relative;
background-color: #F2D6AF;
border-bottom: 2px solid #000000;
}
.navlinks {
position: absolute; top: 4px; left:240px;
}
.navlinks ul {
margin: auto;
}
.navlinks li {
margin: 0px 18px 0px 0px;
list-style-type: none;
display: inline;
}
.navlinks li a {
color: #000000;
padding: 5px 12px 7px;
text-decoration: none;
font-size: 16px;
font-family: Verdana;}
.navlinks li a:hover{
color: #ffffff;
background-image: url(Header.jpg);
text-decoration: underline;
}
#header p {
color: #000000;
font-family: Arial;
font-weight: bold;
}
.smalltext {
font-size: 9px;
font-family: Arial;}
#leftnav {
float: left;
width: 10%;
height: 70%;
background-color: #F8AA3C;
border-right: 1px dashed #694717;}
#rightnav {
float: right;
width: 10%;
height: 70%;
background-color: #F8AA3C;
border-left: 1px dashed #694717;}
#body {
margin-left :0px ;
width : 50% ;
padding: 0px 0px 0px 0px;
}
#body p {
word-wrap : true ;
font-family : courier new ;
}
#footer {
clear: both;
background-color: #D1C0A7;
}
If you change #header and #horizontalnav to 100% this makes everything expand to the width of the page; I assume this is what you wanted to accomplish
#header {
/* existing code */
width: 100%;
}
#horizontalnav {
/* existing code */
width: 100%;
}
As for the left column, body column and right column, these can be set to inline-block (float is not needed then) and their widths can be set to 10%, 80%, 10% respectively. In general this should fix the layout.