Jump to:

3439 Posts in 1028 Topics by 869 members

Template Questions

SilverStripe Forums » Template Questions » using span to put word beetween images not always working

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 1043 Views
  • servalman
    Avatar
    Community Member
    211 Posts

    using span to put word beetween images not always working Link to this post

    Hi

    I'm trying to have two images in both sides of the Sidebar title, to do that I wanted to use this :

       #Sidebar h3 {
          clear: both;
          text-transform: lowercase;
          color: #000;
          font-weight: 700;
          font-size: 1.4em;
          margin: 0 0 0px 0;
          text-align:center;
       background: transparent url(../images/side_menu_black_lg_rectangle.gif) no-repeat center left;
             
       }

    and

       #Sidebar h3 span {
          clear: both;
          text-transform: lowercase;
          color: #000;
          font-weight: 700;
          font-size: 1.4em;
          margin: 0 0 0px 0;
          text-align:center;
       background: transparent url(../images/side_menu_black_lg_rectangle.gif) no-repeat center right;
             
       }

    but it doesn't work.

    Yhe weird thing is that I used the same technique for the main menu and it work (see below) :

    #Navigation ul li a:hover {
                       background: #000 url(../images/left_hook.gif) no-repeat left center;
                      color: #fff;
                      cursor: pointer;
                   }

    and
                   #Navigation ul li a:hover span {
                      background: #000 url(../images/right_hook.gif) no-repeat right center;
                      cursor: pointer;
                   }

    I need help on that

    Thanks

    Thomas

  • Samba Sam
    Avatar
    Community Member
    85 Posts

    Re: using span to put word beetween images not always working Link to this post

    What I would do to debug is to simplify the css.

    For example there is a lot of duplication in the two elements. #Sidebar h3 and #Sidebar h3 span. The span will inherit the h3 values. I would also remove the clear:both from both statements, and see what that does.

    #Sidebar h3 {
    text-transform: lowercase;
    color: #000;
    font-weight: 700;
    font-size: 1.4em;
    margin: 0;
    text-align:center;
    background: transparent url(../images/side_menu_black_lg_rectangle.gif) no-repeat center left;
    }

    You may want to add a padding-left style to make room for the image on the left. Also if some of these same styles are already specified in a higher up element you don't need to replicate them here (e.g., color: #000).

    #Sidebar h3 span {
    background: transparent url(../images/side_menu_black_lg_rectangle.gif) no-repeat center right;
    }

    You may want to add a padding-right style to the span id to position the image on the right.

    Hopefully this is of some help,
    Sam

    For somewhat related tutorial check out http://veerle.duoh.com/blog/comments/placing_a_css_background_image_horizontally_right_on_an_h2_using_a_span_ele/

    1043 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.