Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Junior Member
    Join Date
    Apr 2011
    Posts
    11
    Member #
    27510
    Hi all,

    before I start I would like to say that I know Tables are an old outdated tech and I should be using solely CSS but I aint learned CSS yet.
    [COLOR=rgb(20, 20, 20)]
    I have a Table, it has a cell background image filling the entire table (website) , then I have another table filling the first table, this table has 3 rows - the top row is for logo and links , center row is for content and bottom row is for more info... as the image is in the first table then all my text, links and logo display over the top of it, the top row and bottom row of the second table I have opaque with black background as I want to 'darken' them (but still reveal the background image underneath) so that links and text can be read more clearly but you can still see the background image, the opacity also makes the cell appear as a 'section' which is what Iam trying to acheive

    so to be clear
    1 Table which forms the box in middle of screen to hold the website -> this table has an image in it that fills it..
    - a 2nd table within that which has 3 rows a small one at top and bottom and large one in middle, that top one holds logo and links , bottom one holds extra info... I have these with black backgrounds but with opacity set on these cells to make it darker/dimmer but still revealing image underneath.. but the opacity also dims the text, links and logo that sit in the cells and I do not want this....

    look at this guys website: [COLOR=rgb(32, 117, 183)]http://www.tjfpersonaltraining.com/[/COLOR]
    thats what Iam trying to acheive

    here is the code im using:

    <td class="opacity" width="42%" height="94" align="center" valign="middle" bgcolor="#000000"><img src="Graphics/FINAL/TRANSPARENT LOGO.png" width="351" height="82" alt="logo" /></td>

    I only want it applied to the bgcolor and not the .PNG image
    [/COLOR]

    [COLOR=rgb(0, 0, 0)]thanks in advance[/COLOR]

  2.  

  3. #2
    Senior Member LeenkzMike's Avatar
    Join Date
    Jan 2011
    Location
    Toe-Peek-ah, Kansas
    Posts
    608
    Member #
    26365
    Liked
    80 times
    I am no web designer, but if you are are trying to manipulate what's "Behind" the cell, I dont think you can fix it in the code of the table that is sitting "in front" of it, but I might be wrong.
    Peace, Mike
    WebHost1-For all your Hosting needs.
    Leenkz.Com-The web starts here! (Blatant use of tables)
    I realllllly need to feel useful, please "like" my signatures!!!! (Button is on the bottom right!)

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Add this:
    Code:
    .opaque {
    opacity:1.0;
    filter:alpha(opacity=100);
    }
    And wrap this around the content you want to be opaque:
    HTML Code:
    <span class="opaque"></span>
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    The easier way is not to use CSS at all, but to apply the opacity directly to the background image itself.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Junior Member
    Join Date
    Apr 2011
    Posts
    11
    Member #
    27510
    sorry, I probably wasnt too clear....

    I have a Table, it has a cell background image filling the entire table (website) , then I have another table filling the first table, this table has 3 rows - the top row is for logo and links , center row is for content and bottom row is for more info... as the image is in the first table then all my text, links and logo display over the top of it, the top row and bottom row of the second table I have opaque with black background as I want to 'darken' them (but still reveal the background image underneath) so that links and text can be read more clearly but you can still see the background image, the opacity also makes the cell appear as a 'section' which is what Iam trying to acheive

    so to be clear
    1 Table which forms the box in middle of screen to hold the website -> this table has an image in it that fills it..
    - a 2nd table within that which has 3 rows a small one at top and bottom and large one in middle, that top one holds logo and links , bottom one holds extra info... I have these with black backgrounds but with opacity set on these cells to make it darker/dimmer but still revealing image underneath.. but the opacity also dims the text, links and logo that sit in the cells and I do not want this....

    look at this guys website: http://www.tjfpersonaltraining.com/
    thats what Iam trying to acheive

    here is the code im using:

    <td class="opacity" width="42%" height="94" align="center" valign="middle" bgcolor="#000000"><img src="Graphics/FINAL/TRANSPARENT LOGO.png" width="351" height="82" alt="logo" /></td>

    I only want it applied to the bgcolor and not the .PNG image

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I know it isn't what you want to hear, but it really IS better to just take the time to learn the right way to do it...
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Junior Member
    Join Date
    Apr 2011
    Posts
    11
    Member #
    27510
    Actually Ive sussed an easier way but would like to hear of any other methods..

    im just adding the opaque banners into the image - works a treat
    only thing is though im gunna be using a different image of each of the pages (about 8 pages) and means I have to get the banners dead on...

    thanks

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Hey, if it works for you...
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Junior Member
    Join Date
    Apr 2011
    Posts
    11
    Member #
    27510
    I think that IS the proper way to do what Im trying to achieve - darken out a section of the background image to make appear as an opaque banner so your text can contrast in front of it


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

cell background opacity

,

table cell opacity

Click on a term to search for related topics.
All times are GMT -6. The time now is 08:17 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com