WordPress.org

Ready to get started?Download WordPress

Forums

Can someone help with this css menu? (8 posts)

  1. reyna12
    Member
    Posted 3 years ago #

    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: http://img15.imageshack.us/img15/3884/howtocss.jpg

    Let me know if you need any code snippets.

  2. Leon
    Member
    Posted 3 years ago #

    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

  3. reyna12
    Member
    Posted 3 years ago #

    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.

  4. Leon
    Member
    Posted 3 years ago #

    what if you give the div the css attribute:
    overflow: hiddden;
    ?

    If this is not working, please provide the code

  5. reyna12
    Member
    Posted 3 years ago #

    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;
    }
  6. Leon
    Member
    Posted 3 years ago #

    Do you have the code of the HTML instead of the php file? Or a link?

  7. reyna12
    Member
    Posted 3 years ago #

    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">
  8. Leon
    Member
    Posted 3 years ago #

    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;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic