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

CSS

Anthony Crisostomo
Anthony Crisostomo
19,876 Points
Posted by Anthony Crisostomo
Anthony Crisostomo
19,876 Points

Creating a scalable or adaptive Navigation Bar with 3 Rotated Divs in the Background. (Please help, I'm stuck)

Hello everyone,

I'm working on a personal project of mine, however I've been struggling with coming up with right approach.

What I'm trying to achieve:

Goal 1 and Goal 2 screenshots (mobile view and desktop view), including my current dilemma at the bottom part of the screenshot.

I've placed a link below: https://www.dropbox.com/s/libc4wp970xz3ms/Screenshot.png?dl=0

What I was hoping to achieve was to have the navigation bar centered all the time. I made it wide (1300px), my white container will be smaller, anything outside of it will be set to hidden. As the screen gets smaller or bigger, the graphic itself will scale and be centred all the time.

I'm using susy, sass, compass, and ruby.

Below is a sample at codepen: http://codepen.io/ascdesignstudio/pen/GgzzRj

If anyone can provide some advice, or where I can find resources on learning this it would be greatly appreciated.

I've looked at the "CSS Beyond the Basics" course but I feel the answer I am looking for is not all there.

Thank you! :)

Many thanks,

Anthony Crisostomo

marvelousperson206
marvelousperson206
9,199 Points

Hey Anthony, I don't know that this is the same thing but it really helped me out with a similar problem: https://css-tricks.com/perfect-full-page-background-image/

Goodluck

Anthony Crisostomo
Anthony Crisostomo
19,876 Points
Anthony Crisostomo
Anthony Crisostomo
19,876 Points

Hi Russell,

Thank you for the reply, I might use this as a last resort and convert the bars into gifs or pngs and make it a full page background image.

2 Answers

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

So, I've kind of fixed it by setting the parent div to have position: relative since the child banner divs had position: absolute, which without setting a position type for the parent will result in the children behaving absolute to the page. I also set the children banner divs to have a width: 100%, which means they'll scale as the parent div gets smaller. Finally, I set the overflow property of the parent div to visible so that the children divs are shown even though the parent div gets collapsed with no content.

.banner-container {
    @include clearfix;
  position: relative;
  overflow: visible;
}

.banner-container > div {
  width: 100%;
  position: absolute;
  top: 50px;
}
Anthony Crisostomo
Anthony Crisostomo
19,876 Points
Anthony Crisostomo
Anthony Crisostomo
19,876 Points

Hi Ryan

Thank you, I think this is a very good approach that I might be able to build on. Thanks! :)

Herb Bresnan
Herb Bresnan
10,658 Points
Herb Bresnan
Herb Bresnan
10,658 Points

Possible that your .banner-container>div is wider than the .main-container. I changed the .banner-container>div to 1200px and there was no overlap. Good luck and good idea for the header.

Anthony Crisostomo
Anthony Crisostomo
19,876 Points
Anthony Crisostomo
Anthony Crisostomo
19,876 Points

Hi Herb thank you for the reply. I tired that just now but there are still gaps along the edge, the idea was to have all the colors extend all the way to the end, hence a longer navigation bar but a the same time the overlapping graphics will be hidden. I'm still trying to find my way around it but thank you! :)