• Locked
2 replies [Last post]
Mon, 2010-08-23 20:09
dnable2008
dnable2008's picture
User offline. Last seen 1 year 15 weeks ago. Offline
newbie
Timezone: GMT+1
Joined: 2008-01-23
Posts: 8
Points: 9

I am having some trouble trying to put some padding on the right hand side of the menu and sub-menu, not having much luck, perhaps someone can help me Smile. Ideally I would like around 5px on the right hand side. The menu on the left needs to be static at 130px wide and not go much beyond that. I have tried putting in the padding-right in several places but it makes the menu text jump about at it extends. I would like the light and dark grey to be the same width and have the same padding on the left and right. Thanks in advance:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
.menu {
z-index:1000;
font-size:75%;
font-family:arial,helvetica,sans-serif;
}
 
/* remove bullets and padding */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:130px;
}
 
/* IE5.5  hack*/
* html .menu ul {margin-left:-16px; ma\rgin-left:0;}
 
 
.menu li {
position:relative;
background:#999;
min-height:26px;
width:130px;
}
 
/* get rid of the table used for broswers lower than IE6 */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
 
/* style the links */
.menu a, .menu a:visited {
display:block; 
text-decoration:none;
min-height:25px;
width:120px;
color:#fff;
padding-left:10px;
padding-top:5px;
line-height:15px;
}
 
/* IE5.5  hack*/
* html .menu a, * html .menu a:visited {background:#999; width:125px; w\idth:125px;}
 
/* style for link hover */
* html .menu a:hover {color:#fff; background:#666;}
 
.menu :hover > a {
color:#fff; 
background:#666;
width:120px;
}
 
/* hide the sub levels */
.menu ul ul {
visibility:hidden;
position:absolute;
top:0;
left:130px; 
}
/* second level visible when hovered on */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility:visible;
}
</style>
 
</head>
 
<body >
 
<div class="menu">
<ul>
<li><a href="">Planning Your Trip To Us</a></li>
<li><a href="">Getting Here</a></li>
<li><a href="">About Us <!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="">This is a test of a long menu item</a></li>
	<li><a href="">Meet the Team</a></li>
	<li><a href="">About the Team</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
<li><a href="">Testing</a></li>
<li><a href="">Another Test</a></li>
<li><a href="">Contact Us</a></li>
 
</ul>
</div>
</body>
</html>

Top
Tags:
Mon, 2010-08-23 21:19
#1
Tyssen
Tyssen's picture
User offline. Last seen 4 hours 8 min ago. Offline
rank Moderator
Moderator
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8123
Points: 1302

dnable2008 wrote: I have

dnable2008 wrote:

I have tried putting in the padding-right in several places but it makes the menu text jump about at it extends.

Are you reducing the width by the amount of padding when you do that? total width = padding + margins + border + width.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Top
Mon, 2010-08-23 22:03
#2
dnable2008
dnable2008's picture
User offline. Last seen 1 year 15 weeks ago. Offline
newbie
Timezone: GMT+1
Joined: 2008-01-23
Posts: 8
Points: 9

Thanks Tyssen. I think I got

Thanks Tyssen. I think I got it to do what I want now:

/* style the links */
.menu a, .menu a:visited {
display:block; 
text-decoration:none;
min-height:25px;
width:115px;
color:#fff;
padding-left:10px;
padding-top:5px;
line-height:15px;
}
 
/* IE5.5  hack*/
* html .menu a, * html .menu a:visited {background:#999; width:125px; w\idth:125px;}
 
/* style for link hover */
* html .menu a:hover {color:#fff; background:#666;}
 
.menu :hover > a {
color:#fff; 
background:#666;
width:115px;
padding-right:5px;
}

Top
  • Locked