1 reply [Last post]
Brometheus
Brometheus's picture
Offline
newbie
Last seen: 6 years 12 weeks ago
Timezone: GMT-4
Joined: 2013-08-18
Posts: 1
Points: 2

Forgive me if I'm not the first to ask, but I haven't been able to find a solution to my particular challenge.

I'm working on a project and I want to have a similar navigation as the vertical nav bar in this layout:

http://www.deviantart.com/art/UK-Interactive-Agency-124965329

Notice how the buttons extend all the way to the left side of the page. Like this example, I want all my content to be centered in the middle of the page, so that the actual links (the text) in the nav bar will remain stationary under the logo if the browser is re-sized. However, I want the margins (which includes part of the nav bar buttons) to be able to expand and contract past the container if the browser is re-sized.

I've played around with ideas for a few hours, but I am not an advanced CSS coder and haven't made much progress.

My idea was to put all the content in a container and then position absolute the nav bar to extend outside it, but this seems to leave me with only two options: Either the whole nav bar (including the margin portion) remains fixed in position while the margins are fluid, or the text in the nav bar remains stationary with the rest of the content (like it should) but the buttons won't extend to the left of the container. Is it possible to achieve what I'm wanting to do? Or is there a more logical way to approach this than using a container? Or is a static site the only way to go here?

I think a diagram would suit better than code here:

image.jpg

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 3 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Nothing substitutes for code

Pictures help to visualize the goal, but nothing can replace seeing what you've tried or are trying. Can you provide a link to a test case?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.