I have made a navigation bar which functions as I want it to, the only problem is that the bar is placed on the top of my black header, where I would like it to be placed at the bottom of the header. How do I fix this?
My code (html):
<div id="navBarTop">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
My code (css):
#navBarTop {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #FFB700;
border-bottom: 1px solid #4c4c4c;
}
#navBarTop ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0;
margin-left: 350px;
}
#navBarTop li {
float: left;
}
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #4c4c4c;
border-right: 1px solid #4c4c4c;
}
#navBarTop li:first-child a {
border-left: 1px solid #4c4c4c;
}
#navBarTop li a:hover {
background-color: #ffffff;
}
Use position: relative on parent div and position: absolute with bottom: 0 on navigation div.
checkout fiddle for solution: http://jsfiddle.net/pctdwz1f/
.header{
background:#000;
height:250px;
position:relative;
}
#navBarTop {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #FFB700;
border-bottom: 1px solid #4c4c4c;
position:absolute;
bottom:0;
}
Related
My problem is that I want to have spacing between the navigation links. I have searched over the internet but all I get are reducing the space.
To be specific, I want to have spacing in between each navigation link that are bordered with a black border.
These are my codes for the navigation bar. I would really appreciate some help. thank you.
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
background-color: #fff;
border: 5px solid #000;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li {
text-align: center;
border-bottom: 5px solid #000;
}
li:last-child {
border-bottom: none;
}
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Here it is:
<style>
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
border: 5px solid #000;
background-color: #fff;
}
li {
text-align: center;
margin-bottom:10px;
}
li:last-child {
margin-bottom:0;
}
li a:hover {
background-color: #555;
color: white;
}
</style>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Demo: https://jsfiddle.net/4fLbx4xa/
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<style>
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
background-color: #fff;
}
li{
width:100%;
display: block;
margin-top:10px; //this is the height you want
border: 5px solid #000;
color: #000;
background:#000;
padding:10px 0;
}
li a {
text-align: center;
padding: 8px 16px;
text-decoration: none;
color:#fff;
}
li:first-child {
margin-top:0;
}
li:hover {
background-color: #555;
color: white;
}
</style>
You need to use margin to add the white space, but the borders needed a little tweaking, see comments below
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
background-color: #fff;
/*border: 5px solid #000; moved to LI element*/
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
margin-bottom:10px; /*add some margin to create the white space*/
border: 5px solid #000; /*add the border to each LI element rather than UL*/
}
li {
text-align: center;
/*border-bottom: 5px solid #000; remove this bottom border as handled in LI css*/
}
Not sure what you want to achieve but i understood a line between the links, this might help you also if you want it below the links..
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 400px;
background-color: #fff;
border: 5px solid #000;}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;}
li {
text-align: center;
float: left;
border-right:solid 1px black;
}
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
I've been following this tutorial:
http://www.mrc-productivity.com/techblog/?p=1049
I want to make a single item in the navigation bar float to the right, but simply adding float:right; to that particular item didn't do anything. In fact, changing the float:left to float:right only reversed the ordering of the navigation bar items.
Here's a snippet:
#CHARSET "UTF-8";
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
height: 50px;
margin: 0;
z-index: 99;
position: relative;
background-color: #366b82;
}
.navbar {
height: 50px;
padding: 0;
margin: 0;
position: absolute;
border-right: 1px solid #54879d;
}
.navbar li {
height: auto;
width: 150px;
float: left;
text-align: center;
list-style: none;
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #366b82;
}
#navright {
float: right;
}
.navbar a {
padding: 18px 0;
border-left: 1px solid #54879d;
border-right: 1px solid #1f5065;
text-decoration: none;
color: white;
display: block;
}
.navbar li:hover, a:hover {
background-color: #54879d;
}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {
background-color: #54879d;
}
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.navbar li ul li a:hover {
background-color: #366b82;
}
<body>
<div id="wrap">
<ul class="navbar">
<li>Home</li>
<li>Registers
<ul>
<li>People</li>
</ul>
</li>
<li>Operational</li>
<li>Financial</li>
<li>Reports</li>
<li id="navright"><a id="logout" href="/login">Logout</a></li>
</ul>
</div>
</body>
<li id="navright"><a id="logout" href="/login">Logout</a></li>
Just need to get that "Logout" button to be on the right.
Make the containing UL element have a width of 100%
.navbar {
height: 50px;
width: 100%;
padding: 0;
margin: 0;
position: absolute;
border-right: 1px solid #54879d;
}
https://jsfiddle.net/txve55jn/2/
I have made a navigation bar and I am trying to make it centered to fit all screens, with position absolute and then use left: 50%; and then place it by margin-left: 100px; to get it exactly where I want it. I have done this to all my buttons and it worked, but when I try doing it on my navigation bar, it moves the whole bar to the middle and when I then move it, it won't work.
html code:
<div id="navBarTop">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
css code as it is normally:
#navBarTop {
width: 100%;
float: left;
padding: 0;
background-color: #FFB700;
border-bottom: 1px solid #4c4c4c;
position: absolute;
bottom: 0;
}
#navBarTop ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0;
margin-left: 350px;
}
#navBarTop li {
float: left;
}
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #4c4c4c;
border-right: 1px solid #4c4c4c;
}
#navBarTop li:first-child a {
border-left: 1px solid #4c4c4c;
}
#navBarTop li a:hover {
background-color: #ffffff;
}
css when I am trying to make it centered(doesn't work):
#navBarTop {
width: 100%;
float: left;
padding: 0;
background-color: #FFB700;
border-bottom: 1px solid #4c4c4c;
position: absolute;
left: 50%;
margin-left: 100px;
bottom: 0;
}
#navBarTop ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0;
margin-left: 350px;
}
#navBarTop li {
float: left;
}
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #4c4c4c;
border-right: 1px solid #4c4c4c;
}
#navBarTop li:first-child a {
border-left: 1px solid #4c4c4c;
}
#navBarTop li a:hover {
background-color: #ffffff;
}
I think you're trying too hard.
#navBarTop {
padding: 0;
background-color: #FFB700;
border-bottom: 1px solid #4c4c4c;
position: absolute;
text-align: center;
top: 50px;
left: 0;
right: 0;
}
#navBarTop ul {
list-style: none;
margin: 0 auto;
padding: 0;
display: inline-block;
}
#navBarTop li {
display: inline-block;
}
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family:"Arial";
color: #4c4c4c;
border-right: 1px solid #4c4c4c;
}
#navBarTop li:first-child a {
border-left: 1px solid #4c4c4c;
}
#navBarTop li a:hover {
background-color: #ffffff;
}
<div id="navBarTop">
<ul>
<li>test
</li>
<li>test
</li>
<li>test
</li>
<li>test
</li>
</ul>
</div>
I am having trouble centering my navigation bar.
This is the example nav bar I am working with
<style>
/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff; }
/* End navigation bar styling. */
</style>
but as seen, the navigation bar is not centered.
I have tried using auto margins but it doesn't work. How do I go about fixing this?
Add text-align:center; to #nav
Remove float:left; and add display: inline-block; to #nav li
Change to this:
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
text-align:center;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
display: inline-block;
}
JSFiddle Demo
display: inline-block;
This should center the navigation bar
try this new css:
#nav {
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
position: relative;
border-top: 1px solid #ccc; }
#nav li {
display: inline-block;}
#wrap {
width: 750px;
margin: 0 auto;
background-color: #fff;
text-align: center;
width:100%;}
I am trying to design some tabs using CSS and following this post. Unfortunately, I can't manage to have the selected tab font color to black.
I have created a JsFiddle to describe the issue. What am I doing wrong?
Here is the HTML:
<div id="header">
<h1>Tabs</h1>
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
Here is the CSS:
h1 {
margin: 0;
padding: 0 0 5px 0;
}
#header a {
text-decoration:none;
}
#header ul {
list-style: none;
padding:0;
margin:0;
}
#header li {
float: left;
border: 1px solid;
border-color: black;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding: 2px 4px;
/* border-bottom-width: 0; */
margin: 2px 2px 0 0;
background: black;
}
#header li a {
color: white;
}
#header #selected {
position: relative;
/* top: 1px; */
background: white;
}
#header #selected li a {
color: black;
}
Updated jsFiddle: http://jsfiddle.net/zK7y2/1/
#header #selected li a {
color: black;
}
this addresses a <* id="header"><* id="selected"><li><a>.
What you want to select is a <* id="header"><li id="selected"><a>.
So use:
#header li#selected a {
color: black;
}