SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Resident Boozehound simontheak's Avatar
    Join Date
    Jun 2003
    Location
    _root.europe.uk.london
    Posts
    965
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can you put a <span> into a <div>?

    I'm trying to use the following code:

    Code:
    span.frontpage {
    	display: block;
    	background: #000000;
    	font-size: 8px;
    	padding: 10px;
    	margin-bottom: 10px;
    	color: #333;
    	border: 1px solid #ddb;
    }
    It seems to work fine in a page on it's own, but when I put it into a complete page, it doesn't work.

    At the moment it's placed within a <div>. Is that what's causing the problem? If so, is there any way I can re-write the code above to allow it to function?

    Thanks alot,

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <span>'s can go into <div>'s so from your explanation that should all work fine.

    Might be worth pointing out that you can test to see if code is valid at http://validator.w3.org

    If you can put the page up again then I'll take a look in the morning if your still having problems

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If you are using display:block then why are you using a span rather than a div. The only difference between a span and a div si that a span is display:inline by default and a div is display:block by default.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Probably because he may want the margins and padding to collapse if styling isn't rendered. I do this all the time when I need a presentational hook (such as for a background image) - many people will use DIVs, but I'll use SPANs instead since I've noticed that some browsers will add margins and padding to empty DIVs, which can mess up the default unstyled appearance in the Web page.

    Just make sure that when you do change the display state from inline to block, that you add a height and width to the style rule.

  5. #5
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a cool technique, I hadn't heard this one before. So the key elements to use would be

    span.backgroundImage {
    display:block;
    height:50px;
    width:50px;
    }

    plus whatever styling you want to add, if any? And is this necessary if you're using...

    * {
    margin:0;
    padding:0;
    }

    Or does the universal selector take care of the margins and padding on an empty div?
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Far as I can tell, if the display is set to block, there will be no margins or padding if the universal selector is used (since it targets ALL elements).

    Also note that you don't need to declare that the element in question is a span unless you're going to use the class on other elements and want it to affect only spans with that class (as opposed to an image, DIV, paragraph, form input, and so on).

  7. #7
    Resident Boozehound simontheak's Avatar
    Join Date
    Jun 2003
    Location
    _root.europe.uk.london
    Posts
    965
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot for the replies - so am I right in thinking that you can put a <span> in a class as well then?

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, you can apply a class or ID to a SPAN element.


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
  •