1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Effect of Unessecary Divs/Two Bck Images

Discussion in 'CSS' started by wd_2k6, May 9, 2008.

  1. #1
    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!!
    SEMrush
     
    wd_2k6, May 9, 2008 IP
    SEMrush
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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. : )
     
    Stomme poes, May 9, 2008 IP
  3. Greg-J

    Greg-J I humbly return to you.

    Messages:
    1,844
    Likes Received:
    153
    Best Answers:
    0
    Trophy Points:
    135
    #3
    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.
     
    Greg-J, May 9, 2008 IP
    wd_2k6 likes this.
  4. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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?
     
    wd_2k6, May 9, 2008 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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).
     
    Stomme poes, May 12, 2008 IP
  6. Greg-J

    Greg-J I humbly return to you.

    Messages:
    1,844
    Likes Received:
    153
    Best Answers:
    0
    Trophy Points:
    135
    #6
    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.
     
    Greg-J, May 12, 2008 IP
  7. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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!!
     
    wd_2k6, May 12, 2008 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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.
     
    Stomme poes, May 13, 2008 IP
  9. Greg-J

    Greg-J I humbly return to you.

    Messages:
    1,844
    Likes Received:
    153
    Best Answers:
    0
    Trophy Points:
    135
    #9
    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.
     
    Greg-J, May 13, 2008 IP
  10. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #10
    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.
     
    Stomme poes, May 14, 2008 IP
  11. Greg-J

    Greg-J I humbly return to you.

    Messages:
    1,844
    Likes Received:
    153
    Best Answers:
    0
    Trophy Points:
    135
    #11
    Ahh. I do a lot of application interface design that unfortunately won't allow elements to be size in em's.
     
    Greg-J, May 14, 2008 IP