help request: css positioning & text bg scalable image

[Ilya]

Hi all.

[background]
I'm a PHP programmer pushed into designing a site.
It's my first time I cut the image into pieces etc.

[resources]
1. <http://aquabarfun.co.il/aqua-design/aqua.html>
2. <http://aquabarfun.co.il/aqua-design/design.png>

[more background]
It is clear to me that the original designer had in mind
that I will cut the menu images and put them on the web.
(That's what he did with his previous sites)
However the whole idea of text-as-images is IMHO incorrect.

[Q1]
I want to convert the menu (tabs on the left for now)
to something reasonable (text & decoration images).
How do I make the text background image scalable and
put the text on it ? (<img> & Layers?). See resource #1

[Q2]
How do I position the tabs just above the separator line
as seen on resource #2 ?

Links to apropriate resources are fine for the answer,
I don't expect for a full guide here if that's already
available.

Other helpful advices are also welcome.

Thanks in advance.
Regards,
Ilya

 

[Ilya]

Hi all.

Any specific reason I got no answers (yet?) ?

Regards,
Ilya

 

[Whitecrest]

Hi all.

Any specific reason I got no answers (yet?) ?

your breath

 

[rf]

Hi all.

Any specific reason I got no answers (yet?) ?

Any one of a number of reasons.

You have not done you homework, like googling. This is not the case as you
provide some pretty good background.

You have not tried to do something yourself. It is far better to try
something and to ask how to fix it than to simply ask "can you do this for
me". Hmmm. marginal in this case, you know *what* you want, what you need is
the *how*.

The person that has your answer has not yet read your post.

Everybody sort of knows the answer but thinks that answer is not
good/elegant enough and is waiting for somebody else to chip up first. (*)

Nobody knows the answer.

(*) I actually started to build something that might work for you but I did
not consider it elegant. However, if you wish to view it give me 10 minutes
and I'll stick it up somewhere.

 

[rf]

rf:
Ilya:

I actually started to build something that might work for you but I did
not consider it elegant. However, if you wish to view it give me 10 minutes
and I'll stick it up somewhere.

OK, for a teaser here is a not very elegant (I Hate using &nbsp;s for
spacing, I'd rather ignore the specs and give that <b> element a width) way
of doing resizable tabs. To see the full effect make sure you change your
font size (Ctrl mouse-wheel).

http://users.bigpond.net.au/rf/menus/tabs.html

The next step is to get that nice graphic correctly positioned under the
tabs.

BTW your (X)HTML and CSS is Way overboard. Far too complex. KISS should be
applied

 

[Ilya]

rf wrote:
[snip]

(*) I actually started to build something that might work for you but I did
not consider it elegant. However, if you wish to view it give me 10 minutes
and I'll stick it up somewhere.

I've made some progress (hmm... let's hope it is):
http://aquabarfun.co.il/aqua-design2/aqua.html

[Q1]
The "solution" was to place menu's background image
at the center and let it "repeat: both".
It's not what I meant to do initially but it's better
than nothing. If you have something closer to actually
scaling the image - please show me.

[Q2]
The next PITA is rounded uppper corners of the upper
menu line (as seen on
http://aquabarfun.co.il/aqua-design2/design.png
)
I've found this :
http://feedvalidator.org/check
which scales nice but it have many css "hacks"
Is there simplier way?

Thanks in advance.
Regards,
Ilya

 

[Ilya]

rf wrote:
[snip]

OK, for a teaser here is a not very elegant (I Hate using &nbsp;s for
spacing, I'd rather ignore the specs and give that <b> element a width) way

of doing resizable tabs. To see the full effect make sure you change your
font size (Ctrl mouse-wheel).

http://users.bigpond.net.au/rf/menus/tabs.html

Works fine in mozilla (1.7) but upper right corner
is one or two pixels above the line in IE5 & IE6
(don't have IE5.5). I guess it's solvable but...

The other problem is that my background image supposed
to be wave or something, it have horizontal line of another
color in the middle which (i guess) would stick to the top in the
suggested variant.

The next step is to get that nice graphic correctly positioned under the
tabs.

BTW your (X)HTML and CSS is Way overboard. Far too complex. KISS should be
applied

Will certainly try later.
Thanks for advice.

Regards,
Ilya

 

[Mitja]

rf wrote:
[snip]

(*) I actually started to build something that might work for you
but I did not consider it elegant. However, if you wish to view it
give me 10 minutes and I'll stick it up somewhere.

I've made some progress (hmm... let's hope it is):
http://aquabarfun.co.il/aqua-design2/aqua.html

[Q1]
The "solution" was to place menu's background image
at the center and let it "repeat: both".
It's not what I meant to do initially but it's better
than nothing. If you have something closer to actually
scaling the image - please show me.

[Q2]
The next PITA is rounded uppper corners of the upper
menu line (as seen on
http://aquabarfun.co.il/aqua-design2/design.png
)
I've found this :
http://feedvalidator.org/check
which scales nice but it have many css "hacks"
Is there simplier way?

Try http://www.alistapart.com/articles/slidingdoors/

 

[Andy Dingley]

Any specific reason I got no answers (yet?) ?

Because you don't pay us enough.

Looks like an easy job for a CSS menu. Try Eric Meyer's web site for example code.

 

[Ilya]

Try http://www.alistapart.com/articles/slidingdoors/

Thanks a lot.
I took the idea from there.


Thanks to all others too.

Regards,
Ilya