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*/
}
Related
Currently I have a header and above it I have my navbar. On my editor it is centered but when I stretch the page or view it in a different format it won't appear to be on top of the center of the header. Any ideas on what I should do?
#nav{
list-style-type: none;
position:absolute;
padding: 0;
overflow: hidden;
margin-top:-25px;
margin-left:50px;
}
#nav li{
float:left;
}
#nav a:link, #nav a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: darkorange;
text-align: center;
padding: 4px;
border:2px solid black;
border-top-right-radius:10px;
border-top-left-radius:10px;
text-decoration: none;
text-transform: uppercase;
border-bottom:none;
}
#nav a:hover{
background-color: orangered;
}
#nav a:active{
color:black;
}
#header{
height:150px;
background-color:darkred;
margin-top:45px;
border:2px solid black;
border-radius:15px;
overflow:hidden;
position:relative;
}
#innerheader{
background-color:burlywood;
height:100px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
width:50%;
border-radius:25px;
border:3px solid black;
position:Relative;
margin-top:22px;
}
#innerheader h1{
position:relative;
margin-left:auto;
text-align:center;
margin-top:30px;
-webkit-text-stroke-width:0.6px;
-webkit-text-stroke-color:black;
color:saddlebrown;
}
<body>
<ul id="nav">
<li>Home</li>
<li>Photos</li>
<li>Statistics</li>
<li>Chat</li>
<li> Biography </li>
</ul>
<div id="header">
<div id="innerheader">
<h1>
General Information
</h1>
</div>
</div>
</body>
Much of what I provided will not be useful to this question, and I apologize for that, but I just want to provide as much information as possible to get help. Thanks!
Hi now try to this css
#nav {
list-style-type: none;
padding: 0;
overflow: hidden;
margin: 0 auto;
display: block;
text-align: center;
font-size: 0;
}
#nav li {
display: inline-block; // add this
font-size: 14px; // add this
}
#header {
/* margin-top: 45px; */ // remove this line
}
Demo
#nav {
list-style-type: none;
/* position: absolute; */
padding: 0;
overflow: hidden;
margin: 0 auto;
/* margin-left: 50px; */
display: block;
text-align: center;
font-size: 0;
}
#nav li {
display: inline-block;
font-size: 14px;
}
#header {
height: 150px;
background-color: darkred;
/* margin-top: 45px; */
border: 2px solid black;
border-radius: 15px;
overflow: hidden;
position: relative;
}
#nav a:link, #nav a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: darkorange;
text-align: center;
padding: 4px;
border:2px solid black;
border-top-right-radius:10px;
border-top-left-radius:10px;
text-decoration: none;
text-transform: uppercase;
border-bottom:none;
}
#nav a:hover{
background-color: orangered;
}
#nav a:active{
color:black;
}
#innerheader{
background-color:burlywood;
height:100px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
width:50%;
border-radius:25px;
border:3px solid black;
position:Relative;
margin-top:22px;
}
#innerheader h1{
position:relative;
margin-left:auto;
text-align:center;
margin-top:30px;
-webkit-text-stroke-width:0.6px;
-webkit-text-stroke-color:black;
color:saddlebrown;
}
<body>
<ul id="nav">
<li>Home</li>
<li>Photos</li>
<li>Statistics</li>
<li>Chat</li>
<li> Biography </li>
</ul>
<div id="header">
<div id="innerheader">
<h1>
General Information
</h1>
</div>
</div>
</body>
Add these properties to your existing classes.
#nav{
list-style-type: none;
position:absolute;
padding: 0;
overflow: hidden;
margin-top:-25px;
margin-left:50px;
width:100%;
text-align:center;
}
#nav li{
display:inline-block;
}
This should solve your issue.
Make your nav bar take full width, and center the inner contents horizontally using text-align:center;
I'm learning css,and i am little confused with padding in navigation bar.
#menu ul {
height: auto;
padding: 15px 3px;
margin: 0px;
}
#menu li {
display: inline;
padding: 20px;
}
#menu a {
text-decoration: none;
color:white;
padding: 3px 3px 3px 3px;
}
How i see that ul padding move all ul elements relative to border,but i m confused what realy do padding li,and a tags?
Because how i understand a padding is the space beetween a href tags,but then what is padding in li?
html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head
<title>J</title>
<style>
body {
background-image: url('http://androidwallpape.rs/content/02-wallpapers/73-rainynight/wallpaper-1968153.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
h1{
color:white;
test-align:center;
}
p {
color:white;
test-align:right;
}
img {
float: center;
}
#menu {
width: 550px;
height: 45px;
float:right;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #336666 ;
background-color: #505050 ;
border-radius: 10px;
}
#menu ul {
height: auto;
padding: 15px 3px;
margin: 0px;
}
#menu li {
display: inline;
padding: 20px;
}
#menu a {
text-decoration: none;
color:white;
padding: 3px 3px 3px 3px;
}
#menu a:hover {
color: black;
background-color: #FFF;
}
</style>
<body>
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
<h1>JJc</h1>
<p>nesjxjxjjx</p>
<img src="me.jpg">
</body>
</html>
The padding is the space surrounding the content.
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;
}
I am having a problem where when I add padding to the list item "About Us" where it adds a line of background color down when I add padding to the list item. It is hard to explain but if you copy and paste the code into an html document and open it in a browser it will make much more sense. I am too new to these forums for it to let me post an image.
I apologize, but I am just getting into coding and so am struggling a little bit.
Thanks!
<!--Begin HTML-->
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<header>
<img src="Bend-oregon-dentist.jpg">
<ul id="nav">
<li>Home</li>
<li>About Us
<ul>
<li>Our Services</li>
<li>Our Office</li>
</ul>
</li>
</ul>
</header>
</body>
</html>
<!--End HTML-->
/*BEGIN CSS*/
body {
margin: 0;
}
header {
background: rgba(8,118,71,1.00);
height: 175px;
}
#nav {
list-style: none;
text-align: center;
padding-bottom: 0px;
margin-bottom: 0px;
}
#nav li {
margin-left: 10px;
display: inline;
color: white;
font-family: verdana;
background: rgba(3, 78, 3, 0.96);
padding: 2px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#nav ul{
list-style: none;
}
#nav ul li {
display: none;
}
#nav li:hover ul {
height: 20px;
}
#nav li:hover ul li {
margin-left: 899px;
display: block;
background: rgba(174,175,185,0.9);
width: 79px;
border: 2px solid black;
border-bottom: 1px solid black;
text-align: left;
color: black;
font-size: 12px;
}
/*END CSS*/
EDIT:
Your menu needs many chages. see this updated Fiddle
#nav {
list-style: none;
text-align: center;
padding-bottom: 0px;
margin-bottom: 0px;
}
#nav li {
margin-left: 10px;
display: block;
color: white;
font-family: verdana;
background: rgba(3, 78, 3, 0.96);
padding: 10px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#nav ul {
list-style: none;
}
#nav li {
position:relative;
float:left;
}
#nav li > ul {
position:absolute;
top: 38px;
left: -50px;
width:200px;
display: none;
}
#nav li:hover > ul {
display: block;
text-align: left;
color: black;
font-size: 12px;
height:auto;
}
Basically I'm making a project for college and I need the logo on the left hand side which is not appearing at all right now, the nav buttons on the right and some social media icons on the rightmost, I haven't added the icons yet since i cant even get this part right.
I know the code is messed up but this is my first time with CSS and HTML and also if i want to insert a bullet between the nav items is that possible?
Here is the CodePen
head
<link rel="stylesheet" href="ab.css" type="text/css" />
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<!-- Slider -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<link rel="stylesheet" href="ab.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
<body class="content">
<header>
<div class="navbuttons">
<div class="nav-main-wrapper">
<nav class="nav-main">
<ul>
<li><a class="logo" href="index.html"></a></li>
<li>QUIET</li>
<li>RAIN</li>
<li>THOUGHTS</li>
<li>CRAZY</li>
</ul>
</nav>
</div>
</div>
</header>
</div>
css
.navbuttons{
background:#0099cc;
position:relative;
padding: 30px 0px 33px 0px;
height: 60px;
margin-bottom: 10px;
}
header{
margin-top: 0px;
position: relative;
z-index:-1;
}
.branding img{
position: relative;
top: 0px auto;
float: left;
margin: 0px 0px 156px 0px;
}
.logo{
background: url("http://tinypic.com/r/30k62ae/5");
background-repeat:no-repeat;
height:140px;
display:block;
width:105px;
margin-top:-80px;
left: 30px;
margin-left: 30px;
padding: 0;
}
.nav-main-wrapper{
float:left;
min-width: 470px;
bottom: 300px:
margin: 22px 0px 22px 47px;
}
.nav-main{
float:left;
clear:both;
}
.nav-main ul{
float:left;
display:block;
font-size:22px;
}
.nav-main ul li{
display:inline;
color:#237dac;
font-family: LeagueGothic;
}
.nav-main ul li a{
color: #fff;
margin-left: 128px;
text-decoration: none;
}
.nav-main ul li a:hover{
color:#056495;
text-decoration: none;
}
.nav-main ul li:last-child:after{
content: "";
}
.nav-main ul li a {
white-space: nowrap;
text-decoration: none;
}
#font-face {
font-family: LeagueGothic;
src: url('LeagueGothic-Regular.otf');
}
You link your logo to http://tinypic.com/view.php?pic=30k62ae&s=5 which is not an image, but a page.
Link it to http://oi41.tinypic.com/30k62ae.jpg instead.
Try the following CSS below :
body{
margin: 0 auto;
padding: 0;
}
.navbuttons{
background:#0099cc;
position:relative;
padding: 30px 0px 33px 0px;
height: 60px;
margin-bottom: 10px;
}
header{
margin-top: 0px;
position: relative;
z-index:-1;
}
.branding img{
position: relative;
top: 0px auto;
float: left;
margin: 0px 0px 156px 0px;
}
.logo{
background: url("http://tinypic.com/r/30k62ae/5");
background-repeat:no-repeat;
height:140px;
display:block;
width:105px;
margin-top:-80px;
left: 30px;
margin-left: 30px;
padding: 0;
float:right;
}
.nav-main-wrapper{
min-width: 470px;
bottom: 300px:
margin: 22px 0px 22px 47px;
}
.nav-main{
float:left;
clear:both;
margin:-46px 0 0 ;
}
.nav-main ul{
float:left;
display:block;
font-size:22px;
margin:0px; padding:0px;
}
.nav-main ul li{
display:inline;
color:#237dac;
font-family: LeagueGothic;
}
.nav-main ul li a{
color: #fff;
margin-left: 128px;
text-decoration: none;
}
.nav-main ul li a:hover{
color:#056495;
text-decoration: none;
}
.nav-main ul li:last-child:after{
content: "";
}
.nav-main ul li a {
white-space: nowrap;
text-decoration: none;
}
#font-face {
font-family: LeagueGothic;
src: url('LeagueGothic-Regular.otf');
}
HTML Source below :
<body class="content">
<div class="navbuttons">
<div class="nav-main-wrapper">
<div class=""> <a class="logo" href="#"> Your Logo</a></div>
<nav class="nav-main">
<ul>
<li></li>
<li>QUIET</li>
<li>RAIN</li>
<li>THOUGHTS</li>
<li>CRAZY</li>
</ul>
</nav>
</div>
</div>
</body>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<style>
body {
margin: 0px;
padding: 0px;
}
.menu {
width: 100%;
height: 100px;
background: #333;
}
.menu ul {
float: left;
margin: 0px;
padding: 0px;
}
.menu ul li {
list-style: none;
float: left;
padding: 0px;
background: #333;
}
.menu ul li:hover {
background: #555;
}
.menu ul li a {
display: block;
padding: 40px
}
.logo {
padding: 0px !important;
}
</style>
<body>
<div class="menu">
<ul>
<li><a class="logo" href="#"><img src="http://oi41.tinypic.com/30k62ae.jpg" width="119" /></a></li>
<li>text</li>
<li>text</li>
</ul>
</div>
</body>
</html>