Effect of Unessecary Divs/Two Bck Images

Hi, I am currently on a crazed mission to rid my Source of as many Div's as possible, it's probably unessecary but i guess it will help ensure i'm in control of my layout and possible enhance search engines ability to read the page.

Well basically is there any way I could have a background image at the top and another different background image at the bottom of a single div?

At the moment I have resorted to putting the div inside a wrapper div and setting a top background for one div and a bottom background for the wrapper div.

Is it possible without the extra div? Should I even worry about the use of an extra div or two?

All comments and help are appreciated!!

 

Answer: possibly, but there must indeed be two elements of some kind.

If the code is something like <div1> stuff, <p> <span> etc more stuff <ul> more stuff </div> then any of those elements, if they are sized large enough, can carry the other background image. It's like setting a sliding doors background image on a menu tab. Instead of adding a new element, you can get away with using what's there-- one end of the tab on the li and the other on the a.

Otherwise, if there are no elements, you must sandbag. Sandbags are not semantic as they "mean" nothing, however they are considered acceptable to use. The Minimal Markup Nazis won't go after you for a few sandbags. : )

 

Indeed.

If you have an element that is always at the top or bottom of this container (like a .head, or .foot), try using that.

 

Many Thanks now i understand a bit better, I was able to succesfully to solve it.
However I could not do this on another site as the footer width was set to say 500px, and positioned, so it would not be possible to set a background image spanning 100% width for this I assume?

The last problem is, I have a wrap, with a background image set to the bottom...
However at the bottom I have some floated li's as part of my footer menu, therefore the background will not stretch past this footer menu unless I add <div style="clear: both"></div> before the closing of the wrap + after the closing of the footer.
Is this possible to clear the floats some other way, without this extra markup?

 

Overflow: hidden is the easy way. It can force an unsized container to wrap floats the way IE does its own retarded way. However if the container is sized (either given a width or a height) then anything trying to overflow that width or height is indeed hidden (looks cut-off). Don't think that'll be a problem, this is how I wrap floatst are in the last container of the page (so there's nobody to clear them).

 

Your containing element isn't clearing contained floats, correct? Adding overflow:auto to the container will prevent you from having to put a clearing element below floated elements. I'm not sure where I first read of this technique, but it's fairly well documented (as much as it can be anyway). Here's a decent article on it.

 

Thank you very much overflow: hidden worked a charm !! I keep trying to give you some repuation Stomme but it keeps saying i need to spread it around, even when I do! When I am able to i'll be sure to drop some by, even though you probably don't care, but just to show im not an ungreatful git!!

 

What Greg said is true as well, except nobody uses overflow: auto because if makes nasty scrollbars. But actually that was the original solution Paul O'B came up with, and later added to his friends that anything overflow that wasn't the default "visible" worked.

Be careful with it though, this wasn't actually the original purpose of the overflow properties, just a nice glitch, so when you have for instance a height on a footer because, maybe you have a 100% height container and then the footer pulled up over the bottom, overflow: hidden will really cut off anything below.

 

There are conditions where you get scrollbars, but they're easily predicted and avoided. In my experience, overflow:hidden causes more problems when people who use a larger than default font size magnification view the site than overflow:auto.

 

I probably haven't run into that problem yet because I size a lot of containers in em, so text-enlarge still doesn't let the text overflow.

 

Ahh. I do a lot of application interface design that unfortunately won't allow elements to be size in em's.