Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › fluid layout navigation with an img

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 3, 2012 at 12:38 am #37464
    Cjkreative
    Member

    Hi guys,

    I’ve been trying to figure out how I can achieve a full-width/fluid navigation bar with a specific kind of design that I want to use which I can only think of achieving with an image. Here’s a Link to my page to see what i am trying to do.

    Right now the entire navigation bar is just a stretched png image set to:

    width: 100%;

    and the home, about, gallery, and contact texts are

  • ‘s set to:

    display: inline;
    float: right;

    with margin-right and is absolutely positioned in a navigation div. The png file is also a child of the navigation div parent.

    right now when I resize my browser or view my page in a smaller screen device (like my ipad) the text flows past the blue section into the green section which is not what i want. I want only the green section to flex and the blue section to contain the links. So basically, the green section is part of the fluid layout and the blue section has permanent dimensions which contain the links without the text hovering over in between the blue and green sections when browser gets resized. Is there anyway I can achieve this?
    i’ve tried slicing the green and blue sections individually and floating them left which was an utter failure (especially considering it has the 2 empty space effect in the design of the navigation bar. )

    I’ve been racking my brain and can’t figure out how I can do this.

April 3, 2012 at 1:38 am #100491
Mottie
Member

I would make a wider navigation image, remove the from within the navigation then add it back as a background image:

.navigation {

background: url(../images/assets/navigation.png) right center no-repeat;

}
April 3, 2012 at 2:20 am #100495
Cjkreative
Member

Hmm..yeah I need to brush up on my media query stuff. At this point, I’m not familiar with it and I have just a vague understanding of sprites but I know the two are a must learn! If you can post an example, that would be awesome :)

Mottie, I did what you said and by god it worked! I understand that it’s a background image and not an image but how is it that the blue section does not get skewed along with the green section? (or is that the image doesn’t get skewed with the browser?) Does the positioning of the background-image simply nudge the left side of the background image (starting with the green and eventually the blue) off the browser window without the image proportions dimensions getting all screwy?

I found that when I resize my browser to be unreasonably narrow the floated link type elements start stacking vertically on top of each other. I guess I can give my page a min-width so that it never gets to that point.

Anyhow thanks guys! much appreciated.

April 3, 2012 at 3:22 am #100504
Cjkreative
Member

Thanks for the explanation buddy! Your awesome! :)

  • Author
    Posts
    • Viewing 4 posts - 1 through 4 (of 4 total)
    • The forum ‘CSS’ is closed to new topics and replies.