How to make this menu to behave with %?

HTML & CSS
1

This sample menu has padding defined on their li items on EM. Is there a way to keep this same on hover effect, BUT have the % defined instead ?

#main-menu {
    clear: right;
    overflow: hidden;
    margin-top: 75px;
    float:right;
}

#main-menu ul {
    overflow: hidden;
    text-align: right;
    border-radius: 5px;
    background-color: #333;
}

#main-menu ul li {
    display:inline-block;
    padding: 2px .7em; /* wish those EM could be % instead to make it elastic*/
}

#main-menu ul li a {
    color: #fff;
    font-size: .9em;
}

#main-menu ul li:hover {
    background-color: #EFAB00;
}

#main-menu ul li a:hover {
    text-decoration: none;
}

Can we achieve this same effect BUT, by adding a % on ul li items padding instead ?

I’ve used nowrap, I’ve trying to find a width value for that floated parent element, none seems to get the job done.

Please advice,
Oikram

2

Hi,

Percentage padding in that case doesn’t make much sense. The width of the parent is defined by its content so a percentage width padding would increase the width of the parent and thus cannot really be resolved. The specs are undefined where the width of its content is defined as a percentage of the parent and where the parent’s width is defined by the sum of its content.

If your parent had a fixed percentage width then you could probably base percentage padding on that parent but the effect would be the same as if you has set pixel/em widths anyway.

If you place the padding on the anchor instead then it still acts as a fixed width padding.
e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#main-menu {
	clear: right;
	overflow: hidden;
	margin-top: 75px;
	float:right;
}
#main-menu ul {
	overflow: hidden;
	border-radius: 5px;
	background-color: #333;
	margin:0;
	padding:0;
	list-style:none;
}
#main-menu ul li {
	display:inline-block;
}
#main-menu ul li a {
	display:block;
	padding: 2px 35%;
	color: #fff;
	font-size: .9em;
}
#main-menu ul li:hover { background-color: #EFAB00; }
#main-menu ul li a:hover { text-decoration: none; }
</style>
</head>

<body>
<div id="main-menu">
		<ul>
				<li><a href="">item 1</a></li>
				<li><a href="">item 2</a></li>
				<li><a href="">item 3</a></li>
				<li><a href="">item 4</a></li>
				<li><a href="">item 5</a></li>
		</ul>
</div>
</body>
</html>

I believe you are looking for something like this but relies on a width of the parent to work and uses the display:table:properties.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#main-menu {
	clear: right;
	overflow: hidden;
	margin-top: 75px;
	display:table;
	float:right;
	width:40%;
}
#main-menu ul {
	overflow: hidden;
	text-align: right;
	border-radius: 5px;
	background-color: #333;
	display:table-row;
}
#main-menu ul li {
	display:table-cell;
	padding: 2px 0;
	text-align:center;
}
#main-menu ul li a {
	color: #fff;
	font-size: .9em;
	display:block;
}
#main-menu ul li:hover { background-color: #EFAB00; }
#main-menu ul li a:hover { text-decoration: none; }

/* IE8 plus support only due to display:table properties used*/
</style>
</head>

<body>
<div id="main-menu">
		<ul>
				<li><a href="#">item 1</a></li>
				<li><a href="#">item 2</a></li>
				<li><a href="#">item 3</a></li>
				<li><a href="#">item 4</a></li>
				<li><a href="#">item 5</a></li>
		</ul>
</div>
</body>
</html>
3

IE 7 will not behave, and border radius seems to only work with pseudo elements or perhaps extra markup.
I believe I will just keep the previous code, and the em. As you said, % is of no such importance here.

There’s just one thing bugging me: the clicked area should be bigger, so the anchor should be well spread across the container so that, when we over it, all the gray area stays orange belonging to that anchor, including the rounder corner areas, should turn orange.
The only way I was able to achieve this was by applying display:inline-block; to the LI .

I have however tried another approach by floating left the LI elements, by adding overflow hidden to the parent UL, and make the anchors as display:block;


#main-menu {
    clear: right;
    overflow: hidden;
    margin-top: 53px;
    float:right;
}

#main-menu ul {
    overflow: hidden;
    text-align: right;
    border-radius: 5px;
    background-color: #333;
    overflow: hidden;
}

#main-menu ul li {
    float: left;

}

#main-menu ul li a {
    display:block;
    color: #fff;
    font-size: .9em;
    padding: 2px 1em;
}

#main-menu ul li:hover {
    background-color: #EFAB00;
}

#main-menu ul li a:hover {
    text-decoration: none;
}

This is working and I’m happy. But we can never be that happy with SP gurus around can we? :stuck_out_tongue: (:

4

Hi,

Border-radius doesn’t work in IE8 and under but works in IE9 and all other modern browsers. It will work on nearly all elements just like a normal border will.

To get an anchor to fill the parent you need to set the anchor to display:block otherwise it is an inline element and is therefore only as wide as its content. When styling a menu you really want to put the padding and background on the anchor itself and not the list element.

You could float the list and float the anchor or float the list and let the anchor be display:block but IE7 and under will stretch the float to 100% wide of the page if the anchor is in haslayout mode and no width defined. So it would be better to float both the list and anchor (or set the list to display:inline and don’t style it at all and just float the anchor).

Or you could set both the list and anchor to display:inline-block but IE7 and under don’t understand inline-block on block elements so you have to use a hack as well. When using inline-block it will give you white space gaps between elements just like the gap between words so where you want everything flush then floats are easier if you don’t need them centred (although there are solutions to the inline-block gap problem as mentioned in a css quiz a while ago).

So in your demo I would change the display:block on the anchor to float:left instead otherwise its good to go.

5

It’s amazing the quantity of information you know about his subject. Really. I can’t stop learning every time I go to SP forums.

Cheers, and thanks for this and all other tips.
Oikram