Problem with placement of menubuttons in the nav bar.

  • Resolved hodiau

    (@hodiau)


    16 years, 11 months ago

    The problem is the following i was modifying my layout in my styles.css
    I was working on a lot of parameters at the same time, when i checked it online my menu buttons where out of my nav bar and there seem to be now way i can move them back into it. It was verry odd since i didn’t remeber changing anthing significant at that time.

    I reinstalled the “header.php” file but the problem remained. I guess it must have made a mistake in my css code.

    this is the piece of nav bar code from the header file:

    <div id="nav">
<ul class="nav">
<li class="first"><a href="<?php bloginfo('url'); ?>">Home</a></li>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>

    This is my css for the “nav” bar:

    #nav{background:#ff0000;height:20px;padding:0;}
ul.nav{float:left;height:30px;line-height:30px;list-style:none;font-size:12px;font-weight:700;text-transform:uppercase;margin:0;padding:0;}
ul.nav li{float:left !important;list-style-type:none;margin:0;padding:0;}
ul.nav li a,ul.nav li a:link,ul.nav li a:visited{float:left;border-bottom:0;border-left:0;background:#f3f2ed;color:#069;display:block;text-decoration:none;padding:0 10px;}
ul.nav li a:hover,ul.nav li a:active{background:#fff;color:#555;text-decoration:none;}
ul.nav li.home a{border-left:2px solid #fff;text-decoration:none;}
ul.nav li.current_page_item a{text-decoration:none;color:#555;background:#fff;}
ul.nav li ul{float:left;margin:0;padding:0;}

    i m really clueless for the moment :s , i m still learning css and php, but this to make no sense

Viewing 3 replies - 1 through 3 (of 3 total)

  • hmmm… There are a lot of nested floats there. Could you post a link to a live example please?

    Hi. There is something for you in the Pastebin.

    It took me a LONG time to get comfortable with CSS. Stick with it:) For the time being here are a few tips (based of the code you pasted above)…

    • There is really no reason to set the height of anything unless there is an image involved. Even then, most times it is better to use min-height with a hack for IE. Stu Nichols is the man!
    • Always give an element a width when you float it. – As soon as you float it – strange things happen to the width of the element.
    • Horizontal nav can usually be done without floats by setting display to inline for the <li> tags. I don’t think that I ever got the code you pasted to work right – I have used similar methods before:)
    Thread Starter hodiau

    (@hodiau)

    Sorry i couldn’t awnser you more quickly i went to sleep after posting.

    Css is indeed splendid its wat convinced to start using html again, after a while using only Flash.

    https://www.pulpflip.be/(testing server so when its ready it won’t be there anymore) thats the link, Still needs a lot of work, but with your help my problem is now resolved. Thank you for that, i was pulling my hears out for 2 days now.

    The trouble maker was, as you sugegsted, the “float” code. I replaced it with “display: inline” and it worked perfect. I also used the min-hight since its more compatible.

    The Pastebin link didn’t work.

    Thank you again ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Problem with placement of menubuttons in the nav bar.’ is closed to new replies.