Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions

using span to put word beetween images not always working


Reply

2 Posts   1050 Views

Avatar
servalman

10 September 2009 at 7:24pm Community Member, 211 Posts

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

Avatar
Samba Sam

12 September 2009 at 7:34am (Last edited: 12 September 2009 7:40am), Community Member, 85 Posts

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/