3214 Posts in 848 Topics by 810 members
|
Page:
1
|
Go to End | |
| Author | Topic: | 926 Views |
-
using span to put word beetween images not always working
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
-
Re: using span to put word beetween images not always working
12 September 2009 at 7:34am Last edited: 12 September 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,
SamFor 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/
| 926 Views | ||
|
Page:
1
|
Go to Top |
