SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Css Masks

  1. #1
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css Masks

    Greetings


    I have a banner in my site legaliza-te.com, where the banner's image is the first line's background picture for resizing purposes in different resolutions.

    But i'm looking for a way to get the table's edges rounded. But in this case i cant use that old trick of rounding the picture's edges, or creating more rows and complete the banner picture with round edges, just because the picture is resizeable, see for your self: www.legaliza-te.com

    So i want to "hide" the table edges with a mask, is that possible with CSS??

    If you dont understand what i meant, here's a picture to explain better, because this can sound really confusing:



    That's what i want, a mask that crops/cuts/hides the edges of that table.

    That row source code is this one:

    PHP Code:
    <table border="0" bordercolor="#CCCCCC" width="100%" id="table1" style="border-collapse: collapse" cellpadding="0" cellspacing="0">
        <
    tr>

    <
    td colspan="3" height="180" align="right" background="banner1.jpg" valign="bottom">

    <
    font color="#ffffff" size="1">Existem 265 aplicações e 37 membros no Legaliza-te!</font>

    </
    td>
        </
    tr

    Where you see
    "<td colspan="3" height="180" align="right" background="banner1.jpg" valign="bottom">"
    Is where the banner picture is defined as background.
    Look i cant do it other way, because i cant have a picture adapted to a 800x600 resolution and at the same time to a 1280x1024.

    So this mask is really the only solution left..

    Can you help me?

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hello,

    The methods you are using to make this site are very outdated now, tables are very hard to work with when you are trying to gain control over the style.
    One way you do it with CSS is to position 2 elements at the corners of the container element with absolute positioning and background images.

    However I tend to nest elements wherever I need more than one background image though.
    Code:
    <div id="header"> -- This can hold the background
      <div class="inner"> -- This can hold one of the corner images
         <div class="inner"> --This element can contain the other corner image
         Content goes here
         </div>
      </div>
    </div>
    This would create 3 box level elements in exactly the same spot with the same dimensions - All you need to do is apply the background images with a transparent background-color so you can see the image underneath.

  3. #3
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But i dont have round corner images, and i cant make ones that fit with the banner, because his size is not allways the same, so there'll be a frontier between the corners and the banner itself.

    The only solution is that kind of mask, but, i can use Divs insteal of tables.

    So with divs how can i do with if i dont have corner images?

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    I have no idea what you mean by "i dont have round corner images"
    Just make some


Bookmarks

Posting Permissions

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