dcsimg
A Flash Developer Resource Site

Results 1 to 6 of 6

Thread: Help with HTML

  1. #1
    Senior Member Ecinele's Avatar
    Join Date
    Nov 2002
    Posts
    439

    Help with HTML

    Hi
    I would like to know how to line up a background design with the SWF file like in this page:
    http://www.template-help.com/screenshots/9100/9182.html
    As you can see the lines in the background match with lines in the swf file.
    Thanks
    Ecinele

  2. #2
    Looking at the source, here's what they did

    first they remove the margin around the page body
    PHP Code:
    <head>
    <
    title>9182 intro preview</title>
    <
    style type="text/css">
    <!--
    body {
        
    margin-left0px;
        
    margin-top0px;
        
    margin-right0px;
        
    margin-bottom0px;
    }
    -->
    </
    style></head
    Then they create a table that will fill the entire viewport of the browser by making the width and the height 100%. The background of the table is then set to the background image, it gets centered and repeats along the x axis.
    PHP Code:
    <table width="100%" border="0" 
           
    cellpadding="0" cellspacing="0" 
           
    style="background-repeat:repeat-x; 
                  background-position: center; height:100%; 
                  background-image: url(9182-1.jpg)"

    Then they add a cell to the table and set the table alignment to center the content horizontally and vertically
    PHP Code:
     <tr>
        <
    td align="center" valign="middle"SWF GOES HERE </td>
      </
    tr>
    </
    table
    And that's it. As long as the background in the swf is also centered horizontally and vertically, the two should match up.

  3. #3
    Senior Member Ecinele's Avatar
    Join Date
    Nov 2002
    Posts
    439
    Thanks for your help
    I noticed that the image is linked used background-image: url(9182-1.jpg)
    how do you link to an image inside an image folder?
    Ecinele

  4. #4
    it's exactly the same way you would do it in an img tag. If your image was under the images folder then you would use

    PHP Code:
    background-imageurl(images/9182-1.jpg
    see w3schools for more info

  5. #5
    Senior Member Ecinele's Avatar
    Join Date
    Nov 2002
    Posts
    439
    Should the table be inserted like this?

    <body>
    <table width="100%" border="0"
    cellpadding="0" cellspacing="0"
    style="background-repeat:repeat-x;
    background-position: center; height:100%;
    background-image: url(images/main_bkg.jpg)">
    </body>


    If I insert a table the conventional way, dreamweaver doesn't give me an option for the specs you have here.
    Last edited by Ecinele; 12-15-2007 at 09:40 PM.

  6. #6
    Senior Member Ecinele's Avatar
    Join Date
    Nov 2002
    Posts
    439
    Thanks for your help. It did work.
    Ecinele

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center