Can someone help with this css menu?

  • Hi There,

    Hope you can help.

    Basically, i have a css menu, the way it works on normal html site is by having the last list item as a different class, the class having a border on the right hand side. Is it possible to change the styling of the last menu item with wordpress? You can see my problem in this image: https://img15.imageshack.us/img15/3884/howtocss.jpg

    Let me know if you need any code snippets.

Viewing 7 replies - 1 through 7 (of 7 total)
  • 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

    Thread Starter reyna12

    (@reyna12)

    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

    https://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

    Thread Starter reyna12

    (@reyna12)

    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?

    Thread Starter reyna12

    (@reyna12)

    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="https://127.0.0.1/wordpress/" title="Home">Home</a></li><li class="page_item page-item-2"><a href="https://127.0.0.1/wordpress/?page_id=2" title="About">About</a></li><li class="page_item page-item-8"><a href="https://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="https://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="https://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="https://127.0.0.1/wordpress/?page_id=7" title="Superstition">Superstition</a></li><li class="page_item page-item-4"><a href="https://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;
    }

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Can someone help with this css menu?’ is closed to new replies.