Hi Im having troubles rounding corners on my navigation bar, when I write -
border-radius: 15px; it round all the corners of the <a> but I want only to round of the <li> so only the margins of the whole toolbar.
Here is a fiddle.
thanks
EDIT
only want home and contact to be rounded
This also works:
ul#list-nav li {
border:2px solid blue;
float:left;
overflow:hidden;
}
li.first{
border-top-left-radius:15px;
border-bottom-left-radius:15px;
}
li.last{
border-top-right-radius:15px;
border-bottom-right-radius:15px;
}
Here is the updated fiddle.
To round the corners of the first and last li elements. Try
:first-child and :last-child selectors
Check out the live Demo: http://jsfiddle.net/HYhBe/33/
Add two new classes; one that rounds the left corners and one that rounds the right corners and apply these to the first and last element respectively.
Fiddle
.round_left {
border-radius: 15px 0 0 15px;
}
.round_right {
border-radius: 0 15px 15px 0;
}
<ul id="list-nav">
<li>HOME</li>
<li>SERVICES</li>
<li>GALLERY</li>
<li>THE WAY WE WORK</li>
<li>CONTACT</li>
</ul>
Link updated - http://jsfiddle.net/HYhBe/24/
ul#list-nav li -> float:left & overflow:hidden;
you can remove display inline. li is a block level element.
ul#list-nav li {
border-radius: 15px;
float:left;
overflow:hidden;
}
-- For updated question --
Remove border-radius property from 'ul#list-nav li a' and add to your CSS file:
ul#list-nav li:first-child a{ border-radius: 15px 0 0 15px;}
ul#list-nav li:last-child a{ border-radius: 0 15px 15px 0;}
Related
I have a simple navigation Bar and some styling with CSS already.
The nav Bar will have a white border on along the top for the inner links.
For the two outer links I want there to be a border on the left for the left link and on the right for the right link and also curved corners but i don't know how to focus the CSS on just these two li's.
I tried to give the li an id of home but that didn't work
i'v also tried putting the curved corners code in the ul and the NavBar tags.
Here is wht I have tried
<div id="NavBar">
<ul>
<li id="Home"><strong>Home</strong></li>
<li><strong>About Us</strong></li>
<li><strong>Products</strong></li>
<li><strong>Policies</strong></li>
<li id="ContactUs"><strong>Contact Us</strong></li>
</ul>
And this is the CSS which i have tried to focus on the one li home.
#NavBar li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
border:solid 3px #FFF;
border-bottom:0px;
width:20%;
}
#NavBar li Home {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
border:solid 3px #FFF;
border-bottom:0px;
width:20%;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
Thanks for any help
Created a JSFiddle: https://jsfiddle.net/b4ejndkz/
If you're going to use width:20% and specify a border width, you'll need box-sizing:border-box;, that way it'll take into account the border size when determining total width. Otherwise it'll split off into 2 lines like it is at the moment.
Then you can set a specific corner to apply a border radius on by doing: border-radius: 5px 0 0 0; (top left, top right, bottom right, bottom left).
You could do it with id selectors https://jsfiddle.net/b4ejndkz/2/... or instead use the CSS selectors :first-child and :last-child to select your first and last elements of your list:
#NavBar li {
box-sizing:border-box;
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
border:solid 3px #FFF;
border-bottom:0px;
width:20%;
}
#NavBar li:first-child {
border-radius: 5px 0 0 0;
}
#NavBar li:last-child {
border-radius: 0 5px 0 0;
}
https://jsfiddle.net/b4ejndkz/1/
Use :first-child and :last-child.
To access only the first or last element of your list, do something like this:
ul li:first-child {
Styles for first element
}
ul li:last-child {
Styles for last element
}
With that, you can apply the needed styles to the matching links.
i've been designing an menu for my website. i've reached an issue with converting in to html/css. The idea is to have an divider line on each side of the text and on mouse over the navigation lines will disappear and show the hover image. but whatever i do the line is still there on one of the sides.
An image of my navigation menu
nav-lnie.png: is just only the line
hover.png is the whole mouseover image
does anybody have a solution or an explanation how to do this?
css looks like this:
.navigation{
width:370px;
float:left;
position: absolute;
left: 300px;
background:url(../images/nav-lnie.png) repeat-y 0 0;
padding:0 0 0 4px; font-size:14px;
font-family:Arial, Helvetica, sans-serif;
color:#fff; text-shadow:1px 1px 1px #333
}
.navigation ul li{background:url(../images/nav-lnie.png) repeat-y right 0;
margin:0 2px 0 0;
}
.navigation ul li a{
display:block;
float:left;
width:90px;
height:38px;
padding:70px 0 0 0;
text-align:center;
color:#fff;
text-decoration:none;
}
.navigation ul li a:hover{
background:url(../images/hover.png) repeat-x;
}
And html like this:
<div class="navigation">
<ul>
<li>Videos</li>
<li>Top Videos</li>
<li>Upload</li>
<li>FAQ</li>
</ul>
</div>
It's most likely due to the margin code you have here:
.navigation ul li{
background:url(../images/nav-lnie.png) repeat-y right 0;
margin:0 2px 0 0;
}
Since there's a 2px margin on the right of each menu item, the left margin won't get hidden if you mouse over the next element. If the margin isn't really needed, you can remove it and it should work fine, given that there's enough space. If it's necessary, then on the hover command, you can change the spacing on the element:
.navigation ul li a:hover{
background:url(../images/hover.png) repeat-x;
margin-left: -2px;
padding-left: 2px;
}
Of course, it's a rough hack to fix the problem. Spacing can be adjusted on both ends as well.
firefox is the only browser not showing this magic gap. i don't really understand why this gap is showing up to be honest, i'm assuming some of you have ran into this and there is a simple solution i don't really understand why this gap is showing up to be honest, i'm assuming some of you have ran into this and there is a simple solution
here is my css menu code here is my css menu code here is my css menu code
#tabs {
font: bold 11px/1.5em Verdana;
float:left;
width:800px;
height:35px;
background:#FFFFFF;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:7px 10px 0 10px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("images/tableft14.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("images/tabright14.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#000;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}
This is the css code thats below the menu div
#main-lower {
height: 700px;
background-color:white;
}
#specials {
background-color:#F0F0F0;
width: 870px;
height: 100%;
float: left;
border:1px solid #e2e2e2;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
i don't really understand why this gap is showing up to be honest, i'm assuming some of you have ran into this and there is a simple solution
stright from source code
<div id="tabs">
<ul>
<li><a href='http://' title=''><span>New Deals</span></a></li><li><a href='http://' title=''><span>Liquor</span></a></li><li><a href='http://' title=''><span>Beverages</span></a></li><li><a href='http://' title=''><span>General</span></a></li><li><a href='http://' title=''><span>Fountain Drinks</span></a></li>
</ul>
</div>
Quite often you get "mysterious gaps" on lists if you have new lines between the <li> elements.
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Throw them on one line to see if that gets rid of your gap.
<ul><li></li><li></li><li></li></ul>
If that works then this is a duplicate of: Unwanted margin in inline-block list items
Since your gap is below your list you will want to inspect the css display for the item below it and possibly remove lines there as well. But without seeing your html this may not be the issue at all!
For an explanation on why gaps show up on inline elements see here:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Excerpt:
This isn't a "bug" (I don't think). It's just the way setting elements
on a line works. You want spaces between words that you type to be
spaces right? The spaces between these blocks are just like spaces
between words. That's not to say the spec couldn't be updated to say
that spaces between inline-block elements should be nothing, but I'm
fairly certain that is a huge can of worms that is unlikely to ever
happen.
Changed the padding top to 8px from 7px ->> padding:8px 10px 0 10px;
yea, i was pretty sure my html had nothing to do with it, and it wasn't a spacing problem cause i'm using php to call my li's
I'm trying to make a horizontal menu with CSS but i've run into a roadblock. What I'm trying to accomplish is to have the first link bblock and last link block have rounded corners using css3. I've managed to make the menu but I'm unable to achieve the desired affect.
I tried styling those individual list items but the effect doesnt show. I'm attaching my css and html for someone to look at. Any pointers would be appreciated
<ul id="nav">
<li style="-moz-border-radius-topleft: 5px;-moz-border-radius-topright: px;-moz- order-radius-bottomright: px;-moz-border-radius-bottomleft: 5px;-webkit-border-radius: 5px px px 5px; border-radius: 5px px px 5px;">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Events</li>
<li>Gallery</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
#nav {
margin-left: 9px;
padding:0;
margin-top: 30px;
margin-bottom: 10px;
list-style:none;
clear:both ;
}
#nav li {
float:left;
display:block;
width:139px;
position:relative;
z-index:500;
margin:0 0;
border-left: 1px solid #5d564e;
}
#nav li a {
display:block;
padding:8px 5px 0 5px;
font-weight:500;
height:50px;
text-decoration:none;
background: #333;
color: #fff;
text-align:center;
border-left: 1px solid #000;
}
#nav li a:hover {
color:#fff;
background: #3e7e99;
text-decoration:underline;
}
#nav a.selected {color:#f00;}
Here's a jsfiddle using css3 to round the outside corners of the first and last items in the list - if I understand what you're trying to accomplish correctly.
One thing I'd add too is that moving your css from inline with the elements to a <style> section or even better a css file is preferable.
You have to set overflow:hidden; for the ul.
http://jsfiddle.net/KKPmL/1/
#nav{
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
overflow:hidden;
}
This doesn't work if the screen isn't big enough to display the navigation on one line.
Second way:
http://jsfiddle.net/KKPmL/2/
#nav li:first-child a{
border-top-left-radius:10px;
-moz-border-top-left-radius:10px;
-webkit-border-top-left-radius:10px;
border-bottom-left-radius:10px;
-moz-border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
}
#nav li:last-child a{
border-top-right-radius:10px;
-moz-border-top-right-radius:10px;
-webkit-border-top-right-radius:10px;
border-bottom-right-radius:10px;
-moz-border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
}
px is not a valid value, You need 0px or just 0
Also it's better to use classes first and last (or similar) on li
Look here for an example
http://jsfiddle.net/WYuNR/
Hey,
Is there a way to get browsers to ignore line breaks in the source?
<div id="navbar">
<div id="navbar-container">
<ul>
<li>HOME</li>
<li>TUTORIALS</li>
<li>BLOG</li>
<li>FORUMS</li>
<li>LINKS</li>
<li> </li>
</ul>
</div>
</div>
#navbar {
background:#FFF;
width:940px;
margin:auto;
border-radius: 10px 10px;
-webkit-box-shadow: 5px 5px 10px #888;
}
#navbar-container {
margin:auto;
}
#navbar-container ul {
list-style:none;
text-align:center;
display:block;
width:auto;
padding:0;
margin:0;
}
#navbar-container li{
list-style:none;
border-left:3px solid black;
display:inline-block;
font-family:"Arial", sans-serif;
font-size:2em;
padding:0 7px 0 10px;
margin:0;
white-space:nowrap;
}
#navbar-container li:hover{
color:#FFF;
background:#000;
border-left:3px solid black;
display:inline-block;
font-family:"Arial", sans-serif;
font-size:2em;
margin:0;
padding:0 7px 0 10px;
}
It's placing a small space between each LI, I've set it up so then line up horizontally,
i could just remove the line breaks in the source, but id prefer not to.
You can float them (either left or right), or you can comment-out the spaces:
<ul>
<li>...</li><!--
--><li>...</li>
</ul>
Or simply leave the tags open 'til the next line.
<ul>
<li>...</li
><li>...</li
><li>...</li>
</ul>
IE seems to do that as a hold-over from the days when list items did not have closing tags. A common way around that is to put the closing > on the next line, i.e.
<ul>
<li>HOME</li
><li>TUTORIALS</li
><li>BLOG</li
>etc...
All browsers should totally ignore whitespace. Is there a particular browser giving you trouble?
Try:
li { margin: 0; padding: 0 }
I was wondering the same thing and what worked for me was:
li { display: table-cell; }
All breaks are ignored and now my menu buttons are right next to each other.
You can see a live example here on my music site: http://www.yanike.tk
I used a CSS Sprite on my UL LI for my navigation menu (home, media,...).