RE: [css-d] horizontal border in a liquid layout
Mike, it was a combination of your first suggestion and modifications suggested by Gunlaug that has worked in the end - as you can see from http://www.biotext.com.au/test0205/testpage.html By starting the border exactly where I want it on the right, and using the white div to shift the left side of the div back to the edge of the page and another one to move the 'buttons' over to where they should be, I avoid the problems of overlapping and transparency and everything else that was making it hard to fix on the right. It's amazing how a tiny thing like that border can eat up the hours! Thanks, Maren __ 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/
Re: [css-d] horizontal border in a liquid layout
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/
RE: [css-d] horizontal border in a liquid layout
From: Maren Child ...green border under the 'topnavbar' div I guess what I want to say is 'width = 100% minus 140 pixels' and 'margin-left = 30 pixels'. So if you remove the width and just give it left and right margins of 30 and 140 px what happens? -- Peter Williams __ 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/
Re: [css-d] horizontal border in a liquid layout
Maren Child wrote:
I have fixed the problem I had with disappearing content (thanks
Ingo) but after several more versions still can't get the green
border under the 'topnavbar' div to stretch so it goes across to just
before the logo.
Think you've got it the wrong way around. The green border should start
at the logo, and stretch to the left. The rest is just adjustments to
make it look right.
The following is based on this page:
http://www.biotext.com.au/test0205/columns_25.html
#topnavbar {position: absolute;
top: 177px;
right: 130px;
height: 48px;
background-image: url(bar4.gif);
background-repeat: repeat-x;
background-position: right bottom;
width: 100%;
z-index: 1;
}
#whitebg { float: left;
width: 160px;
height: 48px;
background-color: #fff;
}
...and a proper doctype that the browsers will honor. I used:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
Safari, Firefox, Opera, IE6 and IE/Mac seems to be happy with it -
regardless of page-width above 600px.
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/
RE: [css-d] horizontal border in a liquid layout
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. 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. In the file
http://www.biotext.com.au/test0205/columns29.html I set the width of whitebg
to 220 pixels and there is more but it's not 220 pixels.
Don't know what happened to my doctype, I'm sure I had a proper one in there
at one stage. I've put in the 4.01 transitional - loose dtd, as I am handing
this over to the client for maintenance in an old version of Dreamweaver,
and I'm dubious about the html that will be inserted as content. 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.
Thanks,
Maren
Think you've got it the wrong way around. The green border should start
at the logo, and stretch to the left. The rest is just adjustments to
make it look right.
The following is based on this page:
http://www.biotext.com.au/test0205/columns_25.html
#topnavbar {position: absolute;
top: 177px;
right: 130px;
height: 48px;
background-image: url(bar4.gif);
background-repeat: repeat-x;
background-position: right bottom;
width: 100%;
z-index: 1;
}
#whitebg { float: left;
width: 160px;
height: 48px;
background-color: #fff;
}
...and a proper doctype that the browsers will honor. I used:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
Safari, Firefox, Opera, IE6 and IE/Mac seems to be happy with it -
regardless of page-width above 600px.
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/
__
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/
