How can i put a border bottom INSIDE my <li> menu? - html

Here is my menu :
Here is my li css :
li {
float: left;
border-right: 1px solid #ccc;
padding: 25px 20px
}


Set box-sizing property to border-box:
li {
box-sizing: border-box;
float: left;
border-bottom: 1px solid #ccc;
padding: 25px 20px
}


You can do it like this:
* {
margin: 0;
padding: 0;
}
ul {
margin: 0;
}
ul li {
display: inline;
margin: 0;
padding: 0;
}
ul li a {
margin: 0;
padding: 10px 15px;
display: inline-block;
border-right: 1px solid black;
border-bottom: 1px solid red;
text-decoration: none;
}
ul li a:hover {
text-decoration: underline;
}
<ul>
<li>Home</li><li>About</li><li>Stuff</li>
</ul>

Related

Make navigation bar item float right

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/

Place navigation bar at bottom of header

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;
}

How to center a horizontal navigation bar

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%;}

Center horizontal navigation menu

Struggling to center the nav bar in the middle of the browser... Tried a number of the things found through google but no luck as yet. Seems like it should be such an easy thing to do but its turned out to be a pain in the neck!
Heres the code.
<div id="nav">
<ul>
<li class="home">Home</li>
<li class="detail">About</li>
<li class="work">Work</li>
<li class="contact">Contact</li>
</ul>
</div>
#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
}
#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:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}

Try not using floats but rather display:inline-block instead.
JSfiddle Demo
CSS
ul {
padding: 0;
margin: 0;
}
#nav {
//width: 100%; /* not required */
//float: left; /* not required */
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
width:100%;
display: block;
list-style-type: none;
text-align: center; /* add this */
}
#nav li {
//float: left; /* remove */
display: inline-block; /* add this */
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
EDIT - added reset of ul padding/margin

Add a margin-top:50%; to it
just like this:
#nav {
width: 100%;
float: left;
margin-top:50%;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
}
#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:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
Does this solve your problem?
Or didn't I understand your question ?

Just add text-align: center; in you #nav style. And reset UL default margin It should be like this
HTML
<div id="nav">
<ul>
<li class="home">Home</li>
<li class="detail">About</li>
<li class="work">Work</li>
<li class="contact">Contact</li>
</ul>
</div>
CSS
#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
margin: 0;
}
#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:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}

<ul> centered horizontally inside a div-container

I would like to centered the ul-list inside the div-container.
My Code:
<div class="subnav_wines">
<ul>
<li>ToBeDefined
</li>
<li>Valpollicella
</li>
<li>Veneto
</li>
<li id="dd_sort" class="last"><a id="" href="#">Sorted by</a>
</li>
</ul>
<div style="clear:both"></div>
</div>
And the CSS:
.subnav_wines {
border-bottom: 1px solid #b58150;
padding: 0;
margin-bottom: 0px;
}
.subnav_wines ul {
padding: 0;
margin: 0;
text-align: center;
}
.subnav_wines li {
float:left;
padding: 10px 25px 10px 25px;
margin: 0;
}
.subnav_wines li.last {
border-right: 0;
padding: 0;
}
.subnav_wines li a {
text-transform: uppercase;
color: #b58150;
text-decoration: none;
}
.subnav_wines li a:hover {
border-bottom: 1px solid #b58150;
}
.subnav_wines li a.active {
border-bottom: 1px solid #b58150;
}
Can anyone help me?
Thanks.

The float:left for .subnav_wines li is pushing the list items to the left of its parent ul. Try removing the float:left for .subnav_wines li and add display:inline-block;
.subnav_wines li {
display:inline-block;
padding: 10px 25px 10px 25px;
margin: 0;
}
DEMO

Add the below to your CSS
.subnav_wines {
text-align: center;
}
.subnav_wines ul {
display: inline-block;
}
Demo

hi try the below code for ul
.subnav_wines { border-bottom: 1px solid #b58150; padding: 0; margin-bottom: 0px; text-align:center}
.subnav_wines ul { padding: 0; display:inline-block; }
working example : http://jsfiddle.net/zQTD3/