2 Replies - 450 Views - Last Post: 13 December 2011 - 03:50 AM

#1 roflberryfarms  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 11-December 11

Whats wrong with this menu?

Posted 11 December 2011 - 04:05 PM

So I'm having problems with the javascript menu for the website I'm developing. Heres the link http://dl.dropbox.co...1/EB/Index.html
As you might see the menu collapses as the page gets shorter. But it doesn't quite look right. Sometimes the words get split in half and sometimes it gets off centred.
Im really having trouble fixing this and any help would be appreciated.

HTML
Spoiler


Javascript
Spoiler


Is This A Good Question/Topic? 0
  • +

Replies To: Whats wrong with this menu?

#2 xxxjj18  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 53
  • View blog
  • Posts: 167
  • Joined: 30-November 11

Re: Whats wrong with this menu?

Posted 12 December 2011 - 06:00 PM

The menu works out pretty fine for me. But to fix your problem, you may want to add padding to each menu item; such as 1em. See if that works, if not then I'll look into it more for you; I didn't read the code yet xD; I figure if it's something simple that a quick CSS fix can solve, it wouldn't be necessary haha. Anyway, hope this helps
Was This Post Helpful? 0
  • +
  • -

#3 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 795
  • View blog
  • Posts: 1,681
  • Joined: 30-January 09

Re: Whats wrong with this menu?

Posted 13 December 2011 - 03:50 AM

xxxjj18, the problem can be replicated by adjusting the browser window width.

roflberryfarms, it comes down to your CSS. Try changing the contents of your css1.css file to this:
html, html body{
	margin-left:auto;
	margin-right:auto;
	padding:0;
	height:100%;
	width:100%;
	background:url(Images/Background_02.png) fixed;
}
#Wrapper {
	margin-left:auto;
	margin-right:auto;
	height:90%;
	width:704px;
}
#Header {
	height:0 auto;
	width:100%;
}
#DropdownNav {
	height:auto;
	width:auto;
}
#Nav2{
	height:auto;
	width:auto;
}
#Content{
	width:500;
	height:0 auto;
	margin-left: auto;
	margin-right: auto;
	background-color:#FFF;
}


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1