How to make access(menu) bar stack to the left and right side of body

[Samurai Fox]

So I made a menu but I don't know how to strech it from left to the right side...tried everything I could think of. So my question is does anyone know how to do it?

 

Problem pic:

 

Code so far:

#access {	background: #000;	display: block;	float: left;	margin: 0 auto;	/* width: 940px; 	width: 700px;*/	font-family:"Dekar Regular", Helvetica, Arial, Verdana , sans-serif;	font-size-adjust:0.49;	font-weight:normal;	font-style:normal;    padding: 0;}#access .menu-header,div.menu {	font-size: 13px;	margin-left: 0px;	/* width: 928px; */}#access .menu-header ul,div.menu ul {	list-style: none;	margin: 0;}#access .menu-header li,div.menu li {	float:  left;	position: relative;}#access a{	/* all links */	color: #FFF;	display: block;	line-height: 36px; /* is 44 but becuase of the 4px border it has to 4 less / height of the link boxes was 38 */ 	padding: 4px 10px 0 10px;	text-decoration: none;	width: 222px; /* menu item width, dose not include include the 1st and last item */	border-bottom-width:4px;	border-bottom-style:solid;	border-bottom-color:#000;	font-size:21px;}#access ul ul {	/*display: none;    ----------- NONE TOUCH DEVICES ONLY */	position: absolute;	top: 44px; /* match height of #access a 38 */ 	left: 0;	float: left;	/* width: 180px; 	width: 238px;*/	z-index: 99999;}#access ul ul li {	/* min-width: 180px; 	width:238px;*/}#access ul ul ul {	left: 100%;	top: 0;}#access ul ul a {	/* child items in the menu */	background-color:#000;	/* line-height: 1em; */	line-height: 40px; /* is 44 but becuase of the 4px border it has to 4 less / height of the link boxes was 1em */ 	padding:0 0 0 10px;	/* padding: 10px; */	/* width: 160px; 	width: 238px;*/	height: auto;	width:300px; /* wider so that big game names fit in the menu */}#access li:hover > a,#access ul ul :hover > a {	color: #ED2739;	/* background-color:#666; */}#access ul li:hover > ul {	/*display: block;  ----------- NONE TOUCH DEVICES ONLY */}#access ul li.current_page_item > a,#access ul li.current_page_ancestor > a,#access ul li.current-menu-ancestor > a,#access ul li.current-menu-item > a,#access ul li.current-menu-parent > a {	color: #ED2739;	/* background-color:#666; */}* html #access ul li.current_page_item a,* html #access ul li.current_page_ancestor a,* html #access ul li.current-menu-ancestor a,* html #access ul li.current-menu-item a,* html #access ul li.current-menu-parent a,* html #access ul li a:hover {	color: #ED2739;	/* background-color:#666; */}#access .menu>ul>li:last-child a{ /* last element of the menu is a different width */	width: 178px; /* 154 */}#access .menu>ul>li:first-child a{ /* last element of the menu is a different width */	padding-left:5px;}

[davej]

What did you try?

[Samurai Fox]

I tried:

#access ul ul a {	/* child items in the menu */	background-color:#000;	/* line-height: 1em; */	line-height: 40px; /* is 44 but becuase of the 4px border it has to 4 less / height of the link boxes was 1em */ 	padding:0 0 0 10px;	/* padding: 10px; */	/* width: 160px; 	width: 238px;*/	height: auto;	width:300px; /* wider so that big game names fit in the menu */

width:300px; /* wider so that big game names fit in the menu */

and:

#access .menu>ul>li:last-child a{ /* last element of the menu is a different width */	width: 178px; /* 154 */}#access .menu>ul>li:first-child a{ /* last element of the menu is a different width */	padding-left:5px;}

Edited February 12, 2014 by Samurai Fox

[davej]

Is the page online? The first thought would be that you should simply adjust the width values until they match.

[Samurai Fox]

The page is not online.

When I do adjust it...The Journey tab is moved below Home tab (but then the access bar-the black bar- goes from left to right as I want it to be)

Pic:

[Samurai Fox]

Ok...I changed the next and it works now like I want it:

Just left width like it was...it was actually padding that was the problem

 

Previous code:

#access .menu>ul>li:last-child a{ /* last element of the menu is a different width */	width: 178px; /* 154 */}#access .menu>ul>li:first-child a{ /* last element of the menu is a different width */	padding-left:5px;}

Code now:

#access .menu>ul>li:last-child a{ /* last element of the menu is a different width */	width: 178px; /* 154 */}#access .menu>ul>li:first-child a{ /* last element of the menu is a different width */	padding-left:46px;}

Cheers!

Edited February 13, 2014 by Samurai Fox

[Ingolme]

Always keep in mind that padding, margin and borders are added onto the width and height of an element.

[Samurai Fox]

wow...this is really funny because I didn't notice it before haha...so new "problem" for which I really don't know what to do is the next thing:

1.-When I've put <p> in html red-box kind of went up, above access bar.

2.-When I've added border-bottom, black part in circle appeared.

I don't need red thing above access bar nor do I need the black part underneath the access bar (in circle):

 

 

Code managed from here:

#access a{	/* all links */	color: #FFF;	display: block;	line-height: 36px; /* is 44 but becuase of the 4px border it has to 4 less / height of the link boxes was 38 */ 	padding: 4px 10px 0 10px;	text-decoration: none;	width: 222px; /* menu item width, dose not incliude include the 1st and last item */	border-bottom-width:10px;	border-bottom-style: solid;	border-bottom-color:#202020;	font-size:21px;

ehh

Edited February 13, 2014 by Samurai Fox

[Ingolme]

The margin of the <p> element is put onto its parent. You can set the margin of <p> elements in your menu to 0. But why do you use a <p> element in a menu? <p> represents a paragraph.

The bottom border is like that because the <ul> element has a default padding (and possibly margin based on the browser). Set padding-left and margin-left of the <ul> element to 0.

[Samurai Fox]

ehm...not in menu, but in body

[Ingolme]

Is the paragraph placed before or after the menu?

[Samurai Fox]

after menu:

#wrapper {width: 1000px;margin: auto;text-align: left;background-color: #ED2739;}#red-body-text p {line-height: 31px;margin-bottom: 20px;color: #fff;font-size: 0.5 em;letter-spacing: 2px;font-family: "Apercu Light", Calibri, sans-serif;font-size-adjust: 0.508;font-weight: 200;font-style: normal;padding: 48px 60px 33px 60px;

[Ingolme]

Try writing something in the paragraph to see what shows up. And show your HTML as well because I'm not sure what's causing it to happen.

[Samurai Fox]

See the problem now, eh? I've got no luck hahaha (nor skills obviously )

[Ingolme]

So you removed the default padding from the <ul> element, you'll have to make up for the lost space by increasing the width of the <li> elements.

Second of all, if your <ul> has a float property you can remove it. Float is used to place a block to the left or right of another element. Removing float probably will remove that top margin as well.

[Samurai Fox]

Now only the red bar is problem because float didn't do anything (when I removed it).

This may help...when I click on ".home-title"(which is for "Game" title) in Brackets (editor) it Live-previews what that ".home title" is:

Edited February 13, 2014 by Samurai Fox

[Ingolme]

I'm quite sure removing float from the menu's outermost container would fix it. What does your HTML look like?

[Samurai Fox]

sry...had to delete this

Edited February 13, 2014 by Samurai Fox

[Ingolme]

Try adding overflow: hidden to the <ul> element

Edited February 13, 2014 by Ingolme

[Samurai Fox]

it doesn't work...but does it maybe look better like this?

btw...this, when I remove float from <li>

Edited February 13, 2014 by Samurai Fox

[Ingolme]

Leave the float on the <li>, your <ul> element or one of its parents has a float that needs to be removed.

[Samurai Fox]

Found it 

Edited February 13, 2014 by Samurai Fox

[Samurai Fox]

Do you know how to make it responsive?

[Ingolme]

Percentage sizes, media selectors...

[Samurai Fox]

ok...thanks

one more thing...footer is responsive with this code and I don't know why. Its responsive when I size down my window, but when in fullscreen...it's like this:

#footer {line-height: 96px;border-top-width: 4px;padding-bottom: 4px;border-top-style: solid;border-top-color: #202020;color: #FFF;text-align: center;background-color: #000;font-size: 1.em;}{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}