7 replies [Last post]
designbliss
designbliss's picture
Offline
newbie
Last seen: 5 years 27 weeks ago
Timezone: GMT-5
Joined: 2014-11-20
Posts: 6
Points: 8

I changed the size of the pricetage pic on the roundabout. Now I need my text to be centered on the image of the pricetag. see css code below and website link. I also need help with centering my Navigation in the grey box above the roundabout. Any help is appreciated.

http://www.luvenlexi.com/Lexistore/

}
.roundabout-moveable-item .pricetag {
background:url(../image/pricetag2.png) top left no-repeat;
display:block;
width:135px;
height:69px;
position:absolute;
top:-1px;
right:30px;
font-family: Verdana, Geneva, sans-serif;
color:#f5f5f5;
font-weight:100;
font-size:16px;
padding-top:10px;
text-shadow: #333 1px 1px 1px;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 25 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

The text is centered

It doesn't appear centered because of the 35px blank space on either side of the image. Try it with the attached cropped version. Note, I have changed the format to gif as more appropriate for line art and to save bandwidth.

Don't forget to edit the width of the span element to 100px.

(Not tested.)

cheers,

gary

AttachmentSize
pricetag2.cropped.gif 9.8 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

designbliss
designbliss's picture
Offline
newbie
Last seen: 5 years 27 weeks ago
Timezone: GMT-5
Joined: 2014-11-20
Posts: 6
Points: 8

Is it possible for you to

Is it possible for you to walk me step by step to make the change. I looked through all of my css coding for the right left of 35px and i dont see it. Thank you in advance!!

designbliss
designbliss's picture
Offline
newbie
Last seen: 5 years 27 weeks ago
Timezone: GMT-5
Joined: 2014-11-20
Posts: 6
Points: 8

center text on image

Maybe moving the text to center on pricetag image would be better.

}
.roundabout-moveable-item .pricetag {
background:url(../image/pricetag2.png) top left no-repeat;
display:block;
width:135px;
height:69px;
position:absolute;
top:-1px;
right:30px;
font-family: Verdana, Geneva, sans-serif;
color:#f5f5f5;
font-weight:100;
font-size:16px;
padding-top:10px;
text-shadow: #333 1px 1px 1px;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 25 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Not clear?

I meant on the image itself. Compare your tag image to the cropped version I attached.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

designbliss
designbliss's picture
Offline
newbie
Last seen: 5 years 27 weeks ago
Timezone: GMT-5
Joined: 2014-11-20
Posts: 6
Points: 8

Yes, I tried replacing my

Yes, I tried replacing my image with yours. It shows part of the black of the second price tag. I guess i'll just change it back to the original because I can't figure it out. I did fix the navi menu to be centered in the grey box. Thank you!! Wink

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 25 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Reduce the width

of the tag's container. If I remember correctly, to 100px.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

designbliss
designbliss's picture
Offline
newbie
Last seen: 5 years 27 weeks ago
Timezone: GMT-5
Joined: 2014-11-20
Posts: 6
Points: 8

Thank you!!! It worked!!

Thank you!!! It worked!! Big smile