Thread: CSS nav issues

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    2
    Rep Power
    0

    CSS nav issues


    Hi.

    Im in the processing of designing a site based on the Liquid Gem Responsive HTML Template.

    Ive 6 items in my menu, and no matter which bit im changing i cant seem to make the menu fit on 1 line.

    I'd like all the nav items to be on one line when viewed on an average desktop

    (site here http:// modernhuman.mmedesigns.co.uk/3/ )

    There seems to be some sort of padding around each link item - as when i change the width of the nav area its just spacing out the first row.

    Any help would be great.

    Thanks,
    Mike.
  2. #2
  3. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2005
    Location
    Tír na nÓg
    Posts
    1,200
    Rep Power
    178
    You've got nav set to 400px and li set to 25%.
    Each li will only be allowed 100px.
    Did you give up trying to get 6 menu items working?
    Last edited by prcAdap; December 3rd, 2012 at 07:13 AM.
  4. #3
  5. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2005
    Location
    Tír na nÓg
    Posts
    1,200
    Rep Power
    178
    To get the five elements you currently have on your page to display in one line you need to increase the space.

    I increased the nav width to 700px
    I reduced the nav ul li width from 25% to 20% ... since you have 5 items!!

    And, to get rid of the odd padding as you described ...

    I deleted width on the nav ul li a that was at 90%.

    Now, all the menu items are on one line.
    If you don't like the size then change the font size.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    9
    Rep Power
    0

    css nav_item


    Hey Friend,
    I am new in web development.I dont know much about web designing but i think this will be help full for you try to make menu like that.
    Code:
    <html> 
    <head> 	
    <title>Menu</title>   
    </head> 
    <body>  
    <style> #menu 
    { 	font-size:20px; 	float:right; 	margin:70px 70px 0 ; 	 } 
    
    #menu ul li 
    { 	padding:0 0 0 30px; 	display:inline; 	list-style:none; 	 } 
    </style> 
    <div id="menu"> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Gallery</a></li> 
    <li><a href="#">Work</a></li> 
    <li><a href="#">About Us</a></li>
     <li><a href="#">item-4</a></li> 
    <li><a href="#">item-5</a>
    </li> <li><a href="#">Contact Us</a></li>
     </ul> 
    </div> 
    </body> 
    </html>
    Originally Posted by Mike1002
    Hi.

    Im in the processing of designing a site based on the Liquid Gem Responsive HTML Template.

    Ive 6 items in my menu, and no matter which bit im changing i cant seem to make the menu fit on 1 line.

    I'd like all the nav items to be on one line when viewed on an average desktop

    (site here http:// modernhuman.mmedesigns.co.uk/3/ )

    There seems to be some sort of padding around each link item - as when i change the width of the nav area its just spacing out the first row.

    Any help would be great.

    Thanks,
    Mike.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    2
    Rep Power
    0
    thankyou both

    maths fail
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    9
    Rep Power
    0

    css nav_item


    math fails ???but where is the math?

IMN logo majestic logo threadwatch logo seochat tools logo