help request: css positioning & text bg scalable image

Discussion in 'HTML' started by Ilya, Jun 28, 2004.

  1. Ilya

    Ilya Guest

    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, Jun 28, 2004
    #1
    1. Advertisements

  2. Ilya

    Ilya Guest

    Hi all.

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

    Regards,
    Ilya
     
    Ilya, Jun 29, 2004
    #2
    1. Advertisements

  3. Ilya

    Whitecrest Guest

    your breath
     
    Whitecrest, Jun 29, 2004
    #3
  4. Ilya

    rf Guest

    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, Jun 29, 2004
    #4
  5. Ilya

    rf Guest

    rf:
    Ilya:
    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 :)
     
    rf, Jun 29, 2004
    #5
  6. Ilya

    Ilya Guest

    rf wrote:
    [snip]
    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, Jun 29, 2004
    #6
  7. Ilya

    Ilya Guest

    rf wrote:
    [snip]
    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.
    Will certainly try later.
    Thanks for advice.

    Regards,
    Ilya
     
    Ilya, Jun 29, 2004
    #7
  8. Ilya

    Mitja Guest

    Try http://www.alistapart.com/articles/slidingdoors/
     
    Mitja, Jun 29, 2004
    #8
  9. Ilya

    Andy Dingley Guest

    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.
     
    Andy Dingley, Jun 29, 2004
    #9
  10. Ilya

    Ilya Guest

    Ilya, Jun 30, 2004
    #10
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.