I have a navigation bar with four links. I want to remove the extra space to the left of "Projects" and the the right of "Contact". It appears to be part of the unordered list, and not padding or margin.
Here is the fiddle http://jsfiddle.net/95g12kpe/
<nav class="navbar">
<div class="container">
<ul class="navbar-list">
<li>Projects</li>
<li>Schedule</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
</nav>
.navbar {
/*position: fixed;*/
top: 0;
left: 0;
z-index: 9999;
padding: 0;
text-align: center;
}
.navbar ul {
list-style: none;
background-color: #fff;
border-bottom: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
margin-left: -4px;
margin-right: -4px;
}
.navbar li {
position: relative;
display: inline;
margin-bottom: 0;
margin-left: -20px;
}
.navbar li:hover {
color: #000033;
}
.navbar a {
display: inline-block;
padding-right: 25px;
padding-left: 25px;
text-decoration: none;
line-height: 6.5rem;
color: #222;
font-size: 1.6rem;
font-weight: 600;
}
.navbar a:hover {
color: #006699;
background-color: #000033;
}
It is a block element, so it has width 100% by default, set it to display: inline-block; and it should be fine.
http://jsfiddle.net/95g12kpe/1/
Set a width attribute to your .navbar ul, and to keep it centered, set your horizontal margin attributes to auto, like this for example :
.navbar ul {
list-style: none;
background-color: #fff;
border-bottom: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
margin-left: auto;
margin-right: auto;
width: 500px;
}
Related
Is it possible to make a capsule shape using border-radius without a set width or height and include between delimeter?
Yes, You can try this way
.container {
width: 90%;
padding:20px;
margin: 10px auto;
background:#000;
}
ul {
list-style: none;
padding: 7px;
background: #333;
border-radius: 12px;
display: inline-flex;
}
li {
padding: 0 10px;
border-right: 1px solid #999;
line-height: 1;
color: #999;
font-size: 12px;
display: inline-block;
vertical-align: middle;
}
li:last-child {
border-right: none;
}
<div class="container">
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
</div>
I've built a simple center aligned navigation bar for my website. However, the borders of the elements in the navigation bar aren't perfectly overlapping, giving a disjointed look. Here's what I mean:
Notice the double-borders for each link. Note that even I remove one of the borders, the hover effect still reveals the imperfection:
How can I fix this via creating borders that perfectly overlap?
Here's the code:
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
text-align: center;
}
ul.navbar li {
margin: auto;
display: inline-block;
border-right: 1px solid #ffb366;
border-left: 1px solid #ffb366;
}
ul.navbar li a {
display: inline-block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>Home</li>
<li>Photos</li>
<li><b>New Account</b></li>
<li>Old Account</li>
</ul>
Well, inline-block elements have a some surrounding 'space', by default:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
text-align: center;
}
ul.navbar li {
margin: auto;
display: inline-block;
border-right: 1px solid #ffb366;
box-sizing:border-box;
margin-left:-4px;
}
ul.navbar li:first-child {
border-left: 1px solid #ffb366;
}
ul.navbar li a {
display: inline-block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
box-sizing:border-box;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>Home</li>
<li>Photos</li>
<li><b>New Account</b></li>
<li>Old Account</li>
</ul>
Also, keep just right border, and place left border to first li....
If you set both the li and the a element's display value to inline-block it will fix the issue you have:
/* navigation bar*/
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size:90%;
text-align: center;
}
ul.navbar li {
margin: auto;
display: inline-block;
border-right: 1px solid #ffb366;
border-left: 1px solid #ffb366;
}
ul.navbar li a {
display: inline-block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>
Link 1
</li><li>
Link 2
</li><li>
Link 3
</li><li>
Link 4
</li>
</ul>
This will also allow you to hover the entire item in the menu (and not only part of it).
Another option
(without changing the HTML structure) is to change the font-size of the ul element (and set font-size to the li):
l.navbar {
font-size: 1px;
}
ul.navbar li {
font-size: 14px;
}
Working example:
/* navigation bar*/
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size: 1px;
text-align: center;
}
ul.navbar li {
margin: auto;
display: inline-block;
border-right: 1px solid #ffb366;
border-left: 1px solid #ffb366;
font-size: 14px;
}
ul.navbar li a {
display: inline-block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
Add only border-left to all li items. And for the last one add border-right as well
ul.navbar li {
margin: auto;
display: inline;
border-left: 1px solid #ffb366;
}
ul.navbar li:last-child, ul.navbar li:hover{
border-right: 1px solid #ffb366;
}
Update: The issue was in the font-size of the ul
ul.navbar {
margin: 0;
padding: 0;
background-color: #ff9933;
text-align: center;
font-size: 0;
}
ul.navbar li {
margin: 0;
font-size: 14px;
padding:0;
display: inline-block;
border-left: 1px solid #ffb366;
border-right: 1px solid #ffb366;
width:auto;
}
Plnkr: https://plnkr.co/edit/8j5It4jlrZRgTMxsArAu?p=preview
Tried display: inline-block; text-align: center; and many things from the Internet, but nothing helped.
#nav{
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #C9C9C9;
border-bottom: 5px solid #ddd;
border-top: 1px solid #ccc; }
#nav li {
list-style: none;
float: left; }
#nav li a {
display: block;
padding: 5px 5px;
font-size: 13px;
text-decoration: none;
color: #000;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #fff;
background-color: #000;
-moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; }
HTML:
<ul id="nav">
<?php wp_nav_menu('menu=header_menu&container=false'); ?>
<div class="clear"></div>
</ul>
It looks like this:
... and I don't know how to center it.
basic is :
ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
li {
display:inline-block;
}
Note that if <li> floats, you lose :)
http://jsfiddle.net/KWG2j/
then , if you need to center ul with fluid width: go one step higher in html.
http://jsfiddle.net/KWG2j/1
nav {
text-align:center;
}
nav ul {
margin: 0;
padding: 0;
display:inline-block;
list-style: none;
background-color: #C9C9C9;
border-bottom: 5px solid #ddd;
border-top: 1px solid #ccc;
}
nav li {
display:inline-block;
}
nav li a {
display: block;
padding: 5px 5px;
font-size: 13px;
text-decoration: none;
color: #000;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #fff;
background-color: #000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
Set a fixed width on your UL, then adjust it's margin as
margin: 0 auto;
This will apply equal margins to both the left and right of block elements that have a definite width.
http://jsfiddle.net/Be4Q2/
#nav {
margin: 0;
padding: 0;
text-align:center;
list-style: none;
background-color: #C9C9C9;
border-bottom: 5px solid #ddd;
border-top: 1px solid #ccc;
}
#nav li {
display:inline-block;
}
#nav li a {
display: block;
padding: 5px 5px;
font-size: 13px;
text-decoration: none;
color: #000;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #fff;
background-color: #000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
<ul id="nav">
<li>Home</li>
<li>Projects</li>
<li>Contact</li>
<li>About</li>
<div class="clear"></div>
</ul>
My navigation bar currently is scrunching all my text together. I have "headers" for the dropdown list, and the headers aren't forcing a line.
The HTML looks like this:
<li><p>Services</p><ul>
<li id="ITServices"><p>IT Services</p></li>
<li>Portals, Collaboration & Workflows</li>
<li>Business Intelligence & Dashboards</li>
<li>Mobile Development</li>
<li>Custom Application Development</li>
<li id="healthcare"><p>Healthcare Services</p></li>
<li>EMR, ICD 10 and Healthcare Consulting</li>
</ul></li>
CSS looks like this:
#healthcare p {
width: 280px;
margin-left: 0px;
padding: 0px;
display: inline;
}
#ITServices p {
width: 280px;
margin-left: 0px;
padding: 0px;
display: inline;
}
.navbar li:hover ul {
left: 15px;
top: 40px;
background: #7FBA00;
padding: 1px;
width: 280px;
border: none;
text-align: left;
}
.navbar li:hover ul a {
margin: -7px -10px -7px -15px;
text-align: left;
padding: 0px 0px 0px 10px;
display: block;
font-size: 11px;
width: 259px;
line-height: 25px;
color: #000;
background-color: #F0F0F0;
text-decoration: none;
border-left: 10px solid #7FBA00;
border-bottom: 1px solid transparent;
border-right: 1px solid transparent;
border-top: 1px solid transparent;
}
.navbar li:hover ul a:hover {
background: #7FBA00;
border-left: solid 10px #fff;
border-top: solid 1px #fff;
border-bottom: solid 1px #fff;
width: 260px;
}
Ahhh! Right? I'm trying to get it to all display in a list with basically line breaks after each li element. Help?
Basically a rule is over-riding your style. display property called block makes an element to behave like a block element, thus covering full line.
Your use might be the following, so try this
li > ul li { display: block; }
At this Test Link I seek to install header and main site navigation on to the top of a blog script.
My clear:both; worked on the main site script but throws everything to the side now. Have tried numerous fixex without success! Thanks in advance for ant pointers to resolve. Clear:both; is in the footer.
/*/////////////////////MAIN SITE NAVIGATION BAR////////////////////*/
.dropnav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #3b3b44; /*Navigation Active Background*/
border-top: 1px solid #ccf;
}
.dropnav ol {
list-style: none;
width: 950px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.dropnav li {
float: left; }
.dropnav li a {
display: block;
padding: 8px 25px;
text-decoration: none;
font-family: Helvetica, arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: #fff; /*Active Text Color*/
border-right: 1px solid #ccf;
border-bottom: none;
}
.dropnav li:first-child a {
border-left: 2px solid #ccf; }
.dropnav li a:hover {
color: #000; /*Active Hover Color*/
background-color: #8db3ff; } /*Navigation Hover Background*/
/*////////////////STYLING TO DROPDOWN MENU//////////////////////*/
.dropnav li ol {
display: none;
width: 13em; } /*Define width of dropdown button*/
.dropnav li:hover ol {
display: block;
position: absolute;
margin: 0;
padding: 0; }
.dropnav li:hover li {
float: none; }
.dropnav li:hover li a {
background-color: #3b3b44; /*Navigation Active Background*/
border-bottom: 1px solid #ccf;
border-top: 1px solid #ccf;
border-right: 1px solid #ccf;
border-left: 1px solid #ccf;
font-size: 16px;
color: #fff; } /*Text Color*/
.dropnav li li a:hover {
color: #000;
background-color: #8db3ff; /*Navigation Hover Background*/
}
/*//////////////////END MAIN SITE NAVIGATION////////////////////*/
#container {
width: 950px;
padding-left: 0px;
padding-right: 0px;
margin: 1px auto;
background: #fafafa;
}
#header {
width: 950px;
margin-top: 15px;
}
#content {
padding-left: 5px;
padding-right: `5px;
}
#footer {
clear: both;
background: #3b3b44;
color: #ccf; /*text*/
/*margin-top: 10px;*/
margin-bottom: 10px;
padding-top: 5px;
padding-left: 15px;
padding-bottom: 5px;
border-top: 2px solid #cc0;
line-height: 1.2em;
}
you have two id's with the same name as container. you id needs to be unique and also id fieldset and i guess all your tags are not closed properly very those.
you can put a clear div after you menu to clear out this row. It is the same principle use in the 960 grid sytem.
www.960.gs
But here is a link to see the code and the result.
http://jsfiddle.net/etienne_carre/9x2P3/
Thx