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   1069 Views

Avatar
servalman

Community Member, 211 Posts

10 September 2009 at 7:24pm

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

Community Member, 85 Posts

12 September 2009 at 7:34am

Edited: 12/09/2009 7:40am

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/