Leon
(@leondoornkamp)
If you have a div around the list items, you can give this div a padding-right of 5px and a white background.
You can also use li:last-child and then add a border-right or a marging or something like that. This does not work in all IE’s
Hi,
I’m just overwriting the original code, it seems to be all over the place though. Adding a blue border of the div in css shows you just where it thinks the div is
http://img808.imageshack.us/img808/1443/border1.jpg
Completely Confused.
Leon
(@leondoornkamp)
what if you give the div the css attribute:
overflow: hiddden;
?
If this is not working, please provide the code
Makes absolutely no difference, I’ve probably made a right mess of the css
<body <?php body_class(); ?>>
<div id="access1">
<div id="access" role="navigation">
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div></div><!-- #access -->
<div id="wrapper" class="hfeed">
css
'/* =Menu
-------------------------------------------------------------- */
#access1 {
width: 900px;
margin: 10px auto;
}
#access {
float: left;
display: block;
width: 900px;
border: 5px solid #036;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 12px;
width: 928px;
}
#access .menu-header ul,
div.menu ul {
list-style-type:none;
margin:10px 0 0;
padding:15px 0 0 14px;
float:right;
display:block;
background:url(images/nav_corner.gif) 0 15px no-repeat;
}
#access .menu-header li,
div.menu li {
display:block;
position:relative;
float:left;
list-style-type:none;
margin:0;
padding:0;
border-top:5px solid #fff;
background:#51addd url(images/nav_bg.gif) 0 100% repeat-x;
z-index:5;
color: #ffffff;
}
#access a {
display:block;
position:relative;
padding:5px 7px 5px 6px;
height:20px;
background:url(images/nav_dotted-border.gif) 100% 100% repeat-y;
z-index:20;
color: #ffffff;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
color: #fff;
text-decoration: underline;
}
#access ul li:hover > ul {
display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #fff;
}
Leon
(@leondoornkamp)
Do you have the code of the HTML instead of the php file? Or a link?
Unfortunately i don’t have a link as it’s running on localhost 🙁
Is this what you are looking for? the html output is:
<body class="home blog logged-in">
<div id="access1">
<div id="access" role="navigation">
<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
<div class="menu"><ul><li class="current_page_item"><a href="http://127.0.0.1/wordpress/" title="Home">Home</a></li><li class="page_item page-item-2"><a href="http://127.0.0.1/wordpress/?page_id=2" title="About">About</a></li><li class="page_item page-item-8"><a href="http://127.0.0.1/wordpress/?page_id=8" title="Adventures of Huckleberry Finn">Adventures of Huckleberry Finn</a></li><li class="page_item page-item-5"><a href="http://127.0.0.1/wordpress/?page_id=5" title="Duke and the King">Duke and the King</a></li><li class="page_item page-item-6"><a href="http://127.0.0.1/wordpress/?page_id=6" title="Life in St. Petersburg">Life in St. Petersburg</a></li><li class="page_item page-item-7"><a href="http://127.0.0.1/wordpress/?page_id=7" title="Superstition">Superstition</a></li><li class="page_item page-item-4"><a href="http://127.0.0.1/wordpress/?page_id=4" title="The Grangerfords and the Shepherdsons">The Grangerfords and the Shepherdsons</a></li></ul></div>
</div></div><!-- #access -->
<div id="wrapper" class="hfeed">
Leon
(@leondoornkamp)
div.menu ul has the attribute float : right.
this needs to be float: left;
Also it is good to hide your skiplink.
add
.skip-link{
display:none;
}
