Samurai Fox Posted February 12, 2014 Share Posted February 12, 2014 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;} Link to comment Share on other sites More sharing options...
davej Posted February 12, 2014 Share Posted February 12, 2014 What did you try? Link to comment Share on other sites More sharing options...
Samurai Fox Posted February 12, 2014 Author Share Posted February 12, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
davej Posted February 13, 2014 Share Posted February 13, 2014 Is the page online? The first thought would be that you should simply adjust the width values until they match. Link to comment Share on other sites More sharing options...
Samurai Fox Posted February 13, 2014 Author Share Posted February 13, 2014 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: Link to comment Share on other sites More sharing options...
Samurai Fox Posted February 13, 2014 Author Share Posted February 13, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted February 13, 2014 Share Posted February 13, 2014 Always keep in mind that padding, margin and borders are added onto the width and height of an element. 1 Link to comment Share on other sites More sharing options...
Samurai Fox Posted February 13, 2014 Author Share Posted February 13, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted February 13, 2014 Share Posted February 13, 2014 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. Link to comment Share on other sites More sharing options...
Samurai Fox Posted February 13, 2014 Author Share Posted February 13, 2014 ehm...not in menu, but in body Link to comment Share on other sites More sharing options...
Ingolme Posted February 13, 2014 Share Posted February 13, 2014 Is the paragraph placed before or after the menu? Link to comment Share on other sites More sharing options...
Samurai Fox Posted February 13, 2014 Author Share Posted February 13, 2014 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; Link to comment Share on other sites More sharing options...
Ingolme Posted February 13, 2014 Share Posted February 13, 2014 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. Link to comment Share on other sites More sharing options...
Samurai Fox Posted February 13, 2014 Author Share Posted February 13, 2014 See the problem now, eh? I've got no luck hahaha (nor skills obviously ) Link to comment Share on other sites More sharing options...
Ingolme Posted February 13, 2014 Share Posted February 13, 2014 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. Link to comment Share on other sites More sharing options...
Samurai Fox Posted February 13, 2014 Author Share Posted February 13, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted February 13, 2014 Share Posted February 13, 2014 I'm quite sure removing float from the menu's outermost container would fix it. What does your HTML look like? Link to comment Share on other sites More sharing options...
Samurai Fox Posted February 13, 2014 Author Share Posted February 13, 2014 (edited) sry...had to delete this Edited February 13, 2014 by Samurai Fox Link to comment Share on other sites More sharing options...
Ingolme Posted February 13, 2014 Share Posted February 13, 2014 (edited) Try adding overflow: hidden to the <ul> element Edited February 13, 2014 by Ingolme Link to comment Share on other sites More sharing options...
Samurai Fox Posted February 13, 2014 Author Share Posted February 13, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted February 13, 2014 Share Posted February 13, 2014 Leave the float on the <li>, your <ul> element or one of its parents has a float that needs to be removed. Link to comment Share on other sites More sharing options...
Samurai Fox Posted February 13, 2014 Author Share Posted February 13, 2014 (edited) Found it Edited February 13, 2014 by Samurai Fox Link to comment Share on other sites More sharing options...
Samurai Fox Posted February 13, 2014 Author Share Posted February 13, 2014 Do you know how to make it responsive? Link to comment Share on other sites More sharing options...
Ingolme Posted February 13, 2014 Share Posted February 13, 2014 Percentage sizes, media selectors... Link to comment Share on other sites More sharing options...
Samurai Fox Posted February 13, 2014 Author Share Posted February 13, 2014 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;} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now