SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Different h2 backgrounds.

    I've got pageh2
    Code:
    #page h2 {
    	font-size:15px;
    	line-height:25px;
    	font-family: Arial,Helvetica,Verdana,Sans-Serif;
    	color:#f5f5f5;
    	padding-left: 5px;
    	
    }
    And then in my html I have some titles with h2 tags, I have three for three columns, and I need each to have a different colored 100% width background like not that it ends as soon as the text ends but rather when the container ends.
    Should I just do h3, h4 for the other two columns? At the moment I have them on span tags like,
    Code:
    #page h2 .span-left {
    	background: #2B9435 none repeat scroll 0 0;
    	width:221px;
    }
    #page h2 .span-center {
    	background: #efa71d none repeat scroll 0 0;
    	width:354px;
    }
    #page h2 .span-right {
    	background: #d11a1a none repeat scroll 0 0;
    	width:225px;
    }
    But its ignoring the width I set and only highlights the text.

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,032
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    spans are inline elements and thus ignore with you set in the css. Add display: block to the spans, and they will use 100% with.

    Also, why don't you just give the h2's css classes? I don't really see the point of introducing extra spans ...

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    spans are inline elements and thus ignore with you set in the css. Add display: block to the spans, and they will use 100% with.

    Also, why don't you just give the h2's css classes? I don't really see the point of introducing extra spans ...
    Worked great thank you!
    They are classes, "#page h2 .span-center {"

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,032
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by theGermz View Post
    Worked great thank you!
    They are classes, "#page h2 .span-center {"
    Yes they are classes, but they are classes on spans. Why not put them on the h2's ?

    So instead of

    HTML Code:
    <h2><span class="span-center">My Text</span></h2>
    use

    HTML Code:
    <h2 class="span-center">My Text</span>
    ???

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    Yes they are classes, but they are classes on spans. Why not put them on the h2's ?

    So instead of

    HTML Code:
    <h2><span class="span-center">My Text</span></h2>
    use

    HTML Code:
    <h2 class="span-center">My Text</span>
    ???
    I tried that but it just shows no background.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,285
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by theGermz View Post
    I tried that but it just shows no background.
    Did you change the css to match the new path ?

    Code:
    #page h2.span-center span{}

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Did you change the css to match the new path ?

    Code:
    #page h2.span-center span{}
    Yes I have
    Code:
    #page h2 .span-center span{
    	background: #efa71d none repeat scroll 0 0;
    	width:100%;
    	display: block;
    	margin-left: -5px;
    	padding-left: 4px;
    }

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, if you have a space between h2 and .span-center it implys that your HTML has a <h2> with a child inside of with a class of .span-center

    Remove the space there between h2 and .span-center
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, if you have a space between h2 and .span-center it implys that your HTML has a <h2> with a child inside of with a class of .span-center

    Remove the space there between h2 and .span-center
    It's
    Code:
    #page h2.span-center span{
    	background: #efa71d none repeat scroll 0 0;
    	width:100%;
    	display: block;
    	margin-left: -5px;
    	padding-left: 4px;
    }
    Now, and it's blank, this is the HTML

    Code:
    <h2><span class="span-center">My Text</span></h2>

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Ah but Paul told you to update the HTML to this. Which I'm assuming you didn't do even though Paul already told you.
    Code:
    <h2 class="span-center">My Text</span>
    Also, I don't know why you are using such a complicated background value. You use the word "none" which could be interpreted as background:none .
    Code:
    #page h2.span-center span{
    	background: #efa71d;
    	width:100&#37;;
    	display: block;
    	margin-left: -5px;
    	padding-left: 4px;
    }
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Ah but Paul told you to update the HTML to this. Which I'm assuming you didn't do even though Paul already told you.
    Code:
    <h2 class="span-center">My Text</span>
    Also, I don't know why you are using such a complicated background value. You use the word "none" which could be interpreted as background:none .
    Code:
    #page h2.span-center span{
    	background: #efa71d;
    	width:100%;
    	display: block;
    	margin-left: -5px;
    	padding-left: 4px;
    }
    Sorry about that, I removed paul's html code after i saw it didn't work. anyway, I changed it but now it made the entire object white.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Can you post a link? Kinda hard to shoot in the dark. All we have to go off of is that little CSS snippet there and the HTML which matches it.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Hell, let's lose the name "span" in the class name if we're killing the bloaty span anyway....


    <h2 class="center">My Text</h2>

    #page h2.center {
    background: #efa71d;
    margin-left: -5px;
    padding-left: 4px;
    }

    h2's are already blocks and already 100% wide by default, so we should feel safe removing all redundant statements.



    Code:
    #page h2 {
    	font: 15px/25px Arial,Helvetica,Verdana,Sans-Serif;
    	color:#f5f5f5;
    	padding-left: 5px;
    }
    
    #page h2.left {
    	background-color: #2B9435;
    	width:221px;
    }
    #page h2.center {
    	background-color: #efa71d;
    	width:354px;
    }
    #page h2.right {
    	background-color: #d11a1a;
    	width:225px;
    }

  14. #14
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Hell, let's lose the name "span" in the class name if we're killing the bloaty span anyway....


    <h2 class="center">My Text</h2>

    #page h2.center {
    background: #efa71d;
    margin-left: -5px;
    padding-left: 4px;
    }

    h2's are already blocks and already 100% wide by default, so we should feel safe removing all redundant statements.



    Code:
    #page h2 {
    	font: 15px/25px Arial,Helvetica,Verdana,Sans-Serif;
    	color:#f5f5f5;
    	padding-left: 5px;
    }
    
    #page h2.left {
    	background-color: #2B9435;
    	width:221px;
    }
    #page h2.center {
    	background-color: #efa71d;
    	width:354px;
    }
    #page h2.right {
    	background-color: #d11a1a;
    	width:225px;
    }
    That's perfect thank you!


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
  •