I'm designing a navigation menu for a website.
The menu must have rounded corners, I've done this using 'border-radius'.
I've set the width as 800px as that's the rough width the menu needs to be, if I remove the width or put width: auto the width goes to 100%.
There is a gap before the first button and after the last button in my navigation menu and what I need to get rid of this gap without losing the curved edges.
How can I make the first and last buttons maintain rounded outside corners and remove the gap between each side of the navigation.
CSS:
/* CSS MENU */
#menu {
/* DISPLAY SETTINGS */
text-align: center;
height: 40px;
width: 800px;
margin: 0;
padding: 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
/* APPEARANCE SETTINGS */
border-top: 2px solid #356AA0;
border-left: 2px solid #356AA0;
border-bottom: 2px solid #204061;
border-right: 2px solid #204061;
background: #628ddb;
/* FONT SETTINGS */
color: #15387a;
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
}
/* LIST SETTINGS */
#menu li {
display: inline-block;
}
/* HYPERLINK SETTINGS */
#menu li a {
text-decoration: none;
display: block;
padding: 0 15px;
line-height: 40px;
}
/* HOVER AND ACTIVE BUTTON SETTINGS */
#menu li a:hover, #menu li.active a {
color: #15387a; background: #3D7BBB; border-bottom: 2px solid #204061
}
HTML
<ul id="menu">
<li class="active end">Home</li>
<li>Our Services</li>
<li>Testimonials</li>
<li>Get A Quote</li>
<li>Drive For Us</li>
<li>Terms & Conditions</li>
<li class="end">Contact Us</li>
</ul>
So there are several things that need to happen in order to maintain your design:
1.) The UL tag needs to have display: table
2.) Like what #Netsurfer You'll need to set the LI to have display: table-cell so that the list items flush to the edges
3.) Now that UL has rounded corners, any child elements with squared corners will stick out. You can either:
a.) Resolve this by applying overflow: hidden to both the UL and LI or
b.) Apply the rounded corners to the LI and A tags.
4.) Your :hover & active state applies a bottom border -- the table-cell will cause this to look strange. It might be better to remove it altogether.
You can check out the code here: http://jsfiddle.net/vuAVV/
Remove text-align: center; from #menu.
You might also want to include padding-left: 10px; to make sure when the first link is highlighted it does not overlap with the rounded corner of the menu.
See this working jsFiddle.
Change the display setting for the LIs to display: table-cell.
By doing so you are also not "trapped" by the white-space issues when using display: inline-block.
See jsFiddle
PS: Forgot the rounded corners ..., now also included. ;-)
Related
I'm trying to create a simple tabbed navigation menu in CSS. I am having a hard time getting the bottom border to go away on the active tab. Normally this would not be hard to do, but I also want a line height set.. so I'm using inline-block with various IE and FF fixes. This makes it display the way I want, with the exception of the bottom border.
I have tried numerous methods for getting this to work, including setting up some operators.. but I don't know enough about CSS to determine if I was using them correctly.
Here is my jsfiddle.
(Obviously my CSS skills need work and I could probably simplify the code greatly as well.)
Code:
#tab_menu {
width: 100%;
overflow: hidden;
color: #000000;
border-bottom: #dddddd solid 1px;
}
#tab_menu ul {
padding: 0px;
margin: 0px;
}
#tab_menu li {
list-style: none;
line-height: 42px;
padding-left: 15px;
padding-right: 15px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
display: -moz-inline-stack;
/* Firefox Fix */
display: inline-block;
/* Normal Function */
zoom: 1;
/* IE Fix */
*display: inline;
/* IE Fix */
}
.tab_menu_active {
color: #000000;
border-bottom: none;
border-left: #dddddd solid 1px;
border-right: #dddddd solid 1px;
border-top: #dddddd solid 1px;
}
.tab_menu_active a {
color: #000000;
text-decoration: none;
}
.tab_menu_not_active {
}
.tab_menu_not_active a {
color:#52a4d4;
text-decoration: none;
}
.tab_menu_not_active:hover {
background: #eeeeee;
}
HTML:
<div id="tab_menu">
<ul>
<li class="tab_menu_not_active"> Link 1
</li>
<li class="tab_menu_active"> Link 2
</li>
<li class="tab_menu_not_active"> Link 3
</li>
<li class="tab_menu_not_active"> Link 4
</li>
<li class="tab_menu_not_active"> Link 5
</li>
</ul>
</div>
DEMO
for the #tab_menu I removed the overflow:hidden;
#tab_menu {
/*overflow: hidden;*/
}
to the .tab_menu_active I have added this styles, that will add border bottom white and with position manipulation will overidre the gray border color.
.tab_menu_active {
border-bottom:solid 1px #fff;
position:relative;
top:1px;
}
.tab_menu_active a {
position:relative;
top:-1px;
}
The problem you have is your entire #tab_menu has a bottom border. There are a couple ways you could solve this, but first I'll give you some details about how to simplify your css.
Give the li's the class tab, that means that every tab you have will all get the same css. On the active one, give it a second class, active. In your css definitions, define that all tab's should have the same css (instead of having duplicate css in tab_menu_active and tab_menu_not_active).
I would recommend giving them all a border on the bottom, and then removing that border in the active one.
Here's a forked jsfiddle.
I'm having difficulty getting an <ul> divided evenly in safari so that the inline <li> elements make up 100% of the width.
The html code is basically:
<ul>
<li>red</li>
<li>blue</li>
<li>green</li>
<li>orange</li>
<li>purple</li>
</ul>
with css:
ul {
list-style: none;
margin: 0;
padding: 0;
width: 500px;
background-color: #9999ff;
}
li {
text-align: center;
text-decoration: none;
display: inline-block;
border-left: 1px solid #000;
width: 20%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
li:last-child {
border-right: 1px solid #000;
}
It seems like this would make 5 evenly spaces list elements which take up 20% (including borders) of the total width each. Works perfectly in Firefox and Chrome but Safari leaves an extra 6 pixels or so at the end. When I remove the box-sizing property then the list becomes too long. I can't seem to make this simple thing work for the life of me.
Here's JSFiddle: http://jsfiddle.net/z2Xdf/7/
It was rendering the wrong way for me in Chrome...at least using jsFiddle.
Inline-block puts some white space on the sides. Remove from li display:inline block and add
display:block;
float:left;
Also, move your background color to li from ul.
If you wanted to keep display:inline-block, you can apparently do this...
<ul><!-
-><li>stuff</li><!-
-><li>stuff</li><!-
-></ul>
but that seems like a hassle to type?
More "hacks" here (check comments)...
Basically, I have this website:
http://www.ug.it.usyd.edu.au/~sgre9702/week3/dropDownMenu/semantics.html
I want to centre the drop-down list items on the nav-bar, I know I can centre it with:
left:-11px;
However, I don't want to use a value I have calculated. Instead I would like it to automatically centre, taking the margin/padding values into consideration. I don't know if this is possible after googling around a bit.
My related HTML code is:
<nav>
<ul id="nav">
<li>Tours
<ul>
<li>New South Wales
<li>Australian Capital Territory
<li>Queensland
<li>Western Australia
<li>Northen Territory
<li>Tasmania
<li>South Australia
<li>Victoria
</ul>
<li>Attractions
<li>Food
<li>Resources
<li>About
<li>Contact
<ul>
<li>Online
<li>Phone
<li>Facimile
</ul>
</ul>
</nav>
The related CSS:
/* general nav list */
nav ul li {
background-color: #EEEEEE;
border-color: #000000;
border-style: solid;
border-width: 1px;
display: inline-block;
margin: 0px 5px;
padding: 5px;
position: relative;
text-align: center;
width: 120px;
}
/* nav sub list */
nav ul li ul {
display: none;
}
/* nav sub list shown */
nav ul li:hover ul {
display: block;
width: 142px;
position: absolute;
list-style-type: none;
}
/* nav sub list shown - list item */
nav ul li:hover ul li {
display:block;
background-color: #AACCFF;
border: solid 1px #000000;
position: relative;
/*left:-11px;*/
}
Remove the padding from the ul>li elements and apply to the anchors themselves (they will need display:block). Remove the margins from the sub-li elements
Then give the child ul width: auto. The submenu block will still be offset 1px to the right, though, as it will takes its left edge from where its parent's left border ends. You can get around that by either replacing the borders without outlines (which don't effect the widths of their host elements), putting borders on the child anchor/li elements or finally trying a left:-1px value on the child UL.
What css styles to be applied to make the clickable area of button to the exact shape of the button.Could you please tell me
If you use HTML you have to use a somewhat obsolete technique - Image maps - to get a clickable area that's not in the shape of a square. If you use Flash, you have more options. This reply addresses HTML/XHTML up to version 4, I haven't read the the specs for HTML 5 wich may have more ways of solving this (probably in combination with Javascript).
If I wish to style links in a menu I use an unordered list. You need to use display:block to make the whole list item click-able. I have included example css and html below.
In my stylesheet:
#menu {
width: 800px;
height: 40px;
}
#menu ul {
list-style-type: none;
margin:0;
padding:0;
}
#menu li {
display: inline;
margin-right: 10px;
float: left;
background-color: #FC0;
}
#menu a {
text-decoration: none;
font-size: 1.2em;
color: #006;
display:block;
padding: 5px 10px 5px 10px;
}
#menu a:hover,
#menu a:active {
color: #009;
background-color: #F90;
}
In my html:
<div id="menu">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Articles</li>
</ul>
</div>
This will give you a horizontal menu of three yellow boxes/buttons which will change to orange on hover. The a is displayed as a block and so the hover affect takes affect when the mouse hovers anywhere within the yellow box, rather than just over the text.
Hope this helps :o)
I am trying to create some simple menu links. I tried something like this:
div.menulinkboxaround
{
height: 25px;
}
a.menulinkbox
{
font-family: Verdana, Helvetica;
padding-left: 50px;
padding-left: 50px;
padding-bottom: 5px;
padding-top: 5px;
background-color: Green;
}
a.menulinkbox:hover
{
background-color: Red;
}
a.menulinkbox:visited
{
background-color: Yellow;
}
<div class="menulinkboxaround">Link 1</div>
<div class="menulinkboxaround">Link 2</div>
<div class="menulinkboxaround">Link 3</div>
<div class="menulinkboxaround">Link 4</div>
What i am trying to accomplish is to create menu elements that has a touch of style to em, so each link should be inside a div box with a padding 50 px on each side.
When i run this, they get clumped up on top of each other. I don't want to specify a width since the text inside the menu box should determine the size of it automatically.
Ex. (50px+text size+50px)
50px space (just green area) | Sample Text | 50px space (just green area)
Maybe this will help (since divs are block displayed elements by default):
div.menulinkboxaround { height: 25px; float: left; }
Try adding this:
a.menulinkbox
{
display: block;
}
Depending on whether you want this menu vertical or horizontal you may also want to add float: left; to div.menulinkboxaround.
As the previous answers suggest, you could put float:left on the menulinkboxaround.
It is difficult to tell from your description the desired effect, I am assuming you want the menu to be horizontal with 50px either side of the links.
With the code you currently have, the hover state only stretches in one direction, also as you are only specifying :hover it is not really as keyboard friendly as it would be if you specified :focus as well.
Also because you are setting the height in px as you increase the font size the text becomes clipped at the bottom. Not specifying the pseudo selectors on the link may also cause you later problems in Internet Explorer.
You could also tidy up the code a little to reduce the unnecessary classes and improve the semantics of the menu.
For example:
<style type="text/css">
ul.menu {
/* removing the browser defaults for margin padding and bullets */
margin: 0;
padding: 0;
list-style-type: none;
/* Now you have a sensible parent it is a good idea to put the font
family here, I have also added a fallback of sans-serif in the rare
case Helvetica and Verdana are not available on the users computer,
it might be best to set this on the body if you are using this font
site-wide
*/
font-family: Verdana, Helvetica, sans-serif;
/* To create symetry I am adding 25px to the right and left of the menu,
this will stay green even if the items inside are not
*/
padding: 0 25px;
background-color: green;
/* increacing the lineheight so the background color of the links does
not overflow the green of the menu behind it, for a simple menu like
this it is fine, a more complex or longer links that need to wrap I
suggest changing the method of implementation from display inline to
floating which is a bit more complex
*/
line-height:1.95;
}
/* because all the list items are inside this parent list you can use
the descendant selector to target them rather than adding a separate
class, you are saying all list items inside the unordered list that
has a class of menu
*/
ul.menu li {
/* telling the list items to behave like inline elements so they are
naturally on one line also removint the browser default margin and
padding
*/
display: inline;
margin: 0;
padding: 0;
}
ul.menu a:link,
ul.menu a:visited,
ul.menu a:hover,
ul.menu a:focus,
ul.menu a:active {
/* you can combine all your padding rules together in the order
Top Right Bottom Left, I remember this like it kinda spells TRouBLe :)
*/
padding: 5px 25px 5px 25px;
background-color: green;
/* setting the color to white because the default link color of blue
is not that visible against green
*/
color: white;
}
/* adding the :focus selector to make this more keyboard accessible */
ul.menu a:hover,
ul.menu a:focus {
background-color: red;
color: black;
}
ul.menu a:visited {
background-color: yellow;
color: black;
}
</style>
</pre>
<ul class="menu">
<!-- Putting these all on one line because we are making
them display:inline so the spaces get counted and there will
be a gap otherwise -->
<li>Link 1</li><li>Link 2</li><li>Link 3</li>
</ul>
I have tested this in recent versions of FF, Opera and Safari, and IE6 IE7 and IE8
<style type="text/css">
ul.menu {
margin: 0;
padding: 0;
list-style-type: none;
font-family: Verdana, Helvetica, sans-serif;
padding: 0 25px;
background-color: green;
/* overflow hidden clears the internal floated links and zoom 1
kicks IE into doing the same, I suggest you move the zoom: 1
into an IE stylesheet using conditional comments
*/
overflow: hidden;
zoom: 1;
}
ul.menu li {
display: inline;
margin: 0;
padding: 0;
}
ul.menu a:link,
ul.menu a:visited,
ul.menu a:hover,
ul.menu a:focus,
ul.menu a:active {
padding: 5px 25px 5px 25px;
background-color: green;
color: white;
/* setting the links to float left and giving them display block as
well explicitly, this is so that the vertical padding of 5px gets
applied, inline elements can only have horizontal margin and padding,
and since we are floating them they now take up 0 vertical height in
the document which is why we needed to clear the float on the
surrounding menu
*/
display: block;
float: left;
}
ul.menu a:hover,
ul.menu a:focus {
background-color: red;
color: black;
}
ul.menu a:visited {
background-color: yellow;
color: black;
}
</style>
<ul class="menu">
<li>Link 1</li><li>Link 2</li><li>Link 3</li>
</ul>
This second method is much more reliable, deals with wrapping links nicer and is generally a better solution but a bit harder to explain.
If you didn't want the menu to fill the full width of the screen just as long as the text takes up, regardless of which method you are using above, I suggest you put float: left and clear: both on the ul.menu which should shrink to the width it needs to take up
I hope this helps
sample code below (credit to other answers)
div.menulinkboxaround
{
height: 25px;
float: left;
}
a.menulinkbox
{
font-family: Verdana, Helvetica;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 5px;
padding-top: 5px;
background-color: Green;
}
a.menulinkbox:hover
{
background-color: Red;
}
a.menulinkbox:visited
{
background-color: Yellow;
}
<div class="menulinkboxaround">Link 1</div>
<div class="menulinkboxaround">Link 2</div>
<div class="menulinkboxaround">Link 3</div>
<div class="menulinkboxaround">Link 4</div>