So I am trying to build my navbar and I seem kind of stuck. I've been trying to get a solid yellow line about 3-5px thick underneath my navbar.
I remember I have made a navbar in the past that looked like what I am trying to do but I forgot how to do that and I have lost that document.
So I have used: nav::after and tried border-bottom but it does not do anything..
nav {
background:black;
margin:0;
width:100%;
padding: 20px;
display: block;
}
nav::after {
border-bottom: 8px solid green;
content: '';
position: absolute;
left: 0;
right: 0;
width: 100%;
bottom: 0;
margin: 0 auto;
}
nav ul .nav-links {
float:right;
margin-top:20px;
margin-right:40px;
}
nav ul {
list-style-type:none;
}
nav li {
display: inline-block;
color:white;
margin-right:30px;
}
nav a {
color:white;
text-decoration:none;
float:right;
transition:.2s ease-in-out;
font-weight:700;
}
nav a:hover {
color:#FFE600;
}
.nav-title {
line-height:30px;
}
<nav id="nav">
<ul>
<li class="nav-title"><h2>text text</h2><h4>is a text, text text text</h4></li>
<div class="nav-links">
<li>About</li>
<li>Statistics</li>
<li>What can you do?</li>
</div>
</ul>
</nav>
#nav{
position: relative;
}
You need to use the "#" css selector, to specify, you are referring to the element with the id => nav. (it look cleaner)
Position relative means, the child element will be absolutely positioned RELATIVE to the parent. (which has this attribute setted)
You don't need '::after'--you can remove that. The border-bottom of the div will automatically be shown at the bottom of the div.
The issue has now been fixed! Thanks to #seva.rubbo ! Here's the updated code in JSFiddle
I have created a layout which contains 1 div with a fixed width width: 900px;. and I have centered this div so in that I have 2 blank spaces on either side. What I want to do is add a navigation bar inside this div at the top and have its width fill up the width of the div. Here's my navigation html and css code;
<div id="content">
<nav>
<ul class="nav">
<li>Home</li>
<li>Categories</li>
<li>News</li>
<li>Members</li>
<li>Media</li>
</ul>
</nav>
</div>
The CSS for Navigation;
.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:20px;
background-color: #AEAEAE;
width: 15%;
text-decoration: none;
text-transform: uppercase;
}
.nav a:hover {
background-color: #fff;
}
The Div CSS;
div#content {
width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
height: 1200px;
}
JSFiddle Link
All help would be greatly appreciated. I hope I've explained my problem well enough, I would post images but I have not got enough reputation. Thank you.
.nav li{
float: left;
width: 20%;
}
And remove width: 15% from .nav a
I can't seem to remove this bit of space at the top of my page, I've tried a number of things and read around. The only thing that seems to work is *{margin:0}, but I don't really want to do that. Anyone have some insight on what the problem is here?
You can view the page in question here: http://www.ryanlaurence.com/new/
HTML
<!DOCTYPE html>
<html>
<head>
<link href="Style.css" rel="stylesheet">
</head>
<body>
<div id = "Banner">
<p>Banner</p>
</div>
<div id = "Nav">
<div id="stripe"></div>
<ul>
<li> Link - </li>
<li> Link - </li>
<li> Link - </li>
<li> Link </li>
</ul>
</div>
<div class="Content">
<div></div>
</div>
<div id="Footer">
</div>
</body>
</html>
CSS
body, html{
background-color: #404040;
margin: 0;
padding: 0;
}
#Banner{
background-color: #333333;
height:200px;
top:0px;
}
#stripe{
height: 10px;
top: -14px;
position:relative;
background-color: #262626
}
#Nav{
width:100%;
height: 60px;
background-color: #262626;
}
#Nav ul{
margin: 0;
color: gray;
position: relative;
text-align: center;
}
#Nav ul li{
display: inline;
}
#Nav ul a{
color: gray;
text-decoration: none;
padding-right: 10px;
padding-left: 10px;
font-size: 25px;
font-family: "Orator Std", verdana;
text-align: center;
}
#Nav ul li a:hover{
color: white;
}
.Content{
background-color: #333333;
/*height: 800px;*/
position: relative;
top: 5px;
}
.Content div{
height:800px;
}
#Footer{
background-color:#57B4CC;
height:150px;
}
Add the CSS:
#Banner p {margin:0}
The paragraph in your banner div has a default margin that you want to get rid of.
I tried to give margin-top: -7px. It worked. But not sure why its has some space over there.
Some elements and browsers has some default styles that you need to overwrite to meet your needs.
I suggest you to use CSS reset script by Eric Meyer.
This is not only fix your problem but also help you to prevent and save a lot of time from dealing with cross browser compatibility problems in the future.
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
margin:0;
padding:0
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block
}
body {
line-height:1
}
ol,ul {
list-style:none
}
blockquote,q {
quotes:none
}
blockquote:before,blockquote:after,q:before,q:after {
content:none
}
table {
border-collapse:collapse;
border-spacing: 0
}
Fiddle Demo
I've tried everything from text-align to setting margins. I want the nav bar to be centered horizontally and at the bottom of the div vertically.
html: http://www.joekellywebdesign.com/businesssample/index.html
<div id="navbar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="projects.html">Projects</a>
<ul>
<li>Restaurant</li>
<li>House</li>
<li>Mall</li>
</ul>
</li>
<li>About</li>
<li><a class="MenuBarItemSubmenu" href="services.html">Services</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="residential.html">Residential</a>
<ul>
<li>Housing</li>
<li>Storage</li>
</ul>
</li>
<li>Business</li>
<li>Government</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
css: http://www.joekellywebdesign.com/businesssample/css/styles.css
/* CSS Document */
* {
margin:0px;
padding:0px;
}
body {
background-color:#FF0;
}
#wrapper {
width:900px;
margin:10px auto;
background-color:#FFF;
}
#logo {
float:left;
width:200px;
background-color:#FFF;
}
#navbar {
float:right;
text-align:center;
width:700px;
margin: auto;
background-color:#FFF;
}
You could do something like this:
<style type="text/css">
div#container {
position:relative;
width: 500px;
height: 300px;
border: 1px solid black;
}
div#menu-container {
position: absolute;
bottom: 0;
width: 100%;
}
div#menu {
position: relative;
text-align: center;
}
</style>
<div id="container">
<div id="menu-container">
<div id="menu">
Hello World!
</div>
</div>
</div>
Check out this jsFiddle for a demonstration.
Using an absolute position would easily get it to the bottom:
You'd apply this to the #navbar: position: absolute; bottom: 0px;
Then you'd apply this to the parent: position: relative;
However, now that you've applied an absolute position, you should use a similar technique to center it horizontally. Since your navbar is 700px, we can use some math to center it using the same absolute position.
You'd apply this to the #navbar: left: 50%; margin-left: -350px;
Working example: http://jsfiddle.net/ky9av/
You can try this.
ul.MenuBarHorizontal {
margin-top: 8%;
float: right;
}
You can try with this,
ul.MenuBarHorizontal {
cursor: default;
font-size: 100%;
list-style-type: none;
margin: auto;
padding: 0;
width: 512px;
}
Secondly, as per your design, the navbar ends exactly where you ul ends,
so you might try this
#navbar {
background-color: #FFFFFF;
float: right;
margin: auto;
margin-top: 49px;
text-align: center;
width: 700px;
}
jsFiddle
The left red div will not go all the way down. I want it to go all of the way down, regardless of how tall the main ("li") div is.
css
.li_wrap {
padding:7px;
float:left;
}
.song-list li{
position: relative;
display: block;
padding:0;
margin-bottom:10px;
background: black;
color: yellow;
z-index:7;
text-decoration: none;
}
.rank_pos {
background:red;
margin:0;
padding:3px;
height:100%;
float:left;
}
body {font-size:12px; font-family:Verdana, serif;}
html
<ul class="song-list">
<li id="1">
<div class="rank_pos">1st</div>
<div class="li_wrap">Testing</div>
<div style="clear:both;"></div>
</li>
<li id="2">
<div class="rank_pos">2nd</div>
<div class="li_wrap">Testing</div>
<div style="clear:both;"></div>
</li>
</ul>
Or maybe there's a better way of doing it.
Clean up a little bit - http://jsfiddle.net/gDByS/2/
HTML
<li>
<span>3rd</span>
<div>Testing<br />Testing<br />Testing<br />Testing<br />Testing</div>
</li>
CSS
.song-list li{
position: relative;
display: block;
padding:0;
margin-bottom:10px;
background: black;
color: yellow;
z-index:7;
text-decoration: none;
overflow: hidden;
line-height: 22px;
}
ul li span{
background:red;
margin:0;
padding: 0 5px;
height:100%;
display: block;
position: absolute;
}
ul li div {
margin-left: 40px;
}
This page might guide you in the right direction:
http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
You could use jQuery for that: http://jsfiddle.net/SF24t/
Or there is a trick that helps in some cases: If you want, for example, to have both "boxes" separated by a border that goes all the way to the bottom, you can have that border painted in background image with repeat-y