Is there a way to get this navigation bar to always been in the middle of the page? I'm sure using percentages will be the best way. I added in which line I think needs changing. I'm just trying to get used to CSS. Any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<style>
.menu {
position:absolute;
background:#CCC;
width:100%;
top:100px;
left:0;
height:23px;
padding: 0;
text-align:center;
font-size:20px;
font-weight:light;
}
.ty-menu__items {
position: absolute;
left:20%; /* This is the line that needs changing, I think*/
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
}
.ty-menu__item {
float: left;
}
a:link, a:visited {
display: block;
width: 200px;
font-weight: light;
color: #FFF;
background: #CCC;
text-align: center;
padding: 0;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background: #000;
border-bottom: 4px solid #fff;
}
</style>
</head>
<body>
<div class="menu">
<ul class="ty-menu__items">
<li class="ty-menu__item">Home</li>
<li class="ty-menu__item">News</li>
<li class="ty-menu__item">Contact</li>
<li class="ty-menu__item">About</li>
</ul>
</div>
</body>
</html>
Remove the left property from your ul, then remove the float property from your li's, and instead make the li's display: inline-block; so you can simply text-align: center; them. Code below:
.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
text-align: center;
}
.ty-menu__item {
display: inline-block;
}
Related
I need the last tab (About) to float to the right and the others to the left. It all floats left.
<div class="nav">
<ul>
<li>HOME</li>
<li>COSC 231</li>
<li>MAGIC 8 BALL</li>
<li>ABOUT</li>
</ul>
</div>
a {
color:#b7b7b7;
text-decoration:none;
}
body {
background-color:#0d0d0d;
font-family:Tahoma;
color:#ffffff;
text-align:center;
margin:0;
}
#lines {
line-height:.3px;
}
hr {
width:30%;
}
#page {
text-align:left;
}
div {
margin:0 auto;
text-align:center;
}
img {
width:50%;
border:1px solid white;
}
.nav {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.nav div {
width:100%;
position: fixed;
}
.nav ul {
list-style-type: none;
width:100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #dbdbdb;
}
.nav li {
float: left;
}
.nav li a {
color: white;
text-align: center;
display: block;
padding: 12px 16px;
text-decoration: none;
-o-transition:.25s;
-ms-transition:.25s;
-moz-transition:.25s;
-webkit-transition:.25s;
transition:.25s;
}
.nav li a:hover {
background-color: #efefef;
}
.aboutRight {
position: fixed;
float: right;
left: 100px;
}
First of all have style for class aboutRight .aboutRight and your link has ID <li>ABOUT</li>. Rewrite id into class as it's a bad practice to use IDs for styling.
Second, you don't need position:fixed; in this style, it won't take space in a parent container, you need this link to be in a same position as other links.
Third, you should apply that class not to the <a> tag, but to the <li> element, because you want to float right <li> inside of <ul>, not <a> inside of <li>
And lastly, since you have this rule .nav li { float: left; } and want to override it for a certain li, you should write more specific selector, not just a class, e.g. nav li.aboutRight
I created a snippet for you with working code.
a {
color:#b7b7b7;
text-decoration:none;
}
body {
background-color:#0d0d0d;
font-family:Tahoma;
color:#ffffff;
text-align:center;
margin:0;
}
#lines {
line-height:.3px;
}
hr {
width:30%;
}
#page {
text-align:left;
}
div {
margin:0 auto;
text-align:center;
}
img {
width:50%;
border:1px solid white;
}
.nav {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.nav div {
width:100%;
position: fixed;
}
.nav ul {
list-style-type: none;
width:100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #dbdbdb;
}
.nav li {
float: left;
}
.nav li a {
color: white;
text-align: center;
display: block;
padding: 12px 16px;
text-decoration: none;
-o-transition:.25s;
-ms-transition:.25s;
-moz-transition:.25s;
-webkit-transition:.25s;
transition:.25s;
}
.nav li a:hover {
background-color: #efefef;
}
.nav li.aboutRight {
float: right;
left: 100px;
}
<div class="nav">
<ul>
<li>HOME</li>
<li>COSC 231</li>
<li>MAGIC 8 BALL</li>
<li class="aboutRight">ABOUT</li>
</ul>
</div>
How can I centralise my navigation bar?
I've tried a few things, like <center>, but, I don't know what I'm doing wrong!
CSS:
.NavBar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.NavItem {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #080808;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
text
}
a:hover, a:active {
background-color: #7A991A;
}
HTML:
<ul class="NavBar">
<li class="NavItem">Home</li>
<li class="NavItem">Snippets of Divinity</li>
<li class="NavItem">Contact</li>
<li class="NavItem">Donate</li>
</ul>
Excuse the title of the navigation buttons, I'm making a website devoted to me and the wonderful things that I say and do.
Here is a JSFiddle: https://jsfiddle.net/ryfv3499/
Update the .NavBar CSS rule
.NavBar {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
width:90%;
}
You can use any width but 100%
use display: inline-block for .NavItem
for .NavBar - text-align: center
.NavBar {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 0;
text-align: center;
}
.NavItem {
display: inline-block;
vertical-align: top;
font-size: 15px;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #080808;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
text
}
a:hover, a:active {
background-color: #7A991A;
}
body { background-color: #D0D0D0; }
<ul class="NavBar">
<li class="NavItem">Home</li>
<li class="NavItem">Snippets of Divinity</li>
<li class="NavItem">Contact</li>
<li class="NavItem">Donate</li>
</ul>
You can use the following addition to your CSS:
.NavBar {
list-style-type: none;
/* margin: 0; */
margin-left:auto;
margin-right:auto;
padding: 0;
overflow: hidden;
}
This will centre your box provided it has a fixed width; you may need to explicitly specify the width for your navbar too.
Hope this helps
You must add margin: 0 auto; and define width of your element.
.NavBar {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
width:500px;
}
Here is fiddle: https://jsfiddle.net/ryfv3499/11/
New to html and css, I have checked other questions here and googled it but I am not finding an answer.
I am working on the nav bar and have this annoying space I can not figure out how to get rid of.
I made the background of the nav element blue so you can see what I am referring to and here is a screenshot:
http://imgur.com/v18HTjH
The HTML is:
<div class="topnavbar">
<ul class="nav">
<li class="nav-element">Home</li>
<li class="nav-element">Blog</li>
<li class="nav-element">About Me</li>
<li class="nav-element">Services</li>
<li class="nav-element">testimonials</li>
<li class="nav-element">Contact</li>
</ul>
</div>
The CSS:
.topnavbar{
background-color: blue;
border-top: 5px solid black;
border-bottom: 5px solid black;
position: relative;
margin-left: auto;
margin-right: auto;
width:90%;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-top-right-radius:30px;
border-bottom-right-radius:30px;
}
body {
top:1px;
background-color: black;
}
ul {
list-style-type: none;
padding: 0;
margin:0;
border-radius: 5px;
overflow: hidden;
}
li {
float: left;
border-radius: 5px;
}
a:link, a:visited {
display: inline-block;
width: 150px;
font-weight: bold;
color: #000000;
background-color: #ffffff;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #FA0000;
}
This solution doesnt necessarily take away the space, but it centers the links within the navbar.
http://jsfiddle.net/swm53ran/261/
ul {
list-style-type: none;
padding: 0;
margin:0;
border-radius: 5px;
overflow: hidden;
text-align: center; /* added */
}
li {
/* float: left; */ /* commented out */
display: inline-block; /* added */
border-radius: 5px;
}
hope this helps
remove width attribute .topnavBar in CSS file and check it.
Add width:150px; to the li class,
and change width of .topnavbar to 67%;
Actually you are giving width 90% to .topnavbar but your content of all li's is just 67%.
I have a problem with my navigation bar. It is looking great now, but if I add a position:fixed to my css, it messes everything up. Also, if the bar can't fit horizontally on screen, the browser breaks it into two rows, so it fits, but I don't want that!
I added a bg height only so I can scroll and see if the navbar stays.
What I want is a fixed navigation bar on top of the screen, not overlapping with future content, and filling the screen horizontally.
Here's my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>NOT!fy</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,700|Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
<!-- A roboto font stylesheetje a google fontsban -->
</head>
<body>
<div id="nav" align="center">
<ul>
<img src="img/notify_icon.png"/>
<li>HOME</li>
<li>FEATURE SET</li>
<li>WHO ARE WE</li>
<li>INDIEGOGO</li>
<li>CONTACT US</li>
</ul>
</div>
CSS:
#charset "utf-8";
/* CSS Document */
#nav {
font-family: Century Gothic;
font-size: 16px;
color: #fff;
background-color: #353539;
height: 100px;
width: auto;
font-weight: bold;
border-width:0px;
opacity:0.95;
padding:0px;
}
#nav ul {
margin:0 auto;
width:auto;
height:100px;
}
#nav ul li {
list-style-type: none;
text-align: center;
display:inline-block;
margin: 0px;
padding:0px 10px 0px 10px;
border-right:1px solid #DDD;
height: 10px;
vertical-align: middle;
}
#nav ul li {
text-decoration: none;
color: #d2d2d2;
text-align: center;
display: inline-block;
padding: 30px;
margin-bottom: 90px;
vertical-align: middle;
}
#nav a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
padding: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
#nav img{
width:100px;
}
body
{
background-color:#c5c5c5;
height:1500px;
}
Here you can see it working: http://jsfiddle.net/DzLvT/
Try this demo
<div id="nav">
<ul>
<li>HOME</li>
<li>FEATURE SET</li>
<li>WHO ARE WE</li>
<li>INDIEGOGO</li>
<li>CONTACT US</li>
</ul>
</div>
#nav{
margin:0 auto;
width:100%;
position:fixed;
top:0;
left:0;
bottom:auto;
background-color: #353539;
height:50px;
}
#nav ul {
margin:0 auto;
width:auto;
height:100px;
}
#nav ul li {
list-style-type: none;
text-align: center;
display:inline-block;
margin: 0px;
padding:0px 10px 0px 10px;
border-right:1px solid #DDD;
vertical-align: middle;
line-height:50px;
}
#nav a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
padding: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
body{
background-color:#c5c5c5;
height:1500px;
}
you can also use css rules:
position:fixed; and top:0px;
on your menu tag
Try remove the #nav and iclude it on ul#nav, and add position fixed
http://jsfiddle.net/LZAhC/
#nav ul {
font-family: Century Gothic;
font-size: 16px;
color: #fff;
background-color: #353539;
height: 100px;
width: auto;
font-weight: bold;
border-width:0px;
opacity:0.95;
padding:0px;
position: fixed;
}
#nav ul li {
list-style-type: none;
text-align: center;
display:inline-block;
margin: 0px;
padding:0px 10px 0px 10px;
border-right:1px solid #DDD;
height: 10px;
vertical-align: middle;
}
#nav ul li {
text-decoration: none;
color: #d2d2d2;
text-align: center;
display: inline-block;
padding: 30px;
margin-bottom: 90px;
vertical-align: middle;
}
#nav a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
padding: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
#nav img{
width:100px;
}
body
{
background-color:#c5c5c5;
height:1500px;
}
u must give the #nav fixed with and a width with % on the a tags . They will be resized within the width of their parent if the space is too small they will go to a new line so summ them to 97% total and leave 3% for margins and paddings. instead of positioning the text with paddings u can use Line-height for height and text-aling-center
add to ur div somethink like 800/960px width remove the overflow and see the magic :D
just replace this in ur css:
#nav ul li {
list-style-type: none;
text-align: center;
display: inline-block;
width: 19%;
margin: 0px;
/* padding: 0px 10px 0px 10px; REMOVE THE PADDING*/
border-right: 1px solid #DDD;
vertical-align: middle;
line-height: 50px; /*THE SAME AS HEIGHT BUT FOR text elements*/
}
I'm trying to center the navigation, but I haven't succeeded yet. The idea is that the navigation moves along as the user scrolls the page. It has to be responsive as well, because navigation should always be displayed. So I've come up with this:
<nav id="nav" class="container">
<ul>
<li><a href="#avaleht" class="avaleht" title="Avaleht" >avaleht</a></li>
<li><a href="#massaazh" class="massaazh" title="Massaaž" >massaaž</a></li>
<li><a href="#kontakt" class="kontakt" title="Kontakt" >kontakt</a></li>
</ul>
</nav>
And the CSS:
#nav
{
position: fixed;
}
#nav ul
{
list-style: none;
padding-left: 0;
text-align: center;
}
#nav li
{
display: inline-block;
}
#nav a
{
color: rgb(255,255,255);
font-family: 'Open Sans', sans-serif;
font-weight: 500;
text-transform: uppercase;
font-size: 1.3em;
display: block;
margin-right: 80px;
height: 100px;
width: 100px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
line-height: 100px;
}
#nav a.avaleht
{
background: rgb(168,191,18);
}
#nav a.massaazh
{
background: rgb(255,159,0);
}
#nav a.kontakt
{
background: rgb(0,170,181);
}
#nav a:hover
{
text-decoration: none;
background: rgb(66,64,62);
}
And this is how I'd like it to work:
Thank you very much.
Just add left:0; right:0; to the fixed #nav element:
#nav {
position: fixed;
left:0; right:0;
}
Then remove the margin-right for the last li element's child anchor element:
#nav li:last-child a {
margin-right:0;
}
Example Here
#nav {
position: fixed;
left:0;
right:0;
}
and replace margin-right:80 with margin:5px 40px
#nav a{
margin: 5px 40px;
}