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.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Template Questions /

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

using span to put word beetween images not always working


Go to End


2 Posts   1350 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/