Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Larry Young
4,356 PointsHow do I stretch nav element across the whole page after changing background color of nav?
After changing the background color of my nav element, its apparent that it only stretches across about 75 to 80% of the screen. My images stretch further. I have tried setting max-width of nav element and margin. Any ideas?
I am using Coda 2.2.2 not workspaces so the preview browser is much different.
Larry Young
4,356 PointsThanks Jennifer! My nav element has three list items and is inside of the <header> parent container. The header width was not set, so I set it to 100% but still having nav problem. Only going across the browser window 75% to 80%
5 Answers
Mark Truitt
17,230 PointsHi Larry,
Can you supply your HTML/CSS on for example code pen?
If you are using a image for a background depending on the css you are using. It may not repeat which would cause it not to cover all of it.
Say for example your page with 1920px but your image is only 1000px. If it is setup as a background image not to repeat or cover, it would only display 1000px vs 1920px regardless of container size.
Larry Young
4,356 PointsThanks Mark! Not using image for a background just set the background color for the body and nav element. I set the nav element background to a different color than my body. That's how I noticed the problem. I'm a newbie. I don't know how wide the page is total but I've tried changing the width and margin of the nav element. I don't have a code pen account unfortunately. I tried to upload my html and css on here but it didn't keep any of the formatting.
I can tell you that I have basic background color on my nav and body elements, a unordered list of images (not floated yet) and I've tried to set the width of the nav element but it doesn't change. It centers the text in the nav element to the middle of the nav element and not the page when I use text-align so I assume that there is something I'm missing on the nav element to make it wider. If there is another way I can supply my code I'll go ahead and try and post it for you.
Mark Truitt
17,230 PointsTake a look and see if this looks close?
http://codepen.io/Caladorn/pen/JKGozR
Just a fyi though, Code Pen is free
Larry Young
4,356 PointsThanks Mark! That was close ha. I added my html to code pen without any changes and it seems to be fitting the way I want in the preview. I wonder if it's something with coda? Here is my code pen now that I know it's free ha.
Mark Truitt
17,230 PointsTaking a look at coda (I assume you are not using the iPad/iPhone version). I would be willing to bet it is the preview part built into it.
You can always load the html file directly in the browser to test.
Larry Young
4,356 PointsActually I am using iPad version haha. Hopefully it's not junk. It seems to crash a lot but I like the interface. I'll look into it because I think you are right after using code pen. It's a shame that I can't get an real genuine preview of what I'm building in a piece of software I paid for
Mark Truitt
17,230 PointsI would not say it is bad but there is no better way than loading it within the browsers themselves to test. Personally, I won't use a preview mode in any software. (dreamweaver etc) because they do not always behave the same way as a browser.
With text editors like Sublime Text you can set it up so that it will refresh on save etc though this does take a little work to setup.
Larry Young
4,356 PointsWell I figured out that setting img to max-widthL 100%; fixed my issue. I don't quite understand how changing the width of the img inside of the li container fixed the header but it now stretches across the top in coda and my images are now in even columns. Just cleared the float on the footer and now everything appears to be in order.
Mark Truitt
17,230 Pointsahh, ya, downside was that your assets could not be seen so was hard to see specifically what you were trying to do.
Glad you figured it out.
Larry Young
4,356 PointsMe too. Thanks for your help Mark. I assume that the img and it's li item container were pushing against my header somehow. They were large images and I hadn't resized them yet.
Jennifer Nordell
Treehouse TeacherJennifer Nordell
Treehouse TeacherCheck the width settings of the parent container. If for example your nav bar is inside a header element and that's set to 80%, but your nav bar is set to 100%, then the nav bar will be 100% of the 80% width header. Hope that makes sense.