• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 274
  • Last Modified:

How to stretch header dynamically with changes is user screen resolution?


On my site (www.globexposure.net/index.php) i have a blue bar (see attached) with rounded corners that sits above and below my map.

At present i have defined the header bar in my code as follows:
<div id="navigation" style="background: url('images/navigation.jpg') no-repeat; width:100%"></div>

...however, the right hand end is flat - how do i get it to fit properly so that the rounded corner is visible?

Many thanks
  • 2
1 Solution
David S.Commented:
I use and recommend this rounded corners technique: http://www.456bereastreet.com/archive/200406/css_teaser_box_revisited/
DaniishAuthor Commented:
Its not really the rounded corners that are the issue - but how to set the % length so that no matter what size screen resolution the bars always look the same (albeit different lengths)...
David S.Commented:
Yes, I know that. Perhaps I should explain more: If you look at the demo of the  flexible variant ( http://www.456bereastreet.com/lab/teaser/flexible/ ) you'll see that it the technique works with a fluid width element.

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now