13 replies [Last post]
Gallymon
Gallymon's picture
Offline
Regular
Seattle
Last seen: 12 years 33 weeks ago
Seattle
Timezone: GMT-6
Joined: 2009-02-26
Posts: 13
Points: 0

I've got two versions of my website. One, that I hacked together in an atrocious manner. And a second version that I've very carefully put together according to knowledge and theory rather than guesses and hacking.

I'm much happier with the second version because I know, in most cases, why it is doing what it does and thus I also know how to adjust it.

But there was one bit from my original hack that I rather liked and I'm not sure how to make it happen in my new version.

Check out these two pages and note how the sidebar in the first one overlays the footer a bit whereas in the second one, it does not.

http://www.samadhicoda.com/

http://www.samadhicoda.com/test/index.php

I'd like to fudge the sidebar and footer in the second site so it looks like the first. But, I don't know how to do it. In fact, I have no idea how I did it the first time - it was an artifact of hacking.

Any suggestions how I might do this?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 33 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not tested x-browser,

Not tested x-browser, Firefox OK:

#sidebar {
  margin:0 22px -20px 0;
  ...
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Gallymon
Gallymon's picture
Offline
Regular
Seattle
Last seen: 12 years 33 weeks ago
Seattle
Timezone: GMT-6
Joined: 2009-02-26
Posts: 13
Points: 0

Gary, that will certainly

Gary,

that will certainly work on the page I showed you. But, the sidebar is floated and when the text in the content area to the right of the sidebar gets long enough, it flows around the bottom of the sidebar.

Currently, I have my side bar margin set like so: margin: 0 22px 7px 0;

The 7px on the bottom serves to push the text in the content area away from the bottom of the sidebar when it flows around it. If I change it to -20px, I think the flow around text will get entangled with the bottom of the sidebar.

This problem is not an issue on the first of the two pages I pointed you to because the sidebar is not floated there and thus the content area's text runs straight down the right side and never flows under the sidebar.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 33 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

So, what do expect/desire to

So, what do expect/desire to happen when the main content is longer than the sidebar? Compare that to what you want when the sidebar is the longer.

The overlap presupposes some limitations, does it not?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Gallymon
Gallymon's picture
Offline
Regular
Seattle
Last seen: 12 years 33 weeks ago
Seattle
Timezone: GMT-6
Joined: 2009-02-26
Posts: 13
Points: 0

What I was hoping was possible

Gary and all,

I was hoping that when the text in the content area was long enough to begin to wrap around the bottom of the sidebar, that it would and that (1) there would be a small clearance (5 to 10px) between the bottom of the sidebar and the text so that things looked OK. But, when the content area's text was not longer than the length of the side bar and thus the footer comes up and meets the bottom of the sidebar, that (2) the sidebar would actually overlap the footer as it does in the first site whose URL I presented.

Perhaps these are incompatible goals given the inherent limitations of CSS. I don't know because I'm still largely a newbie in these things.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 33 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I'm trying to picture the

I'm trying to picture the mechanism, never mind how it happens. What happened when you tested my suggestion while adding bits of text to grow the main column?

Can you upload a test example with more text?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Gallymon
Gallymon's picture
Offline
Regular
Seattle
Last seen: 12 years 33 weeks ago
Seattle
Timezone: GMT-6
Joined: 2009-02-26
Posts: 13
Points: 0

Here's what happens

Gary,

I changed the code as you suggested and these two URL's show the results.

The first shows that the change does indeed create the effect I wanted when the content area's text is shorter than the height of the sidebar.

The second shows that this change also results in a problem when the content area's text is longer than the sidebar's height and begins to wrap around under the sidebar.

I'm looking for a solution that will do the first but not the second.

http://www.samadhicoda.com/test/skill_wordpress.php

http://www.samadhicoda.com/test/skill_other.php

Cheers!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 33 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Use the faux column

Use the faux column technique to allow either column to be the longer. Part two is to make another image for the footer that simulates the sidebar's extension.

Give the content column its own new block formatting context (Chris discussed this in your other thread), to eliminate the wrap-under.

I made the images for testing (attd) with the convert utility from Image Magick. The commands were:

gt@aretha:/mnt/koko/public_html$ convert -size 20x216 xc:black -append -size 20x1 xc:red -append -rotate -90 gallymon-bg.gif
 
gt@aretha:/mnt/koko/public_html$ convert gallymon-bg.gif -size 217x1 xc:red -append gallymon-footerbg.gif

The css looks like this:
#center-column {   /* style.css (line 39) */
  background: #AEDC82 url(<a href="http://koko/~gt/gallymon-bg.gif" title="http://koko/~gt/gallymon-bg.gif">http://koko/~gt/gallymon-bg.gif</a>) repeat-y left center;
  /* path for the image is for my local lan for testing */
  margin: 0 auto;
  position: relative;
  width: 713px;
  }
 
#sidebar {   /* style.css (line 87) */
/* note that redundant style rules have been removed */
  background-color: black;
  float: left;
  font-family: Tahoma,sans-serif;
  font-size: 10px;
  margin: 0 1px 0 0;  /* right margin makes room for "border" */
  padding: 4px 0 8px;
  text-align: left;
  width: 216px;
  }
 
#content {   /* style.css (line 140) */
  background-color: #AEDC82;
  color: black;
  overflow: hidden;   /* creates new block formatting context in IE7+ and in modern browsers */
  padding: 10px 35px 0 30px;
  text-align: justify;
  }
 
* html #content {   /* star-html hack feeds only IE<7 */
  height: 1px;   /* sets hasLayout */
  overflow: visible;   /* for obvious reasons */
  }
 
#footer {   /* style.css (line 190) */
  background: #82a561 url(<a href="http://koko/~gt/gallymon-footerbg.gif" title="http://koko/~gt/gallymon-footerbg.gif">http://koko/~gt/gallymon-footerbg.gif</a>) left top no-repeat;
  border-bottom: 2px solid black;
  border-top: 2px solid black;
  clear: both;
  color: #303030;
  margin-top: 20px;
  padding-top:5px;
  }
You might be better off floating the footer bg image in the foreground, and giving it -2px top margin to ride over the footer's top border.

cheers,

gary

AttachmentSize
gallymon-bg.gif 136 bytes
gallymon-footerbg.gif 156 bytes

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Gallymon
Gallymon's picture
Offline
Regular
Seattle
Last seen: 12 years 33 weeks ago
Seattle
Timezone: GMT-6
Joined: 2009-02-26
Posts: 13
Points: 0

Will try this this evening

Gary,

Thanks for the time and effort you've put into this issue. Very kind of you. I'll give this idea a try this evening. Thanks!

Gallymon
Gallymon's picture
Offline
Regular
Seattle
Last seen: 12 years 33 weeks ago
Seattle
Timezone: GMT-6
Joined: 2009-02-26
Posts: 13
Points: 0

Not sure that anything is different

Gary,

I've implemented the changes and I don't see that anything is different, visually.

The sidebar overlaps the footer when the content text is shorter than the sidebar height - as before. And when the content text is longer than the sidebar's height, I still have the problem where the wrapped text slides under the bottom of the sidebar. See: http://www.samadhicoda.com/test/skill_other.php

I can see that your two image files now provide a GIF based background for the sidebar and that you've made a few tweaks here and there but the essential issue is still the same.

Am I missing something here? I checked twice to makes sure that I have truly entered and uploaded your changes and I think I have.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 33 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I've attached a window dump

I've attached a window dump of the page (cropped). Note that I ++ the font size to exaggerate the column height differences for this dump.

It looks like you applied everything OK, and Firefox and IE6&7 all render the same. I do not see any separation between the shorter sidebar and footer, nor do I see any wrap-under by the content text.

Make sure your cache is cleared, and look again.

cheers,

gary

AttachmentSize
gallymon-dump.gif 11.36 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Gallymon
Gallymon's picture
Offline
Regular
Seattle
Last seen: 12 years 33 weeks ago
Seattle
Timezone: GMT-6
Joined: 2009-02-26
Posts: 13
Points: 0

Now I can see the results

Gary,

I've got things running here and my caches are cleared and I can see the results. It looks good. Thank you so very much for the time you've spent on this.

I've been looking carefully at the changes you've made and I think I understand most of them. A couple of questions though, if I may?

(1) In

#center-column background: #AEDC82 url(/images/gallymon-bg.gif) repeat-y left center;

and in

#footer background: #82a561 url(/images/gallymon-footerbg.gif) left top no-repeat;

are the left and center values redundant?

(2) I commented out the overflow: hidden; line in #content and I can see what the result is without it. And I can see your comment that having this line 'creates new block formatting context in IE7+ and in modern browsers'. Can you talk about this a bit and say what's happening?

(3) Can you discuss

* html #content { /* star-html hack feeds only IE<7 */
height: 1px; /* sets hasLayout */
overflow: visible; /* for obvious reasons */
}

and say what it is doing?

(4) I'm still seriously confused or vague about the 'hasLayout' and the 'display context' concepts. Can you discuss these? Or point me to something on the web that goes into them is some depth?

Again, Gary, thanks for taking the time to sort out a newbie on this stuff. it is much appreciated.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 33 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Gallymon wrote:(1) In

Gallymon wrote:

(1) In

#center-column background: #AEDC82 url(/images/gallymon-bg.gif) repeat-y left center;

and in

#footer background: #82a561 url(/images/gallymon-footerbg.gif) left top no-repeat;

are the left and center values redundant?

Yes, but adds to the clarity.

Quote:

(2) I commented out the overflow: hidden; line in #content and I can see what the result is without it. And I can see your comment that having this line 'creates new block formatting context in IE7+ and in modern browsers'. Can you talk about this a bit and say what's happening?

I believe Chris has a much better grasp of this than I, but very loosely, a block formatting context is one that is self-aware; it draws itself. In regard to floats, they affect other elements in the same context. By creating a new context, you've allowed the container to act independently of the float. If you quote me on this, I'll tell them you lie. Wink See Mozilla Developer Center.

Quote:

(3) Can you discuss

* html #content { /* star-html hack feeds only IE<7 */
height: 1px; /* sets hasLayout */
overflow: visible; /* for obvious reasons */
}

and say what it is doing?

In IE7, MSFT made overflow:hidden|auto another trigger for hasLayout, which is buggily analogous to the block formatting context. IE6 requires another hasLayout trigger. Setting height, known as the Holly Hack, is the traditional way, since a hasLayout box will expand as needed to hold its content if overflow is visible. That's right, exactly wrong.

Quote:

(4) I'm still seriously confused or vague about the 'hasLayout' and the 'display context' concepts. Can you discuss these? Or point me to something on the web that goes into them is some depth?

I don't know of any better reference than Ingo Chao's (IChao in this forum) On Having Layout.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Gallymon
Gallymon's picture
Offline
Regular
Seattle
Last seen: 12 years 33 weeks ago
Seattle
Timezone: GMT-6
Joined: 2009-02-26
Posts: 13
Points: 0

Thanks, Gary!!!

You've given me lots of help and lots to think on.

Cheers!