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; }
Related
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;
}
How do I add a rule above and below my nav bar? I tried an HR tag, but that seemed to make a lot of space around the nav bar. Here is my html and here is the example of how I want to do it.
http://matthewtbrown.com/jeffandcricketquilt/
http://matthewtbrown.com/jeffandcricketquilt/rule.png
If you do not want to change your html at all, you can add this to your css
nav ul:before {
border-bottom: 1px solid white;
border-top: 1px solid white;
bottom: 5px;
content: "";
left: 5px;
position: absolute;
right: 5px;
top: 5px;
z-index:0;
}
nav ul {
overflow: auto;
position: relative;
background-color:#000;
}
nav ul li{
position:relative;
z-index:10;
}
and remove the background-color from the li elements (since i added it to the ul)
Use borders and padding:
* {
margin: 0;
padding: 0;
}
nav {
text-align: center;
background: black;
color: white;
padding: .2em;
}
ul {
padding: .5em;
border: 1px solid white;
border-left: none;
border-right: none;
}
nav li {
display: inline;
list-style-type: none;
padding: 0 2em;
}
Demo
I would apply an outline to the ul tag, so the css should be:
nav ul{
outline-color: white;
outline-style: solid;
outline-width: 2px;
outline-offset: -7px;
height: 60px;
width: 848px;
}
Try applying this CSS to the nav bar:
border-top: 1px solid #eee
border-bottom: 1px solid #eee
The easiest is to add a padding to the nav element, 4px makes good with width of li elements. Also add float: left
Now add border-top and border-bottom to the ul element. Add float: left here as well. This will switch your li element around as they have a fixed width. lower the width of them to 210px and things should be fine.
CSS additions to your code:
nav {
padding: 4px
float: left;
}
nav ul {
border-top: 1px solid white;
border-bottom: 1px solid white;
float: left;
}
nav li {
width: 210px;
}
If line-height is the same as font-size you can manipulate border distance by changing padding-bottom of list element, here is my example:
.headerSection ul.navigation li a {
font-size: 12px;
line-height: 12px;
text-decoration: none ;
padding-bottom: 10px;
border-bottom-color: transparent;
border-bottom-width: 5px;
border-bottom-style: solid;
}
.headerSection ul.navigation li a:hover {
border-bottom-color: #e8bf5d;
}
In a navigation design I need to give border like this. I know how to create double border but don't how to create border which has some gap on top and bottom.
I know it can be done using an images but curious to know if it's possible to make in CSS only
Yes, it can easily be done using just CSS.
demo
HTML:
<ul class='navigation'>
<li><a href='#'>nav item</a></li>
<!-- as many navigation items as you would like -->
<li><a href='#'>nav item</a></li>
</ul>
Relevant CSS:
.navigation { padding: 0; list-style: none; }
.navigation li {
float: left;
padding: .35em 0;
border-top: solid 2px #e4e4e3;
border-bottom: solid 3px #94a10f;
background: linear-gradient(#fafafa, #e5e5e5);
}
.navigation a {
display: block;
padding: .5em;
border-left: solid 1px #fff;
border-right: solid 1px #a4a4e3;
color: #000;
text-decoration: none;
}
.navigation li:first-child a { border-left: none; }
.navigation li:last-child a { border-right: none; }
Alternatively, if you don't want to have a non-clickable area at the top and bottom, you could try it the other way:
demo
CSS:
.navigation {
display: inline-block;
overflow: hidden;
padding: .35em 0;
border-top: solid 2px #e4e4e3;
border-bottom: solid 3px #94a10f;
background: linear-gradient(#fafafa, #e5e5e5);
list-style: none;
}
.navigation li {
float: left;
border-left: solid 1px #fff;
border-right: solid 1px #a4a4e3;
}
.navigation a {
display: block;
padding: .5em;
margin: -.35em 0;
color: #000;
text-decoration: none;
}
.navigation li:first-child { border-left: none; }
.navigation li:last-child { border-right: none; }
A third way to do this, also extending the clickable area to the borders as well would be to use pseudo-elements on the links to get the lateral borders.
demo
CSS:
.navigation { margin-top: 7em; list-style: none; }
.navigation li {
float: left;
background: linear-gradient(#fafafa, #e5e5e5);
}
.navigation a {
display: block;
position: relative;
padding: .85em;
border-top: solid 2px #e4e4e3;
border-bottom: solid 3px #94a10f;
color: #000;
text-decoration: none;
}
.navigation a:before {
position: absolute;
top: .35em; bottom: .35em; left: 0;
border-right: solid 1px #fff;
border-left: solid 1px #a4a4e3;
content: '';
}
.navigation li:first-child a:before { border: none; }
I've been working on a css menu and it works fine in every browser besides Internet Explorer.
The issue can bee seen below: The first <li> element is not properly aligned. In fact, it's pushed down.
#sub-navigation {
background: url("{T_THEME_PATH}/images/subnavigation.png") repeat-x;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
height: 25px;
line-height: 25px;
border-bottom: 1px solid #dfeaf1;
border-left: 1px solid #dfeaf1;
border-right: 1px solid #dfeaf1;
border-top: 3px solid #ffffff;
}
#second-navigation li {
border-right: 1px solid #cddfeb;
padding-right: 14px;
padding-left: 14px;
margin-left: 0px;
float: left;
display: block;
font-size: 11px;
font-weight: none;
font-color: #6b6b6b;
}
#second-navigation ul {
position: absolute;
display: none;
z-index: 999;
background: #4e4e4e;
border: none;
border-radius: 2px;
width: 80px;
color: #FFFFFF;
}
<div id="sub-navigation">
<ul id="second-navigation" class="leftside">
<li>
<center>Calendar</center>
</li>
<li>
HH Converter
</li>
<li>
Poker Bonuses
</li>
</div>
Anyone know how to fix this, so it works in Internet Explorer.
Unfortunately, I can't test the actual code for you at the moment. Test stations are being moved around. From experience and off the top of my head -- there are a few errors.
The code:
#sub-navigation {
background: url("{T_THEME_PATH}/images/subnavigation.png") repeat-x;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
height: 25px;
line-height: 25px;
border-bottom: 1px solid #dfeaf1;
border-left: 1px solid #dfeaf1;
border-right: 1px solid #dfeaf1;
border-top: 3px solid #ffffff;
}
#second-navigation ul {
position: absolute;
display: none;
z-index: 999;
background: #4e4e4e;
border: none;
border-radius: 2px;
width: 80px;
color: #FFFFFF;
list-style:none;
}
#second-navigation li {
border-right: 1px solid #cddfeb;
padding-right: 14px;
padding-left: 14px;
margin-left: 0px;
float: left;
display: inline-block;
font-size: 11px;
font-weight: none;
font-color: #6b6b6b;
list-style-type:none;
}
#second-navigation li a {
display:block;
}
#second-navigation .center {
text-align:center;
}
<div id="sub-navigation">
<ul id="second-navigation" class="leftside">
<li>
Calendar
</li>
<li>
HH Converter
</li>
<li>
Poker Bonuses
</li>
</ul>
</div>
The changes are:
Unless you have a reset somewhere (like YUI Reset) ul and li should
include a list-style: none; and list-style-type:none;
On Internet Explorer, float:left; should be accompanied by
display:inline-block; NOT display:block;
On most browsers, elements within a p and a tag, will work... IE
usually throws a hissy fit. Use CSS to declare a text-align center...
which you should be doing anyways.
Hopefully this will help!
On a side note, CSS wise... if you are wanting the links centered and what not -- get rid of all the padding & margin write ups... browsers consider padding & margins differently and could be causing the issue.
A simple:
a {
display:block;
line-height: 25px;
text-align:center;
}
Would do the trick.
I did this before but I can't remember how to do it again.
Image of what i'm trying to get:
and what I have so far
In between each link,, theres two borders. yes I know how to make the effect, put two borders together. But the problem is I can't do it!
At first I tried Jefferey ways Technic.
nav ul li:before { border-left: 1px solid red; content: ''; margin: 0 -30px; position: absolute; height: 20px; }
nav ul li:after { border-right: 1px solid white; content: ''; margin: 0 39px; position: absolute; height: 20px; }
It worked, except the borders from the left and right end of the nav is sticking out. I tried :first-of-type and :last-of-type to try to remove the borders at the end, but they didn't go away.
Then, I tried just using both :first-of-type and :last-of-type to create the borders,but again. it didn't work. So I don't really know what to do to create the effect! I wish there was a way to remove the front and end borders with Jefferey Ways code but I can't. Can anybody help?
Heres the whole css of the nav.
nav { background: #282828 url(../images/nav-bg.png) repeat-x; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; margin: 24px auto; padding: 11px 29px; width: 670px; }
nav ul {}
nav ul li { display: inline; padding: 32px; margin: 0 auto; }
nav ul li:before { border-right: 1px solid red; }
nav ul li:odd { border-right: 1px solid white; }
nav ul li a { color: #626262; height: 20px; }
#nav {
background: #282828 url(../images/nav-bg.png) repeat-x;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
margin: 24px auto;
padding: 11px 29px;
width: 670px; }
#nav ul { list-style: none; padding: 0; margin: 0;}
#nav ul li {
display: inline;
padding: 32px;
margin: 0 auto;
border-left: 1px solid #LIGHTERCOLOR;
border-right: 1px solid #DARKERCOLOR;
}
#nav ul li:first-child { border-left: 0; }
#nav ul li a { color: #626262; height: 20px; }
But I would suggest you cut out the separator as an image and put it on li as
background: transparent url(border-image.png) left center no-repeat;
and on the li:first-child have
background: none;