Solved

Trying to incorporate CSS into DWT Template

Posted on 2004-08-11
13
381 Views
Last Modified: 2012-06-27
Hi!

I have the below listed code in a dynamic web template:
It works fine, but is not w3c compliant.
So with help from the gurus on this site, I now have the equivalent CSS to replace most of this table.

The problem I have is where should I place this statement:

       <!-- #BeginEditable "Main" -->&nbsp;<!-- #EndEditable -->

If I remove it from this page I get an error when trying to save the template.
It complains that there are no tags. Additionally, if I remove it when I save the DWT will overwrite all the content we have on other pages.

Any ideas would be greatly appreciated.

Original code:

<table border="0" cellpadding="0" cellspacing="0" width="99%" id="table5">
      <tr>
                           <td bgcolor="#FFFFFF">
                 <img name="content_r1_c1" src="web/images/content_r1_c1.gif" width="16" height="17" border="0" alt=""></td>
                 <td background="web/images/content_r1_c2.gif"></td>
                 <td bgcolor="#FFFFFF">
                 <img name="content_r1_c3" src="web/images/content_r1_c3.gif" width="19" height="17" border="0" alt=""></td>
      </tr>
      <tr>
                 <td background="web/images/content_r2_c1.gif">&nbsp;</td>
                 <td bgcolor="#FFFFFF" align="left" valign="top" width="100%" style="font-family: Tahoma; font-size: 10pt; color: #000000">
                 <!-- #BeginEditable "Main" -->&nbsp;<!-- #EndEditable --></td>
                           <td background="web/images/content_r2_c3.gif">&nbsp;</td>
      </tr>
      <tr>
                       <td>
            <img name="content_r3_c1" src="web/images/content_r3_c1.gif" width="16" height="25" border="0" alt=""></td>
            <td background="web/images/content_r3_c2.gif">&nbsp;</td>
            <td>
            <img name="content_r3_c3" src="web/images/content_r3_c3.gif" width="19" height="25" border="0" alt=""></td>
      </tr>
      <tr>
            <td colspan="3">
                     <!--webbot bot="Include" U-Include="bottomnavigationbar.htm" TAG="BODY" --></td>
      </tr>
</table>

Revised code

<table border="0" cellpadding="0" cellspacing="0" width="99%" id="table5">
               <tr>
               <td>
                           <!--webbot bot="Include" U-Include="main.htm" TAG="BODY" -->
                 <!-- #BeginEditable "Main" -->&nbsp;<!-- #EndEditable --></td>
         <tr>
            <td colspan="3">
                     <!--webbot bot="Include" U-Include="bottomnavigationbar.htm" TAG="BODY" --></td>
      </tr>
</table>

I think the problem with this revision is that the main.htm will not automatically expand to encapsulate the content that is between the two aforementioned tags.
0
Comment
Question by:TrueBlue
  • 7
  • 6
13 Comments
 
LVL 3

Expert Comment

by:OutsideTheBox
ID: 11785695
TrueBlue,

One good thing about converting to css is that you don't nessasarily need to use tables anymore for structure of layout. I'm not sure if DWT requires table structure or not.

Have you tried to place it between the p tags?. I'm assuming this relates to the same page.

Since you created a div to place the content in(roundcont), you no longer need to have a table structure inside of it. If DWT dictates putting your editable content inside a table cell, you must create a new table. this would go where I placed the p tags.
<table>
<td>
<!-- #BeginEditable "Main" -->&nbsp;<!-- #EndEditable -->
</td>
</table>

Anything place between the p tags(or a table) will be applied to div roundcont in normal flow layout and will adjust the hight of div roundcont to fit whatever is in it.

I am concerned that you will run into a problem with your bottom navigation bar getting in the way if roundcont extends down much lower. Don't worry, that can be fixed too.

<div id="roundcont">
     <img id="cornertl" src="web/images/content_r1_c1.gif"></img>
     <img id="topgif" src="web/images/content_r1_c2.gif"></img>
     <img id="cornertr" src="web/images/content_r1_c3.gif"></img>
<p>
<!-- #BeginEditable "Main" -->

<!-- #EndEditable -->
</p>
     <img id="cornerbr" src="web/images/content_r3_c3.gif"></img>
     <img id="bottomgif" src="web/images/content_r3_c2.gif"></img>
     <img id="cornerbl" src="web/images/content_r3_c1.gif"></img>
</div>
0
 
LVL 3

Expert Comment

by:OutsideTheBox
ID: 11785794
Also check the stylesheet for styling on the p tag. I think we added margins to it to place the content below the upper gifs and left side margins too.
0
 

Author Comment

by:TrueBlue
ID: 11787911
Hi OutsideTheBox:

I incorporated your suggestions.

I get the following error when I go to save the DWT.

The Dynamic Web Template ... can not be attached because it contains no editable regions.

This is my current version of the DTW:

<!--webbot bot="Include" U-Include="topnavigationbar.htm" TAG="BODY" -->
<table border="0" cellpadding="0" style="border-collapse: collapse" width="100%" id="table3">
     <tr>
               <td align="right" valign="top" width="195" nowrap><br><br>
                <!--webbot bot="Include" U-Include="leftnavigationmenu.htm" TAG="BODY" --></td>
      <td width="100%" align="left" valign="top">
                      <table border="0" cellpadding="0" cellspacing="0" width="99%" id="table5">
                    <tr>
                                    <td><!--webbot bot="Include" U-Include="main.htm" TAG="BODY" --></td>
                    </tr>
                     <tr>
                                 <td colspan="3">
                       <!--webbot bot="Include" U-Include="bottomnavigationbar.htm" TAG="BODY" --></td>
                                        </tr>
                        </table>
                  </td>
            </tr>
            <tr>
                           <td></td>
                           <td style="font-family: Tahoma; font-size: 8pt">
                            <p align="left">Copyright <font face="Times New Roman">©</font>
                            1999 - 2004. </p></td>
            </tr>
</table>
</body>

This is what I have in the main.htm file:

<html>
<head>
<title></title>
</head>
<body>
<div id="roundcont">
     <img id="cornertl" src="web/images/content_r1_c1.gif"></img>
     <img id="topgif" src="web/images/content_r1_c2.gif"></img>
     <img id="cornertr" src="web/images/content_r1_c3.gif"></img>
     <p><!-- #BeginEditable "Main" -->&nbsp;<!-- #EndEditable --></p>
     <img id="cornerbr" src="web/images/content_r3_c3.gif"></img>
     <img id="bottomgif" src="web/images/content_r3_c2.gif"></img>
     <img id="cornerbl" src="web/images/content_r3_c1.gif"></img>
</div>
</body>
</html>

Is there a way to just have the box automically size itself and have the content on top of it?

Or is there a better way?

Thank you in advance.

0
 
LVL 3

Expert Comment

by:OutsideTheBox
ID: 11788972
According to this web site, you should change the placement of the p tags

-----------------------------------------------------------
http://dwtig.com/general_standards.htm

DWTIG Region Tags
It is imperative that the <p> tags surrounding the Editable Regions are correctly placed to allow editing by the end user.  FrontPage 2003 applies the <p> tags correctly on the first Editable Region, but if another Editable Region is placed after the first, the <p> tags may not be placed properly.  Check your HTML source (Split Screen is easiest) to ensure the tags are properly placed within Editable Regions as shown below, and if they are not, adjust the HTML accordingly.  

Correct Placement (example shows body1 Editable Region):  

<!-- #BeginEditable "body1" -->
<p><!--webbot bot="PurpleText" PREVIEW="Main body content here" --></p>
<!-- #EndEditable -->

----------------------------------------------------


according to that.... try this

<html>
<head>
<title></title>
</head>
<body>
<div id="roundcont">
     <img id="cornertl" src="web/images/content_r1_c1.gif"></img>
     <img id="topgif" src="web/images/content_r1_c2.gif"></img>
     <img id="cornertr" src="web/images/content_r1_c3.gif"></img>
<!-- #BeginEditable "Main" -->
<p>
your content goes here.
</p>
<!-- #EndEditable -->
     <img id="cornerbr" src="web/images/content_r3_c3.gif"></img>
     <img id="bottomgif" src="web/images/content_r3_c2.gif"></img>
     <img id="cornerbl" src="web/images/content_r3_c1.gif"></img>
</div>
</body>
</html>




0
 

Author Comment

by:TrueBlue
ID: 11789124
Hi OutsideTheBox:

I tried that suggestion and got the same error.

It is as though it is not including the file before it checks for DWT compliance.

Any other ideas?

Thank you for your help...
0
 
LVL 3

Expert Comment

by:OutsideTheBox
ID: 11792207
Boy, I wish I could help you there, but I've never worked with DWT before.

Check syntax, and then double-check it. That always seems to get me.

Trying to make the box big and superimpose the content on top is kind of a hack and could be more difficult in the long run than working through this DWT issue.

I wonder if you may have better results asking this DWT question in the FrontPage Topic Area.

Are you dead set to use DWT?  It seems like you know enough about web design to apply your templates through css and update your content inside the html tags that hold it. That would, however, require an even bigger plunge into your website overhaul.

Also, make sure you haven’t left a table, tr, or td tag missing in the test.htm.

Also, try removing the <p> tags in the editable region. You don’t need them anyways yet since you haven’t started to style your content with css.

Also, are you sure you need the <!-- #BeginEditable "Main" -->&nbsp;<!-- #EndEditable -->  in your revised code (in your initial question post), since it is already in the main.htm? It seems that the line above has the U-Include="main.htm" and that is where the editable region is implied from. (But I don't know DWT, it just did't make sense).



0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

Author Comment

by:TrueBlue
ID: 11797334
Hi OutsideTheBox:

Couldn't I just do away with the main.htm include and just copy the contents of it directly into my DWT?

Thank you for your help.
0
 

Author Comment

by:TrueBlue
ID: 11797969
Hi OutsideTheBox:

It almost works with the main.htm as part of the DWT instead of an include.
The only thing that is not working is that the bottom bar is not displaying below the main box.

Any ideas????

!--webbot bot="Include" U-Include="topnavigationbar.htm" TAG="BODY" -->
<table border="0" cellpadding="0" style="border-collapse: collapse" width="100%" id="table3">
                  <tr>
               <td align="right" valign="top" width="195" nowrap><br><br>
                <!--webbot bot="Include" U-Include="leftnavigationmenu.htm" TAG="BODY" --></td>
                <td width="100%" align="left" valign="top">
                           <table border="0" cellpadding="0" cellspacing="0" width="99%" id="table5">
                <tr>
                  <td>
                          <div id="roundcont">
                        <img id="cornertl" src="web/images/content_r1_c1.gif"></img>
                        <img id="topgif" src="web/images/content_r1_c2.gif"></img>
                        <img id="cornertr" src="web/images/content_r1_c3.gif"></img>
                        <p><!-- #BeginEditable "Main" -->&nbsp;<!-- #EndEditable --></p>
                        <img id="cornerbr" src="web/images/content_r3_c3.gif"></img>
                        <img id="bottomgif" src="web/images/content_r3_c2.gif"></img>
                        <img id="cornerbl" src="web/images/content_r3_c1.gif"></img>
                      </div>
                  </td>
                  </tr>            
                 <tr>
                      <td colspan="3">
                       <!--webbot bot="Include" U-Include="bottomnavigationbar.htm" TAG="BODY" --></td>
                         </tr>
                         </table>
                         
                         </td>
                   </tr>
                      <tr>
                          <td></td>
                             <td>
                            <p align="left">Copyright <font face="Times New Roman">©</font>
                            1999 - 2004.</p>
                        </td>
                     </tr>
              </table>
0
 
LVL 3

Expert Comment

by:OutsideTheBox
ID: 11809237
I thought that btm nav bar would get in the way, we can fix that but I'm busy until tuesday night. I'll check back in then.
0
 

Author Comment

by:TrueBlue
ID: 11827576
Hi OutsideTheBox:

Sorry for the delay in responding.
We are having quite a time due to the Hurricane.

I would greatly appreciate any assistance in the matter.

0
 
LVL 3

Expert Comment

by:OutsideTheBox
ID: 11829778
Hi TrueBlue,
I haven't forgot you, Just really busy. Hope you did't get too pounded.

I should have something for you later today.
0
 
LVL 3

Accepted Solution

by:
OutsideTheBox earned 500 total points
ID: 11835568
TrueBlue,

Sorry I don't have much time right now, duty calls.
Try to implement the ideas in the following article to handle the bottom nav problem.
http://www.alistapart.com/articles/footers/
You may need to bring the bottom nav menu & the copyright text into a div of its own to follow the gist of the article. Also maybe add some padding to the bottom of #roundcont as suggested in the article.
Let me know how your doing. I just don't have the time right now to help write & test it.
0
 

Author Comment

by:TrueBlue
ID: 11926557
Hi OutsideTheBox:

I appreciate the link, but I not experienced enough in CSS to apply it to my particular situation.

We just got our phones back after two weeks due to the Hurricane and we are in catch up mode.

Thank you for the assistance.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now