Simple solution to a simple design?

8 replies
  • WEB DESIGN
  • |
I want to create a simple template that appears as one page of paper on a plain background with drop shadows, etc. I have one image to use as a table background that looks ok, but there is no top and bottom border.



My question is can I use this with a top and bottom tables, or would it be easier to just have one image for a table backgroung with the top and bottom already attached?

And how do I construct?

Dave
#design #simple #solution
  • Profile picture of the author casius
    You be better to use adjustments with tables. Simple add three columns to your table and both from left and right set to 1px width and you will have simple border from both side. Do not forget to set the color as well.
    Signature
    Cloud VPS || Shared Hosting
    Web Hosting Solutions for Geeks!
    HOST1PLUS
    {{ DiscussionBoard.errors[1979662].message }}
    • Profile picture of the author mrdanderson
      Thanks, but I don't want a plain border. I want drop shadows.
      {{ DiscussionBoard.errors[1979685].message }}
  • Profile picture of the author LADWebDesign
    If you want the image to be the background on the whole page, the best way to do it is to use css like:

    <html>
    <head>
    <style type="text/css">
    body
    {
    background-image:url('gradient2.png');
    background-repeat:repeat-x
    ;
    }
    </style>
    </head>

    Let me know if you have any questions -

    Linda
    {{ DiscussionBoard.errors[1979775].message }}
    • Profile picture of the author mrdanderson
      Hi,

      I don't really want the entire page with the background. Only the table. But with the current image the top and bottom are missing.
      I want a page with a white background with a centered "page" that appears as a sheet of paper with drop shadows, etc.

      Does that make sense?

      Dave ttechllc@bellsouth.net
      {{ DiscussionBoard.errors[1979840].message }}
  • Profile picture of the author casius
    So you need to put a background to those two left and right columns that is all what you will need. I guess that is the simplest way of doing that.
    Signature
    Cloud VPS || Shared Hosting
    Web Hosting Solutions for Geeks!
    HOST1PLUS
    {{ DiscussionBoard.errors[1979920].message }}
  • Profile picture of the author mrdanderson
    Hi,

    Well, Yes..I think)
    The problem is I don't have a top and bottom image to match the middle.

    Dave
    {{ DiscussionBoard.errors[1980786].message }}
  • Profile picture of the author Christopher Airey
    The image you provided won't look like a piece of paper since with paper the dark line should be directly at the edge of the paper with a fade out. One way you could achieve your desired result without working with images is to do one table around the content with a white background and a 1px black border around some of the cells. Then, to simulate the shadow, do a light gray row/column. For example, use the following:

    <table style="width: 400px;background-color: #ffffff;" cellspacing=0>
    <tr>
    <td colspan=2 style="height: 10px; border: #000000 solid; border-width: 1px 1px 0px 1px;">&nbsp;</td>
    <td style="width: 10px;">&nbsp;</td>
    </tr>

    <tr>
    <td style="width: 10px; border: #000000 solid; border-width: 0px 0px 1px 1px;">&nbsp;</td>
    <td style="border: #000000 solid; border-width: 0px 1px 1px 0px;"> CONTENT GOES HERE<BR><BR> </td>
    <td style="width: 10px; background-color: #eeeeee;">&nbsp;</td>
    </tr>

    <tr>
    <td style="width: 10px; height: 10px;">&nbsp;</td>
    <td colspan="2" style="background-color: #eeeeee;">&nbsp;</td>
    </tr>
    </table>
    {{ DiscussionBoard.errors[1981063].message }}
  • Profile picture of the author mrdanderson
    Thanks Chris,
    That is ALMOST what I am trying to achieve, but not really realistic looking.
    Most of the sites I have seen use a image for the top, bottom, and sides.

    I just can't seem to be able to find the images or a template.

    Maybe I need a good Photoshop person. But then I'm not sure how to put the images all together.
    {{ DiscussionBoard.errors[1983303].message }}

Trending Topics