3 Replies Latest reply on Mar 31, 2010 3:08 PM by Nancy OShea

    Need help with this template layout

    novicewebdesignerx

      Hi, i am having some trouble with managing this layout and need help.

       

      1) pbwebsite.jpg

      How come the template is all apart when i added the templates(editable content, regional) for each cut-out parts? How can i make them all together?

       

      2)flhswebsite1.jpg

      How can i make the background expand both left and right so it can cover up the white space?

       

      Thanks in advance.

        • 1. Re: Need help with this template layout
          Nancy OShea Adobe Community Professional & MVP

          The answers are in your CSS and HTML code.  Screenshots tell us nothing.

          Can you post a URL to your page so we can see it in our web browsers?  That is the best way to get answers here.

           

          2) To tile or repeat a background image with CSS:

           

          body {

          background: url (some-BG-image.jpg) repeat

          }

           

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com

          • 2. Re: Need help with this template layout
            webprogrammer123

            I haven't host the website yet. However here's the code if it helps.

             

             

             

            <html><!-- InstanceBegin template="/Templates/main_layout.dwt" codeOutsideHTMLIsLocked="false" -->

            <head>

            <title>bwebsitepreview3</title>

            <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">

            </head>

            <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

            <!-- Save for Web Slices (bwebsitepreview3.jpg) -->

            <table width="1281" height="1024" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">

            <tr>

            <td rowspan="37"><!-- InstanceBeginRepeat name="Background_left" --><!-- InstanceBeginRepeatEntry --><img src="images/Background_Left.jpg" width="100" height="1000" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td colspan="9"><!-- InstanceBeginRepeat name="Banner" --><!-- InstanceBeginRepeatEntry --><img src="images/Banner.jpg" width="861" height="214" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td rowspan="37"><!-- InstanceBeginRepeat name="Background_Right" --><!-- InstanceBeginRepeatEntry --><img src="images/Background_right.jpg" width="301" height="1000" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td rowspan="38">

            <img src="images/main_layout_04.jpg" width="18" height="1024" alt=""></td>

            <td>

            <img src="images/spacer.gif" width="1" height="214" alt=""></td>

            </tr>

            <tr>

            <td colspan="2" rowspan="2">

            <img src="images/main_layout_05.jpg" width="127" height="44" alt=""></td>

            <td rowspan="36">

            <img src="images/main_layout_06.jpg" width="26" height="786" alt=""></td>

            <td><!-- InstanceBeginRepeat name="Alpha" --><!-- InstanceBeginRepeatEntry --><img src="images/Alpha.jpg" width="135" height="28" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td><!-- InstanceBeginRepeat name="Bravo" --><!-- InstanceBeginRepeatEntry --><img src="images/Bravo.jpg" width="135" height="28" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td><!-- InstanceBeginRepeat name="Charlie" --><!-- InstanceBeginRepeatEntry --><img src="images/Charlie.jpg" width="135" height="28" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td><!-- InstanceBeginRepeat name="Delta" --><!-- InstanceBeginRepeatEntry --><img src="images/Delta.jpg" width="135" height="28" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td><!-- InstanceBeginRepeat name="Echo" --><!-- InstanceBeginRepeatEntry --><img src="images/Echo.jpg" width="135" height="28" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td rowspan="36">

            <img src="images/main_layout_12.jpg" width="33" height="786" alt=""></td>

            <td>

            <img src="images/spacer.gif" width="1" height="28" alt=""></td>

            </tr>

            <tr>

            <td colspan="5" rowspan="34"><!-- InstanceBeginEditable name="Main Content" -->

              <p><img src="images/Main-Content.jpg" width="675" height="637" alt=""></p>

            <!-- InstanceEndEditable --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="16" alt=""></td>

            </tr>

            <tr>

            <td rowspan="35">

            <img src="images/main_layout_14.jpg" width="14" height="766" alt=""></td>

            <td><!-- InstanceBeginRepeat name="JROTC_History" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_15.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="JROTC_Creed" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_16.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="Patriot_History" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_17.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td>

            <img src="images/main_layout_18.jpg" width="113" height="22" alt=""></td>

            <td>

            <img src="images/spacer.gif" width="1" height="22" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="Grooming" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_19.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="Questions" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_20.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="Ranks" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_21.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="Ribbons" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_22.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="Uniform" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_23.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td>

            <img src="images/main_layout_24.jpg" width="113" height="18" alt=""></td>

            <td>

            <img src="images/spacer.gif" width="1" height="18" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="Army Instructors" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_25.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="Battalion_Ldrship" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_26.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td>

            <img src="images/main_layout_27.jpg" width="113" height="19" alt=""></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="Academic" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_28.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="Choir" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_29.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="Drill" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_30.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="Drum Corp" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_31.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="Honor Guard" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_32.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="PT" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_33.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="Raiders" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_34.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td>

            <img src="images/main_layout_35.jpg" width="113" height="17" alt=""></td>

            <td>

            <img src="images/spacer.gif" width="1" height="17" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="S-1 Adjutant" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_36.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="S-2 Information" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_37.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="S-3 Operations" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_38.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="S-4 Logistics" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_39.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="S-5 Special Proj." --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_40.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="S-6 Tech Comm" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_41.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="S-7 Security" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_42.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td>

            <img src="images/main_layout_43.jpg" width="113" height="18" alt=""></td>

            <td>

            <img src="images/spacer.gif" width="1" height="18" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="Sentinel" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_44.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="Movies" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_45.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td><!-- InstanceBeginRepeat name="Patriot Alumni" --><!-- InstanceBeginRepeatEntry --><img src="images/main_layout_46.jpg" width="113" height="19" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="19" alt=""></td>

            </tr>

            <tr>

            <td rowspan="3">

            <img src="images/main_layout_47.jpg" width="113" height="159" alt=""></td>

            <td>

            <img src="images/spacer.gif" width="1" height="14" alt=""></td>

            </tr>

            <tr>

            <td colspan="5"><!-- InstanceBeginRepeat name="Footer" --><!-- InstanceBeginRepeatEntry --><img src="images/Footer.jpg" width="675" height="121" alt=""><!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat --></td>

            <td>

            <img src="images/spacer.gif" width="1" height="121" alt=""></td>

            </tr>

            <tr>

            <td>

            <img src="images/main_layout_49.jpg" width="100" height="24" alt=""></td>

            <td colspan="8">

            <img src="images/main_layout_50.jpg" width="1035" height="24" alt=""></td>

            <td>

            <img src="images/spacer.gif" width="1" height="24" alt=""></td>

            </tr>

            </table>

            <!-- End Save for Web Slices -->

            </body>

            <!-- InstanceEnd --></html>

            • 3. Re: Need help with this template layout
              Nancy OShea Adobe Community Professional & MVP

              Use your graphics app to make images only.  Use DW to build your web pages.

               

              TUTORIAL: Taking  a Fireworks (or Photoshop) comp to a CSS based layout in DW

               

              Part 1 --
              http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html

               

              Part 2 --
              http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html

               

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              http://alt-web.com/
              http://twitter.com/altweb
              http://alt-web.blogspot.com