SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Location
    Kaiserslautern, Germany
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    To DIV or to SPAN

    First let me say I'm not asking the difference between div and span.

    Basically I have an image, and on top of this image is a absolute positioned h3 element with a z-index of 2, in between the h3 and image I want to put a solid background color that is transparent, this is also absolute positioned with a z-index of 1. The reason I'm doing it this way vs. setting margin and padding properties of the h3 element is because I have the opacity property on the solid background set, if I do it that way the h3 element logically also turns semi-transparent, I don't want this to happen [also I'm using sIFR, and it calculates the size of the text based on the properties of the element it's replacing, this though is not really relevant]

    The $10,000 question is should I use a div or span for the solid background, which would you consider more semantic? [even though what I'm doing is completely not semantic]

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Semantically, I'd say it makes most sense if all siblings are on the same 'level' (block or inline). Mixing block-level children with inline-level siblings is odd.

    Since an h3 is block-level, its siblings should also be block-level. In other words, a div would be more appropriate (in my opinion).
    Birnam wood is come to Dunsinane

  3. #3
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use a div. I've never used a span when I absolutely position the element like that, though I hardly ever positioned anything like this anyway.
    Dan G
    Marketing Strategist & Consultant

  4. #4
    SitePoint Member
    Join Date
    Jun 2008
    Location
    Kaiserslautern, Germany
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd have to say I'd agree with using the div element [and the point made about mixing and matching siblings], and if it wasn't for the odd way sIFR calculates the size of the element to be replaced and the transparency issue there are obvious better solutions.

    This is probably the first time I've actually used absolute positioning this way in a project. I opted to do it this way because for each article a user posts; on the home page the image is displayed and on top of it the title, this combined with sIFR allowed the look of a custom image without having to actually draw it, logically this saves a bit of time and keeps things modular.

    Thanks for your time.

  5. #5
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I'd love to see this in action.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •