Need help? Check out our Support site, then


Example - Add a Horizontal Menu/Nav Bar

  1. Hey guys,

    I've only been a user for less than two weeks, and I've been struggling trying to find good examples and ways to do things. I'm brand new to CSS and HTML, but i'm a c++ developer, so it should be relatively simple to learn this stuff, except that it hasn't been. There is so much information, and mixed messages, so I think we should all post our (clean) examples for anyone who wants to learn, or needs sample code. I'm also going to preface all my example posts with "Example", so it is easy to sort through, and extract the example posts (say if they wanted to move them to a sub forum in the future).

    It took me two days to figure out how to get a nav bar on my blog on a theme that doesn't have one. For the amount of work it actually was, it should have taken at most an hour. I downloaded web developer for Firefox, and learned how easy it was to manipulate objects in CSS based on the ID you provide when you create it. Here is the example, and i'm sorry if I don't know web terminology :)

    Ok here is how I solved this problem -
    First I dropped a text widget:
    <table><tr><td>
    " title="<button hover text>">

    </td></tr></table>

    <table><tr><td>
    " title="<button hover text>">

    </td></tr></table>

    and you do this for as many menu buttons as you want.

    in the CSS this is all you need:

    #navbutton1{
    position:absolute;
    top:-31px;
    left:10px;
    width:80px;
    height:15px;
    display:block;
    background:url('<button image>') no-repeat;
    padding:0 10px 10px;
    }

    #navbutton3{
    position:absolute;
    top:-31px;
    left:100px;
    width:80px;
    height:15px;
    display:block;
    background:url('<button image>') no-repeat;
    padding:0 10px 10px;
    }

    http://www.moniescloset.com - a nav bar. yay!

    The blog I need help with is moniescloset.com.

  2. Ok the HTML didn't come out correctly, so I'm going to try to do what it says on this page and use the (`)

    <table><tr><td>
    <a id="navbutton1" name="navbutton1" target="_top" href="<link page>" title="<hover text for button>">
    </a>
    </td></tr></table>
    
    <table><tr><td>
    <a id="navbutton2" name="navbutton2" target="_top" href="<link page>" title="<hover text for button>">
    </a>
    </td></tr></table>
  3. I tried that and it didn't work :(

    I either want to add 3 images to the background of a current theme I have OR I want to use my own background created on Photoshop and apply it to the current theme I have.

    Whoever knows which is easier/doable, I am dying to know!!

  4. what did you try? I have 5 images I've placed across the top of my page. Also, There is a mistake in the css

    it should say "navbutton2" instead of "navbutton3"

    If you want an image at some location on your blog there really isn't any other way to do it.

    You need to place a text widget, have it reference an image (or do it later in the CSS), give it an ID, and then move that control, wherever you want through the CSS. Thats pretty much how to solve that problem.

  5. Sorry I'm pretty new to CSS.
    This is what I have in CSS Stylesheet Editor:

    <table><tr><td>
    " title="<hover text for button>">

    </td></tr></table>

    <table><tr><td>
    " title="<hover text for button>">

    </td></tr></table>

    <table><tr><td>
    " title="<hover text for button>">

    </td></tr></table>

    #navbutton1{
    position:bottom-right;
    top:-31px;
    left:1000px;
    width:258px;
    height:592px;
    display:block;
    background-image:url('tp://shoesthatloveyou.files.wordpress.com/2009/03/right.jpg') no-repeat;
    }

    #navbutton2{
    position:bottom-left;
    top:-31px;
    left:10px;
    width:231px;
    height:599px;
    display:block;
    background-image:url('<http://shoesthatloveyou.files.wordpress.com/2009/03/left.jpg&gt;') no-repeat;
    }

    #navbutton3{
    position:top-center;
    top:0px;
    left:10px;
    width:1304px;
    height:163px;
    display:block;
    background-image:url('<button image>') no-repeat fixed;
    }

    Maybe I forgot to fill in something? I have no idea. Basically, I want the "left" img to be on the bottom left of the screen, the "right" img to be on the bottom right of the screen, and the "top-madisons1" img to be centered at the top of the screen.

    I really appreciate your help.

  6. Sorry, the last navbutton3 is supposed to have the link http://shoesthatloveyou.files.wordpress.com/2009/03/top-madisons1.jpg
    in the url

  7. ok so you didn't see my correction..

    The html I posted originally didn't paste well. The HTML you are using is pretty much doing nothing and when I say

    href="<link page>" title="<hover text for button>"

    <link page> = you need to enter page if you want to link something, or remove that property if you don't <hover text for button> = the text you want to display when the user mouse's over the image. Remove it if you want nothing.

    So for your purpose and just one image...here is what you want

    in a text widget:
    '
    <table><tr><td>


    </td></tr></table>
    '

    in the css

    #image1{
    position:bottom-left;
    top:-31px;
    left:10px;
    width:231px;
    height:599px;
    display:block;
    background-image:url('<http://shoesthatloveyou.files.wordpress.com/2009/03/left.jpg&gt;') no-repeat;
    }

    you can manipulate left/size/width/height to get it the size and position you want.

  8. ok damnit the HTML failed me again

    THIS IS WHAT YOU NEED IN YOUR TEXT WIDGET :)

    <table><tr><td>
    <a id="image1" name="image1">
    </a>
    </td></tr></table>
  9. Okay, this sounds like a really stupid question, but do I enter that entire code in the CSS stylesheet editing page?
    Or do I enter the Text Widget code in a separate editing page?

    i THINK i am supposed to edit the Text under my Widgets used? Correct? If so, I pasted the code in there and then I pasted the CSS code in the CSS stylesheet editing page, but still nothing changed.

  10. yes yes the html code goes into a seperate page.

    Its called a Text Widget - look in the FAQs for more info, but just add the text widget, and copy and paste ONLY the HTML - the modified HTML from my second post.

    now in your CSS paste the CSS code

    Make sure you are using the same ID's in your css as in the HTML.

  11. oh I just realized what you did, and I cut and pasted your own code.

    In the CSS it is NOT

    background-image:url('<http://shoesthatloveyou.files.wordpress.com/2009/03/left.jpg&gt;') no-repeat;

    it is

    background-image:url('http://shoesthatloveyou.files.wordpress.com/2009/03/left.jpg') no-repeat;

    get rid of the '<' and the '>', I only use them as markers to explain that you need to insert something.

  12. Okay, this time I did exactly what you said and it's unfortunately it's still not working...

    Sorry if you are making it as clear as possible, but I followed your instructions and it won't work. Would it have to do with my existing theme that i'm using?

  13. ok can you please copy the css exactly? because it is modified

    I said

    #navbutton3{
    position:absolute;
    top:-31px;
    left:100px;
    width:80px;
    height:15px;
    display:block;
    background:url('http://shoesthatloveyou.files.wordpress.com/2009/03/left.jpg') no-repeat;
    padding:0 10px 10px;
    }

    the position should be absolute - so that its not relative to the text widget which we aren't moving.
    also, background:image doesn't work.

  14. Take a look at my blog

    http://www.moniescloset.com

    I followed my own instructions and now your image is on my blog. So my instructions aren't faulty.
    I'm going for lunch and will be removing it when i get back.

  15. ok one more time, because the copying and pasting of bad code around this post is bothering me :(

    the first code to add in a text widget

    <table><tr><td>
    <a id="image1" name="image1">
    </a>
    </td></tr></table>

    Now in the css

    #image1{
    position:absolute;
    top:-31px;
    left:100px;
    width:80px;
    height:15px;
    display:block;
    background:url('http://shoesthatloveyou.files.wordpress.com/2009/03/left.jpg') no-repeat;
    padding:0 10px 10px;
    }

  16. and if you want in a different position, you need to play around with "top" and "left" and for size, "height" and "width"

    For the example that is up for you, here are the values I used

    #image1 {
    position:absolute;
    top:0;
    left:-300px;
    width:1101px;
    height:1509px;
    display:block;
    background:url('http://shoesthatloveyou.files.wordpress.com/2009/03/left.jpg') no-repeat;
    }

  17. Oh I see! Okay.

    Is there a way to have my images repeat vertically? I tried repeat-y but that that dramatically changes the layout of my images and repeat repeats the image horizontally, but I don't want that.

    Thank you so much for your help!!

  18. thats weird, repeat-y should repeat vertically and repeat-x should repeat horizontally.

    I just tried it on my page, repeat-y repeats the image down the page.

    take a look.

  19. you will also need to play around with the height if you want it all the way down the page.

  20. After fiddling around with it, I finally figured it out thanks to you! Thanks for your patience and help! :)

  21. you are very welcome!

  22. I put my CSS stylesheet on one of the pages of my site. You can check out the way I use horiz navbars and copy the code if you like.
    It's not totally original with me of course, but is in its 24th tweak, you should be able to see it at
    http://crow-caw.com/90-site-stuff/91-current-stylesheet

Topic Closed

This topic has been closed to new replies.

About this Topic