CSS nav issues

Dev Shed Forums Sponsor:

November 27th, 2012, 01:44 PM

Mike1002

Registered User

Join Date: Nov 2012

Posts: 2

Time spent in forums: 31 m 52 sec
Reputation 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.

December 3rd, 2012, 07:10 AM

prcAdap

Contributing User

Join Date: Mar 2005

Location: Tír na nÓg

Posts: 1,199

Time spent in forums: 1 Month 3 Weeks 10 h 32 m 10 sec
Reputation Power: 177

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.

December 3rd, 2012, 07:30 AM

prcAdap

Contributing User

Join Date: Mar 2005

Location: Tír na nÓg

Posts: 1,199

Time spent in forums: 1 Month 3 Weeks 10 h 32 m 10 sec
Reputation Power: 177

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.

December 3rd, 2012, 08:02 AM

atta_akbar

Registered User

Join Date: Nov 2012

Posts: 9

Time spent in forums: 2 h 41 m 28 sec
Reputation 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>

Quote:

Originally Posted by Mike1002