Mike Buettner wrote:
> I did a bunch more reading (and associated confusion) with this result:
>
> Site: http://scottriggs.com/2007/index.html
>
> CSS: http://scottriggs.com/2007/css.html
>
> 1. I used Francky's suggestion:
>
> * The 3 small images [...]
> And it worked great.
>
> 2. Don't really understand this comment though:
>
> * Sometimes you are using a CLASS and an ID with the same name. For
> the most elements, I found in the stylesheet only the ID-references
> (with the # before the name). For elements with only the ID-styles
> the CLASSes in the html can be missed.
>
Hi Mike,
For instance I see in the html:
<div class="bgTopbar" id="bgTopbar">
In the stylesheet I see only the ID mentioned:
#bgTopbar { ... }
If in addition a CLASS with this name was defined, it should have read:
.bgTopbar { ... }
But as this CLASS doesn't exist in the css stylesheet, the reference to
it can be missed in the html. So what is needed to show the Topbar
styles, is only:
<div id="bgTopbar">
>
> 3. Back to having trouble in IE Mac 5.2 with the page not centering
> in browser.
>
I've no Mac aboard, and no solution for this. Maybe some of the other
list members can check? ;-)
>
> 4. My biggest issue is not being able to get the left and right
> columns to expand down (with more content) and pull the other column
> with it:
>
> http://scottriggs.com/2007/indexv2.html
>
> CSS and HTML validated.
>
> Thanks,
> Mike
In your construction, the Scott Riggs image (rtcol_pichome.jpg) is
connected to the bottom of the right column. If the left column is
longer, this bottom is not the bottom of the combination, and a white
gap under it (towards the footer bar) is showed.
What you can do, is to connect the image to a bottom line div under both
columns (i.e. in the footer bar), and then working upwards. This can be
done by isolating this div from the normal flow (with a float: right),
and giving this div a negative margin-top of the amount of the height of
the image. Then it is pushed upwards. :-)
Remaining problem is, that the man's head can go so far upstairs, that
the image part over there is covering the under parts of the 3 images
(or something else) in the right column. This will occur if the left
column is "too small".
To avoid this, we can give the right column an empty space under the
content, which is some larger in height as the img. We can do this by
adding a div at the end of the right column, with only a height in it.
Here is a testpage
<http://home.tiscali.nl/developerscorner/css-discuss/test-indexv2.html>.
If you browse with something else than IE, now you can see the img
moving on the fly (and staying fixed to the bottom), if you change the
font-size in the browser. [1]
Greetings and success,
francky
[1] ... and you'll see some other things to correct. ;-)
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
