3 replies [Last post]
nsharony
nsharony's picture
Offline
newbie
Last seen: 3 years 4 days ago
Timezone: GMT+2
Joined: 2014-03-14
Posts: 4
Points: 6

Hi,

I am trying to come up with a solution that will allow me to render the following:
sample.png

My constraints are:
1. The curve is made up of a separate image (currently it is part of a sprite)
2. The position of the curve needs to be centered below the text, so I cannot use a fixed position.

Can anyone help me with some tips on how to achieve this?

Thanks,

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi nsharony, Assuming you

Hi nsharony,
Assuming you have the menu in a Unordered List, you could use the bottom border of the UL as the line.
Then position the other curve image as a background image on the LI or A.

nsharony
nsharony's picture
Offline
newbie
Last seen: 3 years 4 days ago
Timezone: GMT+2
Joined: 2014-03-14
Posts: 4
Points: 6

Hi Tony

Thank you for the reply, but I've tried it and it doesn't work because it causes the curve part to stretch horizontally and take the width of the text in the LI or A
The curve image must have a fixed width and be centered below its text

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

hi nsharony, Then you need to

hi nsharony,
Then you need to set the background-size and background-position