Forum Moderators: not2easy
Here's the menu code I'm using:
ul#tabnav
{
width:715px;
padding: 6px 0px;
list-style-type: none;
text-align: right;
margin-left:auto;
margin-right:auto;
margin: 1em 0 1em 0;
border-bottom: 1px solid #000000;
list-style-type: none;
}ul#tabnav li{display: inline;}
ul#tabnav li a
{
padding: 3px 4px;
border: 1px solid #000000;
background-color: #FFFFFF;
padding-top:3px;
padding-bottom:5px;
margin-right: 0px;
text-decoration: none;
border-bottom: none;
}
ul#tabnav a:hover {background-color:#1200FF;color:#FFFFFF;text-decoration:underline;}
#tabnav li.selected_tab
{
text-decoration: none;
border-bottom:1px solid #FFFFFF;
padding-top:6px;
margin-right: 0px;
display:inline;
}
#tabnav li.selected_tab a
{
text-decoration: none;
padding-top:6px;
padding-bottom:6px;
margin-right: 0px;
border-top: 1px solid #000000;
background-color: #FFFFFF;
display:inline;
}
#tabnav li.selected_tab a:hover{background-color:#1200FF;border-top: 1px solid #000000;color:#FFFFFF;text-decoration:underline;}
ul#tabnav a:hover {background-color:#1200FF;text-decoration:underline;}
Is there any thing anyone can see that would prevent me from doing this?
Thanks,
Clem C
[edited by: swa66 at 7:48 am (utc) on Jan. 14, 2009]
[edit reason] No personl URLs, please see ToS and forum charter [/edit]
Note that dropping URLs is not allowed here, please go through the terms of service (link in footer). Do not be surprised if mod remove the link.
Your previous post with CSS was good, we just want a bit of your HTML so that we can copy and paste, try it and respond to your request.
I am dropping the HTML as an example. Will try to find a fix when I'll have some time but I am sure other WW members will help you out.
Update - HTML removed, not needed anymore, see solution below
[edited by: tomda at 7:42 am (utc) on Jan. 14, 2009]
Few tips:
A/ Instead of applying a width for each HTML element, take the habit to have a master container on which you set the width, the auto-margin, padding, etc. then all other HTML elements will be contained in the master container.
B/ There were so many padding and margin... This is where the error was; only apply padding where it is necessary.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Examplified</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#main_container {
width:715px;
margin-left:auto;
margin-right:auto;
border: 1px solid #FF33CC;
}
ul#tabnav
{
margin:0px;
list-style-type: none;
text-align:right;
/*border-bottom:1px solid #000;*/
}
ul#tabnav li{display: inline;}
ul#tabnav li a
{
padding:0px 6px 0px 6px;
border: 1px solid #000000;
background-color: #FFFFFF;
text-decoration: none;
border-bottom: none;
}
ul#tabnav a:hover {background-color:#1200FF; color:#FFFFFF; text-decoration:underline;}
#tabnav li.selected_tab
{
text-decoration: none;
border-bottom:1px solid #FFFFFF;
padding:0px 6px 0px 6px;
border-bottom: none;
}
#tabnav li.selected_tab a
{
text-decoration: none;
border-top: 1px solid #000000;
background-color: #FFFFFF;
border-bottom: none;
}
#tabnav li.selected_tab a:hover{background-color:#1200FF; border-top: 1px solid #000000;color:#FFFFFF;text-decoration:underline;}
ul#tabnav a:hover {background-color:#1200FF;text-decoration:underline;}
#user_menu_container
{
border:1px solid black;
}
</style>
</head><body>
<div id="main_container">
<ul id="tabnav">
<li class="selected_tab"><a href="file:///user/list_users" class="selected_tab" id="home">Address Book</a></li>
<li class=""><a href="file:///address" class="selected_tab" id="home">Update your entry</a></li>
<li class=""><a href="file:///address/create" class="selected_tab" id="home">Add to address book (0)</a></li>
</ul>
<div id="user_menu_container">Can't get it to touch this div!</div>
</div>
</body></html>
Thanks again.
Just add
margin:6px 0px 6px 0px;ul#tabnav
