Jump to content
Samurai Fox

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

Recommended Posts

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:

MY8U97Q.png

 

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;}

Share this post


Link to post
Share on other sites

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 by Samurai Fox

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Samurai Fox

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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):

 

TH9U38m.png

 

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 by Samurai Fox

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Is the paragraph placed before or after the menu?

Share this post


Link to post
Share on other sites

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;

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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:

Hknzq90.png

Edited by Samurai Fox

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Try adding overflow: hidden to the <ul> element

Edited by Ingolme

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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:

d7fcYoq.png

#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;}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...