SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu Creation and Positioning w/CSS

    I am redesigning my site using the increasingly popular tableless .css approach. This is my first crack at it, and I have a few questions, which has prompted me to register here.

    I am implementing two navs (left & top). For the left, I used the <li> way of doing it...and for the top, I tried to do that, but it didn't seem to work.
    My latest attempt for the top one, I used link properties to try to get it right but that didn't work either.

    The top menu is set up as an include--in it, is a form and the menu.
    Ideally, I would like to have the menu looking similar to the left one in the sense that it spans the whole width with no spacing between the links. Also, I need to get that search box vertically centered.

    My test site is here: http://www.indygear.com/test

    If you have any other suggestions, feel free to throw those in too

    Thanks!

  2. #2
    SitePoint Author Kevin Yank's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne, Australia
    Posts
    2,571
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You could actually do the top menu as a list as well -- setting the display property of the list items to inline should make it look the same as you have now.

    To get the menu items to stick together, simply remove the space between the <a> tags. You can pattern your code like this:
    Code:
    <div><a href="...">...</a
    ><a href="...">...</a
    ><a href="...">...</a></div>
    As for making them span the width of the page, that's a matter of setting their width in percentages. If you have 5 menu items, set all their widths to 20%.

    That should get you closer to your goal. Good luck!
    Kevin Yank
    CTO, sitepoint.com
    I wrote: Simply JavaScript | BYO PHP/MySQL | Tech Times | Editize
    Babys got backa hard back, that is: The Ultimate CSS Reference

  3. #3
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, now I'm back where I started. I want the menu to be flush within that area on every side. I want the search box vertically centered.

    Here's my css code:

    Code:
     #top-menu {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: bold;
     color: #333;
     display: inline;
     }
    #top-menu a {
    	padding: 4px;
     background-color: transparent;
     color: #ffffcc;
     border: 1px solid #333;
     height: 100%;
     }
    #top-menu a:hover {
    	background-color: #CAC294;
     color: #333;
     }
    #top-menu ul {
    	list-style: none;
    	padding: 0px;
    	margin: 0px;
     display: inline;
    	}
    #top-menu li {
    	display: inline;
    	list-style: none;
     margin: 0px;
     }
    Here's my HTML:

    Code:
     <form name="form1" method="post" action=""><input name="textfield" type="text" size="19" maxlength="50"></form>
    <form name="form2" method="post" action=""><input type="submit" name="Submit" value="Go"></form>
    <div id="top-menu">
    <ul>
    <li><a href="/index.shtml" title="Main Page">Home</a></li>
    <li><a href="/about.shtml" title="About this website">About</a></li>
    <li><a href="/updates.shtml" title="Updates to this website">Updates</a></li>
    <li><a href="/links.shtml" title="Indiana Jones Links">Links</a></li>
    <li><a href="/staff/" title="IndyGear Staff Members">Staff</a></li>
    <li><a href="/credits.shtml" title="Site Acknowledgements">Credits</a></li>
    <li><a href="/store.shtml" title="Purchase IndyGear and themed items">Store</a></li>
    <li><a href="/email.shtml" title="Send us email">Email</a></li>
    </ul>
    </div>
    Here's the page: http://www.indygear.com/test

  4. #4
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone...??

  5. #5
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    So what you have right now is not what you want?? It looks good to me. What are the specific changes you are wanting to do?

  6. #6
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would like to get the search stuff vertically centered...but more importantly, I would like the top to resemble the side menu in the sense that the borders touch. In other words, I don't want any space to be between the menu's on either the vertical or horizontal...I want them flush.

    Thanks

  7. #7
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Isn't using <td>s for the top menu the easiest way to do it (after all, a menu is some sort of table data...)?
    And add one empty cell at the end of the row, with width=99%, to push the others together


    BTW; in Mozilla, the copyright notice is located below the top menu (!)

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Jofa,
    Semantically speaking, a menu is more of a list than tabular data. Your td trick, while it would work visually, would lead to less-than-semantic/structural markup.

  9. #9
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I agree
    A menu is a list, not a table, but if you want drop down menus with icons etc, using tables is very convenient

    Maybe I'm just lazy and don't want to learn anything new today


Bookmarks

Posting Permissions

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