Jump to content

Archived

This topic is now archived and is closed to further replies.

graecyn

Menu Bar won't go into the right position!!

Recommended Posts

Here is the site: [a href=\"http://www.graecyn.com\" target=\"_blank\"]http://www.graecyn.com[/a]

I can't get the damn menu bar to be on the right (next to the blog) in different resolutions.
And I can't fix it. And I'm losing my minddddddddddd.

The menu itself is 2 divs - 1 main one (rightmenu) and 1 that formats the links (menuwrap).

Here is the CSS and HTML for the menu bar:

[code]<div id="rightmenu">
    <!-- ADMIN LOGIN -->
    <div class="menuwrap">
      <ul>
        <li style="background: transparent; border: 0px;"> <img src="images/admintop.gif"></li>
        <?php
    echo 'Not logged in. <a href="login.php">LOGIN</a>';
    ?>
      </ul>
    </div>
    <!-- END ADMIN LOGIN -->
    <p>
      <!-- MAIN MENU -->
    <div class="menuwrap">
      <ul>
        <li style="background: transparent; border: 0px;"><img src="images/menutop.gif"></li>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Me</a></li>
        <li><a href="http://www.graearea.com" target="new">Web Design</a></li>
        <li><a href="http://www.shitforbreakfast.com" target="new">Shit for Breakfast</a></li>
        <li><a href="http://www.berserk4life.com" target="new">Berserk4life</a></li>
        <li><a href="http://www.illwillpress.com" target="new">Ill Will Press</a></li>
        <li><a href="http://www.thinkgeek.com" target="new">Thinkgeek.COM</a></li>
        <li><a href="#">Email Me</a></li>
      </ul>
    </div>
    <!-- END MAIN MENU -->[/code]

[code]#rightmenu {
    position: absolute;
    left: 780px;
    width: 180px;
    top: 200px;
}

.menuwrap {
    position: relative;
    width: 180px;
    left: 160px;
    top: 0px;
    padding: 0px 0px 0px 15px;        
}[/code]

I've tried changing both to relative positions and everything and it just will not work. Help help help.

Share this post


Link to post
Share on other sites
Try changing your stylesheet from absolutes to floats, like this:
[code]
#rightmenu {
    float: right;
    width: 180px;
    top: 200px;
}[/code]
After that, your menu will go down to the bottom of the page. To fix that, add a margin-right property to your blog content, or a padding-left property to your blog wrapper.

Share this post


Link to post
Share on other sites
[!--quoteo(post=361190:date=Apr 3 2006, 09:15 AM:name=moberemk)--][div class=\'quotetop\']QUOTE(moberemk @ Apr 3 2006, 09:15 AM) [snapback]361190[/snapback][/div][div class=\'quotemain\'][!--quotec--]
Try changing your stylesheet from absolutes to floats, like this:
[code]
#rightmenu {
    float: right;
    width: 180px;
    top: 200px;
}[/code]
After that, your menu will go down to the bottom of the page. To fix that, add a margin-right property to your blog content, or a padding-left property to your blog wrapper.
[/quote]

Well I did the float: right thing, but the padding-left and margin-right properties didn't work. The menu is still at the bottom of the page. :(

Share this post


Link to post
Share on other sites
[!--quoteo(post=361219:date=Apr 3 2006, 10:20 AM:name=graecyn)--][div class=\'quotetop\']QUOTE(graecyn @ Apr 3 2006, 10:20 AM) [snapback]361219[/snapback][/div][div class=\'quotemain\'][!--quotec--]
Well I did the float: right thing, but the padding-left and margin-right properties didn't work. The menu is still at the bottom of the page. :(
[/quote]

Alrighty, after hours of mindless toiling, it finally works. Thanks for the input. :)

Share this post


Link to post
Share on other sites
Hey, no problem. I like the layout, but your yellow hover background in the menu doesn't look very good. Maybe just a link color change would be better?

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.