Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Need help making horizontal CSS menu

    Hello, complete newbie here. Don't run away scared yet, please help

    I want a horizontal menu. I've got 7 images to use as button backgrounds, each 100x50. I've got an unordered list, with seven list items, to use as the menu links. How in the blazes do I get the text to display at the center of each button?!

    So far I managed to get the text on top of the images, and to display the list as horizontal. I want the menu pinned in the lower right corner, but somehow the text seems to be misaligned by about 250px on the right? :/

    Could someone please tell me how to fix this? (I'm currently experimenting, so don't expect the links or names in the code to make much sense).


    Thanks in advance.


    [ HTML ]
    Code:
    <div class="menuimg">
    <img src="button.gif">
    <img src="button.gif">
    <img src="button.gif">
    <img src="button.gif">
    <img src="button.gif">
    <img src="button.gif">
    <img src="button.gif">
    <img src="button.gif">
    </div>
    
    <span id="menutext">
    <ul>
    <li><a href="stuff.html">Stuff</a></li>
    <li>More stuff</li>
    <li>Things</li>
    <li>Gizmos</li>
    <li>Freebies</li>
    <li>Friends</li>
    <li>Links</li>
    <li>Email</li>
    </ul>
    </span>
    [ CSS ]
    Code:
    .menuimg {width: 700px; height: 50px; position: absolute; bottom: 0px; right: 0px; }
    
    #menutext {z-index: 1; width: 700px; height: 50px; position: absolute; bottom: 0px; right: 0px; color: purple; font-family: Arial, Helvetica, sans-serif; }
    
    #menutext li {width: 100px; height: 50px; padding: 0; display: inline; text-align: center; }

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Could you plz post a link to the page. I would rather see what you mean that blindly give a waffly answer

    Thanks

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    One quick tip... try using background images instead of regular images. Then you can position the text any way you'd like to and you don't have to worry about absolutely positioning the text over the images.

    If you need more detailed help, just ask

  • #4
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I removed one image and one list item, since I had 8 items and set the width for 7

    bazz,
    This is a local file. There is nothing else in it aside from head, body tags and the like. Best I can do is this IE6 screenshot of the bottom right corner (the rest of the page is blank, so it's hardly of any interest).


    rmedek,
    You mean turn the buttons into a background image and then just place the text on the page? I don't see any advantage. I mean, I would still have to figure out how to place the text, right? And if I knew that, there wouldn't be a problem

    Thanks for the replies.
    Attached Thumbnails Attached Thumbnails Need help making horizontal CSS menu-screenshot.gif  

  • #5
    Regular Coder
    Join Date
    Sep 2004
    Posts
    347
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you want some easy horiztontal or vertical lists check out Listamatic lists or customize your own list .

    Hope this helps.

  • #6
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    You want to set the images as backgrounds because then you could use the text-align:center; attribute to center your text in your <li>s

    Dan

    144 posts! Thats gross!!!
    (if you don't get it, i'm not explaining)
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by CluelessNewbie
    rmedek,
    You mean turn the buttons into a background image and then just place the text on the page? I don't see any advantage.
    Hey, you're the one with "CluelessNewbie" as your handle, not me

    Quote Originally Posted by whizard
    You want to set the images as backgrounds because then you could use the text-align:center; attribute to center your text in your <li>s
    What he said...

  • #8
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by Scootertaj
    If you want some easy horiztontal or vertical lists check out Listamatic lists or customize your own list .

    Hope this helps.
    Scootertaj, I could kiss you, except I don't even know what gender you are This is exactly the kind of menu I had in mind. I had to fiddle some more with it, but I finally got it pinned in the lower right corner. Yay!

    Thank you so very much.

  • #9
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You also might want to try Brothercake's List-u-Like CSS generator .


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •