Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Senior Member DesignBox's Avatar
    Join Date
    Apr 2004
    Posts
    340
    Member #
    5659
    I'm having trouble with the horizontal menu on this site: http://www.dart.com.cy/bionature/

    I want the menu to be verticaly aligned in the middle of its <div>. I specified this in the css file but its just not accepting it.

  2.  

  3. #2
    Senior Member simpleurl's Avatar
    Join Date
    Jul 2006
    Location
    Leicester, UK.
    Posts
    150
    Member #
    13598
    You have the UL tag on a float:left, could this be it. Although I have never used vertical alignment I'm just guessing by saying that the float:left is affecting it.

    Wouldnt it be better to have UL LI{float: left; instead of the UL tag...

  4. #3
    Senior Member DesignBox's Avatar
    Join Date
    Apr 2004
    Posts
    340
    Member #
    5659
    that didn't seem to work

  5. #4
    Senior Member Karloff's Avatar
    Join Date
    Oct 2005
    Posts
    744
    Member #
    11702
    could you not just add padding/margins to the li and use

    margin : 0 auto;

    to the div gain the effect you want?

  6. #5
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    You need to add some padding to #nav

    Code:
    #nav {
      background-color: #006D2C;
      padding-top: 8px;
      height: 21px;
    }
    
    * html #nav {
      height: 29px;
    }
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  7. #6
    Senior Member DesignBox's Avatar
    Join Date
    Apr 2004
    Posts
    340
    Member #
    5659
    karloff i tried that before but obviously i just have done something wrong. its working now. Thanks!

  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    First, you don't have "class1" defined, so your nav section can look like this:

    <li><a href="index.html">HOME</a></li>
    <li><a href="#">PROFILE</a></li>
    <li><a href="#">SCIENTISTS</a></li>
    <li><a href="#">PARTNERS</a></li>
    <li><a href="#">PROJECTS</a></li>
    <li><a href="#">PUBLICATIONS & PATENTS</a></li>
    <li><a href="#">CONTACT US</a></li>


    Then,
    as karloff said, you need to use padding, and don't define the height:

    #nav ul{
    width:100%;
    margin: 0px auto;
    padding: 10px 0px 10px 0px;
    list-style-type: none;
    background-color: #006D2C;
    }



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:27 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com