Thanks a lot! Can I trouble you for an explanation on how to get the menu to compress as well? You don't have to set up the code, but I would be gratefull for a push in the right direction.
Regards
Morten
On 4/27/06, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
morten fjellman wrote:
> Thank you, but there seems to be more to it than that. I've put
> width:220px; on #sidebar and margin-right:220px; on #content, but the
> design breaks badly. I think I need to set some % or em units on the
> header and menu, but I don't quite understand how to. The header has
> a middle gif that repeats on the X-axis. There is also a left and
> right gif to give the rounded corner effect. Each button has two
> gifs. One that repeats from the left to the right, and on that make
> up the seperator. How should I set the units for these two elements?
I came in late on this - after all the <irony /> had ended :-)
Here's a serious, and working, solution - the Norwegian way:
First: there's no need to "convert" between units. The browsers can
handle it just fine without /any/ given width-values.
-----------------
1: add...
#container {clear: both;}
...to prevent any breaking in the header/menu part from messing up the
columns below.
2: don't float the middle-section, and let it default to 'width: auto'.
Add a padding and adjust height for it, to prevent 'margin-collapsing'.
#headerMiddle {
background-image:url(middleHe.gif);
background-repeat:repeat-x;
height:169px;
padding-top: 1px;
}
3: change float-direction and reposition the right corner...
#headerRight {
float:right /* use this value */;
background-image:url(rightHea.gif);
background-repeat:no-repeat;
height:170px;
width:20px;
margin-top: -170px /* use this value */;
}
-------------
I can think of a few ways to improve on this, but the above will work
just fine. Some fine-tuning is needed near the footer though.
I only tested in various Opera and Firefox versions.
regards
Georg
--
http://www.gunlaug.no
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
