Maren Child wrote:
Okay, it works now, thanks very much for your help. But I don't quite
understand why it works the way it does and I would really
appreciate if you have the time to explain it to me.
It's a simple fake - as most CSS-trickery is, and you can see the
trickery by adding a border to the #topnavbar and a darker
background-color to #whitebg.
The whitebg div seems to push the navbar across to the right, but it
doesn't seem to push it over 160 pixels (the width of the whitebg
div). In the file http://www.biotext.com.au/test0205/columns27.html I
set the whitebg div to a width of 160 pixels but it looks as if
there is about 30 pixels space to the left.
Look "off screen"... :-)
100% width on #topnavbar, combined with 130px 'offset' from the right,
makes the #topnavbar go "off screen" on the left side by 130px.
#topnavbar's right edge will stay in the position you give it, and 100%
width always turns out the same (more or less) - regardless off
window-width - so 130px "off screen" is stable.
Using #whitebg with 160px width as a 'filler' inside the #topnavbar on
the left to push it back "into the screen", and the result is 30px
'apparent margin' on the left.
That's what you asked for, wasn't it?
Exact margin-left or padding-left won't do, as the W3C box model will
only be expanded and end up wider in compliant browsers. That's a weak
point in the W3C box model in cases like this.
You could've achieved the same by repositioning the right edge of
#topnavbar and adding a margin on the right side, but that would mean a
few hacks across the buggy browser-land. No need for that here.
... However I also tried this with xhtml at
http://www.biotext.com.au/test0205/columns30.html and the space to
the left still doesn't look like 160 pixels.
Your 'old' doctype didn't make an impression on my browsers, so I
changed it. Any good doctype will do, be it HTML or XHTML. It doesn't
affect the basics here - just the details and cross-browser stability.
Now you can adjust the #topnavbar {right: 130px;} for exact positioning
in line with the logo, and adjust #whitebg {width: 160px;} for
"margin-left", and make it look just as you like. The numbers will add up...
regards
Georg
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
