AP Divs

www.graver-tank.com  is the  website.  On my project Summaries page, I have 3 separate images that  each need to be linked to their own pdf file. I set a rule for each one  as a DIV, but they still act as one when you click on the link.  Can  someone look at my code and let me know what I have done?  I am using a  template and the main content area is editable on each page.  When I am  adding columns of text or pictures, it is best to create them as  "containers" or "content"?  I am really trying to get a good  understanding on CSS style sheets, but need some basic help.
Thanks!

Looks like you used MS Word to create this and it's a mess.  227 code errors listed below:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.graver-tank.com%2F
Please don't use MS Word to create web pages.  ;-)
Have a look at some Web design tutorials.  And learn to work with HTML and CSS code.  It will make DW much easier for you.
HTML & CSS Tutorials - http://w3schools.com/
Learn CSS positioning in 10 Steps
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Creating  your first web site in DW CS5 -
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
New DW Starter Pages --
http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

  • How can I have use the same div ID multiple times on the same page?

    Okay so a problem I encounter a lot is that often times I want to use the same div ID several times on the same page. An example of this is when I'm creating table like designs.
    Let's say for instance I create a div ID called 'product-container'. I want to use 'product-container' multiple times on the same page but if I do this it is improper XHTML and will throw errors in any XHTML validator (you are only allowed to use a div ID once on any XHTML page in order for it to be standards compliant).
    Now the first option is that I could define 'product-container' in my CSS style sheet multiple times by doing something like this...
    #product-container {
         width: 300px;
    #product-container-2 {
         width: 300px;
    #product-container-3 {
         width: 300px;
    #product-container-4 {
         width: 300px;
    What you will see there however is that it seems pointless to define the same ID numerous times over (just adding a number on the end) when each ID is the exact same thing and has the exact same attributes.
    Now what I have noticed is that there are some sites out there who manage to have the same ID appear several times in the code but add a number to it just like above. The difference is that they only have one definition for 'product-cointainer' in their CSS document but in their actual XHTML code they have IDs for 'product-container' but with numbers on the end like 2,3,4,5, etc. It's almost as if JavaScript or some other code is automatically appending a number on the end of the ID so the validator won't consider the markup to be invalid, but yet it knows that it's using the same 'product-container' style that is contained in the CSS style sheet.
    I hope I explained this correctly. I'm just hoping to find a way that I can put the same div ID on a page multiple times without having to define it over and over again in my CSS.
    Any help is much appreciated!

    Because it seems like by using a class you can't make this position as 
    well as you can by using an ID. Am I wrong?
    An ID name can be used only one time per page.  A class name can be used multiple times per page.
    .product {
    width: 300px;
    text-align:left;
    color: #FF0000
    border: 2px solid #666;
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

  • How do I move multiple Divs at a time?

    Hi,
    I can't seem to figure out how I move multiple Divs at a time. I have resized certain Div in the middle and now I have to move all the Divs that are below it up to align it with that certain div again. How do I select and move all the Divs in once? I know you can move them one at a time by changing the position in the properties or just drag them in the design view, but I have a fairly large amount of Divs.
    Thanks in advance,
    EC

    but is there any other way? Like changing something in the properties that will make the Divs bump up to the Div aoove that when you remove one out of there
    I'm afraid not.
    I  imported the whole site as divs by splitting the images in photoshop and saving it for web and devices.
    This is approach is OK for quick comps to show a client but definitely NOT suitable for a production site.  As soon as you attempt to edit your layout, the page will explode and fall apart.  This is caused by the rigid/fragile code that graphics apps attempt to generate based on the images sizes.
    Start over.  Use graphics apps to slice and optimize images only.
    Use DW to build your HTML and CSS code.
    Creating  your first web site in DW CS5 -
    http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
    Adobe Developer's Center - Getting Started tutorials
    http://www.adobe.com/devnet/dreamweaver/?view=gettingstarted
    Using  DW Page Properties to create a basic CSS style sheet
    http://kb2.adobe.com/community/publishing/505/cpsid_50576.html
    APDivs as a primary layout method seldom works well. Here is why:
    http://apptools.com/examples/pagelayout101.php
      Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb

  • What's wrong with my div tag / site won't center....

    Hi,
    I am re-designing a website and I cannot get it to center.  I created a div tag and id it "wrapper" and created a css rule.  I am sure its a simple mistake, but I cannot figure it out.....
    Here is the CSS rules...
    @charset "UTF-8";
    /* CSS Document */
    div, h1, h2, h3, h4, h5, h6, p, pre, address, blockquote, span, ul, ol, li, dl, dd, dt, ing {
              margin: 0px;
              padding: 0px;
    #wrapper{
              margin: 0, auto;
              background-color: #9B9E6B;
    ul {
              list-style: none;
    table#content1{
              background-color: #00C;
              background-image: url(_images/content_bgrnd.png);
              background-repeat: no-repeat;
              font-family: "Arial Black", Gadget, sans-serif;
              font-size: 20px;
              text-align: center;
              padding: 8px;
    Here is the code for the site......
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Kiahuna 104</title>
    <script type="text/javascript">
    <!--
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    //-->
    </script>
    <link href="104.css" rel="stylesheet" type="text/css" />
    </head>
    <body onload="MM_preloadImages('_images/buttinside1.jpg','_images/buttproperty1.jpg','_images/b uttactivities1.jpg','_images/buttdining1.jpg','_images/buttcontacts1.jpg','_images/home_lg 1.png','_images/home_lg2.png','_images/home_lg3.png','_images/home_lg4.png','_images/home_ lg5.png','_images/home_lg6.png','_images/home_lg7.png','_images/home_lg8.png')">
    <div id="wrapper">
    <!--Header-->
    <table id="header">
      <div class="header"><img src="_images/newLOGO.jpg" alt="Kiahuna 104" width="1000"/>
    </div>
    <!--Navigation table-->
    <table width="1000" bgcolor="000">
      <tr>
        <td width="40"> </td>
        <td width="150"><a href="inside.htm"><img src="_images/butthome1.jpg" alt="home1" name="home1"  id="home1" /></a></td>
        <td width="150"><img src="_images/buttinside2.jpg" alt="inside2" name="inside2" id="inside2" onmouseover="MM_swapImage('inside2','','_images/buttinside1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
        <td width="150"><a href="property.htm"><img src="_images/buttproperty2.jpg" alt="property2" name="property2" id="property2" onmouseover="MM_swapImage('property2','','_images/buttproperty1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
        <td width="150"><a href="activities.htm"><img src="_images/buttactivities2.jpg" alt="activities2" name="act2" id="act2" onmouseover="MM_swapImage('act2','','_images/buttactivities1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
        <td width="150"><a href="dining.htm"><img src="_images/buttdining2.jpg" alt="dining2" name="dining2" id="dining2" onmouseover="MM_swapImage('dining2','','_images/buttdining1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
        <td width="150"><a href="contact.htm"><img src="_images/buttcontacts2.jpg" alt="contact2" name="contact2" id="contact2" onmouseover="MM_swapImage('contact2','','_images/buttcontacts1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
      </tr>
    </table>
    <!--Start of content1 table- height = 371-->
    <table id="content1" table width="1000" height="371">
      <tr>
        <td width="34"> </td>
        <td width="897"><p>blah blah blah.</p>
          <p class="center2">NEW: IN-CONDO WASHER & DRYER - COMPLETELY NEW FURNITURE</p></td>
        <td width="53"> </td>
      </tr>
    </table>
    </body>
    </html>

    I tried to assign a width in both the page and CSS and it still doesn't center.  Here is a link to the site and the CSS....
    http://taffyproductions.com/test/
    @charset "UTF-8";
    /* CSS Document */
    div, h1, h2, h3, h4, h5, h6, p, pre, address, blockquote, span, ul, ol, li, dl, dd, dt, ing {
              margin: 0px;
              padding: 0px;
    #wrapper{
              margin: 0, auto;
              background-color: #000;
    ul {
              list-style: none;
    table#content1{
              background-color: #00C;
              background-image: url(_images/content_bgrnd.png);
              background-repeat: no-repeat;
    font-size: 16px;
              font-family: Papyrus, Arial, "Helvetica Bold", serif;
              font-size: 22px;
              text-align: center;
              padding: 8px;
    table#imagegallery{
              background-image: url(_images/imageGallery_bckgrnd.png);
              background-repeat: no-repeat;
    #imagegallery a img{
        padding: 0px;
        margin: 2px;
        border: 2px solid #000;
    #imagegallery a:hover img {
              border: 2px solid #C00;
    table#footer{
              background-image: url(_images/footer_bckgrnd.png);
              background-repeat: no-repeat;

  • I need help writing a dive scoring program in C#, Help Please?

    The state diving commission wants to computerize the scoring at its diving competitions. I have to write a program to automate the scoring of dives. Requirements:
    After each dive, the user will be prompted to enter the:
    diver's name;                    
    diver's city;                    
    degree of difficulty (ranges from 1.00 to 1.67); and                     
    scores from five judges (scores can range from 0 to 10).
    If an invalid score is entered, an error message will be displayed. The user will be prompted for the score repeatedly until a valid score is entered.
    The program will then display the following information:
    Diver's name                    
    Diver's city                    
    Dive final score: This is calculated by dropping the highest and lowest of the five judges' scores. The remaining three scores are added together, and the result is divided by 3 and then multiplied by the degree of difficulty.
    The program will then prompt the user if she/he wants to process another dive. The user can type "Y" or "y" to continue, and "N" or "n" to quit.

    Hi,
    The forum supports VS setup and installation. I think your issue is not about the forum.
    Please clarify your project type. Is it webform or winform?
    If it is webform, please post your issue to ASP.NET forum.
    If it is winform, please post it to
    winform forum.
    Regards.
    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click
    HERE to participate the survey.

  • Can someone help me understand how ePub CSS @fontface Unicode characters are supported in td , but not in div or other elements?

    Hi,
    I'm working on a project to convert several hundred thousand life sciences articles into epub format, and we have run in to a problem with character entities.
    Being that these are scientific articles, the characters are from a wide range of Unicode charts, and are essential to transmitting the meaning of the data.
    The problem is that in my epub, the character entity inside a table data cell is rendering the @font-face correctly, but inside any other HTML element, the character renders as an empty box on our ipad2s.
    I've placed pre tags in hopes that the unicode will not be rendered in your browser here. The code point in this example is x1d542 just in case.
    So inside div, we see boxes, inside td, we see the character rendered properly.
    <pre>
          <div class="stix">Let &#x1d542; be a field, which will be either the complex numbers &#x02102; or the finite field &#x1d53d;</div>
          <table id="t31" rules="all">
            <tr>
              <td>&#x1d542;</td>
              <td class="stix">&#x1d542;</td>
              <td>U+1D542 MATHEMATICAL DOUBLE-STRUCK CAPITAL K </td>
            </tr>
    </pre>
    My CSS looks like this:
    <pre>
    @font-face {
        font-family: 'STIX';
        src: url('STIX-Regular.otf') format('opentype');
        font-weight: normal;
        font-style: normal;
        unicode-range:  U+02B0-02FF, U+07C0-07FF,  U+0900-097F,U+0F00-0FD8, U+1D00-1D7F, U+1D80-1DBF, U+1D400-1D7FF, U+1E00-1EFF, U+1F00-1FFE,U+2000-206F, U+20A0-20B8, U+20D0-20F0, U+2300,23FF, U+25A0-25FF, U+2600-26FF, U+27C0-27EF, U+27F0-27FF, U+2900-297F, U+2A00-2AFF, U+2B00-2B59, U+2C60-2C7F ;
    @font-face {
        font-family: 'STIX-Math';
        src: url('STIXMath-Regular.otf') format('opentype');
        font-weight: normal;
        font-style: normal;
        unicode-range:  U+02B0-02FF, U+07C0-07FF,  U+0900-097F,U+0F00-0FD8, U+1D00-1D7F, U+1D80-1DBF, U+1D400-1D7FF, U+1E00-1EFF, U+1F00-1FFE,U+2000-206F, U+20A0-20B8, U+20D0-20F0, U+2300,23FF, U+25A0-25FF, U+2600-26FF, U+27C0-27EF, U+27F0-27FF, U+2900-297F, U+2A00-2AFF, U+2B00-2B59, U+2C60-2C7F ;
    .stix   {
            font-family: "STIX", "STIX-Math", sans-serif;
    </pre>
    Is it possible that this is a rendering bug, because the character is rendering in the table cell, but not in other elements?
    Have I missed something obvious?
    Thanks,
    Abe

    I assume you are including the STIX font as part of your epub files?     
    Perhaps the folks who do this blog might be able to help -- they have done some work with font embedding:
    http://www.pigsgourdsandwikis.com/2011/04/embedding-fonts-in-epub-ipad-iphone-an d.html

  • Which is best way toalign divs at bottom?

    I am hopefully getting near to completing my layout for webste and I am trying to build it as follows:-
    First I created a wrapper div to contain everything.
    Next I created a header div in which I will put my logo image jpeg as a background.
    Then I created a navbar div whch will contain navigation.
    I wil save above as a template as most of this should not change. All above divs are 960px wide with margins 0 auto 0 auto
    All the above has been achieved and would appear to be ok
    What I am trying to do now is create a mainbody div and in it two divs which by using float left and float right have managed to both divs aligning at top of mainbody div. One div is called leftbody and the other called rightbody. I have given mainbody div a red background, leftbody a blue background and rightbody a green background in order to view what s happening.
    I am wanting to enter text and images to rightbody and leftbody.
    When the text in leftbody goes farther down the page than the text in rightbody , the red background from mainbody appears below the green background of rightbody which is fine.
    But when the text in rightbody goes farther down the page than the text in leftbody, the red background from mainbody does not appear.
    How do I fix this so that the red background appears?
    and can I sort it so that if one dv is longer than the other, it creates a green or blue space to align the divs at the bottom
    I am sorry if this is a bit long winded but I am trying to make my question clear - hopefully the answer will be clear also.
    My code  and css is as follows if it helps.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id ="wrapper">
      this is wrapper div
    <div id="header">Content
        for id "header" Goes
        Here</div>
        <div id="navbar">this
          is navbar div wrapped
          inside wrapper div</div>
        <div id="mainbody">Content
          for id "mainbody" Goes
          Here
        <div id="bodyright">
          <p>Content
          for id "bodyright" Goes
          Here GReen writing
          goes here Content
          for id "bodyright" Goes
          Here GReen writing
          goes here Content
          for id "bodyright"</p>
          </div>
          <div id="bodyleft">Content
          for id "bodyleft" Goes
          Here Content
          for id "bodyleft" Goes
          Here Content<br>
    for id &quot;bodyleft&quot; Goes<br>
    <br>
    </div>
      </div>
    </div>
    </body>
    </html>
    /* CSS Document */
    #wrapper {
        background-color: #FFFF00;
        width: 960px;
        margin-top: 10px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    #navbar {
        background-color: #FFFF00;
        width: 960px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    #header {
        background-color: #FF6666;
        width: 960px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    #mainbody {
        background-color:#FF0033;
        width: 960px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    #bodyright {
        background-color: #66FF00;
        float: right;
        width: 760px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    #bodyleft  {
        background-color:#0000FF;
        width: 200px;

    To achieve the illusion of equal height columns, create a tri-colored background image (see my example), same width as  your #wrapper div, and repeat-y.
    BEFORE FAUX COLUMNS:
    http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml
    AFTER FAUX COLUMNS:
    http://alt-web.com/TEMPLATES/3-col-white-gray.shtml
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb
    http://alt-web.blogspot.com

  • Dreamweaver adding div height in tooltip?

    I dont normally use dreamweaver, but I must for this project,
    in dreamweaver for some bizarre reason the tooltip says height 50px
    (54px) and has added 4pxs to an image in a div. Anyone know why? It
    aligns in the browsers, IE 6, firefox, but why has dreamweaver
    added these 4 pixels and given it a gap in dreamweaver?
    Picture example:
    http://homepage.ntlworld.com/spensley/dreamweaverbug.jpg
    anyone know why and what this is all about?
    The css:
    #logo{
    top: 30px;
    width:126px;
    height: 51px;
    padding:0px;
    float: left;
    html:
    <div id="logo"><a href="index.html"><img
    src="media/images/gtfLogo.jpg" title="GTF logo" alt="GTF logo
    design" longdesc="three circles showing the letters G, T and F in
    orange and green" width="126"
    height="51"/><a/></div>

    Oops - sorry - missed the CSS.
    You have a munged <a> tag -
    orange and green" width="126" height="51"/><a/></
    should be -
    orange and green" width="126" height="51"/></a></
    Does that solve the problem?
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "spongebobcirclepants" <[email protected]>
    wrote in message
    news:[email protected]...
    > <?xml version="1.0" encoding="utf-8"?>
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Strict//EN"
    > "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    > <html xmlns="
    http://www.w3.org/1999/xhtml"
    xml:lang="en" lang="en">
    > <head>
    > <title>GTF - Gardens, Tools &
    Furniture</title>
    > <meta http-equiv="Content-Type" content="text/html;
    charset=UTF-8" />
    > <meta name="keywords"
    >
    content="tools,gardens,furniture,spades,water,toys,toy,gardening,uk,giant
    >
    toys,giant,lawnmowers,tool,diy,outdoor,outdoors,pool,shovels,hoses,hose,fish,aqu
    > atics,benches,tables,chairs" />
    > <meta name="description" content="GTF Company Site"
    />
    > <meta name="author" content="Roy Spensley" />
    >
    > <link rel="stylesheet" type="text/css"
    href="style/textformat.css"/>
    > <link rel="stylesheet" type="text/css"
    href="style/layout.css"
    > title="default"
    > />
    >
    > </head>
    >
    > <div id="wrapper">
    >
    > <div id="topSpace"></div>
    > <div id="logo"><a href="index.html"><img
    src="media/images/gtfLogo.jpg"
    > title="GTF logo" alt="GTF logo design" longdesc="three
    circles showing the
    > letters G, T and F in orange and green" width="126"
    > height="51"/><a/></div>
    > <div id="logoRight"></div>
    > </div>
    > </body>
    > </html>
    >
    >
    > css
    >
    >
    >
    > /*BODY*/
    >
    > body{
    >
    > margin-top:0px;
    >
    > margin:0px;
    >
    > left:0px;
    >
    > padding:0px;
    >
    > font-family: arial, Helvetica, sans-serif;
    >
    > font-size: 100.1%;/*fixes bug in IE*/
    >
    > color:#333333;
    >
    > text-align: center;
    >
    > background-color: #666666;
    >
    > overflow: auto;
    >
    > }
    >
    > /*ALL IMAGES*/
    >
    > img{
    >
    > border-style: none;
    >
    > }
    >
    >
    > /*CONTAINING WRAPPER*/
    >
    > #wrapper{
    >
    > width: 800px;
    >
    > margin-top: 0px;
    >
    > height: 597px;
    >
    > background-color: #000;
    >
    > margin: 0 auto; /*This will now centre in firefox as
    well*/
    >
    > }
    >
    > #topSpace{
    >
    > width: 100%;
    >
    > height: 30px;
    >
    > padding:0px;
    >
    > background-color: #fff;
    > }
    >
    > #logo{
    >
    > top: 30px;
    >
    > width:126px;
    >
    > height: 51px;
    >
    > padding:0px;
    >
    > float: left;
    >
    > }
    >

  • Div moves down when window is resized

    Hello,
    Here's my problem:  When I resize my browser window the main div is resized up until a certain point when it just falls below all of the other content.
    How can I prevent this from happening?  I have both the top and bottom div's set to auto width, so I can't figure out whats going wrong.
    Here's the website if you want to see for yourself:  www.hondovfd.org
    Here's some code from my template file:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- TemplateBeginEditable name="Title" -->
    <title>Untitled Document</title>
    <!-- TemplateEndEditable -->
    <meta name="description" content="Hondo Fire and Rescue serves the Arroyo Hondo and Canada Village areas of Santa Fe County, NM." />
    <meta name="keywords" content="hondo, hondo fire, hondo vfd, hondo fire department, santa fe county fire department, santa fe county, volunteer fire department, hondo volunteer fire department" />
    <link href="../stylesheet1.css" type="text/css" rel="stylesheet" />
    <!--[if IE]>
    <style type="text/css">
    #mainContent, #sidebar1 { zoom: 1;}
    </style>
    <![endif]-->
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="thrColLiqHdr">
    <div id="container">
    <div id="header"></div>
      <div id="sidebar1">
      <h3>Navigation : </h3>
      <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="/index.php">Home</a></li>
    <li><a href="/support.php">Support Hondo</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Information Menu</a>
        <ul>
          <li><a href="/people.php">Our People</a></li>
          <li><a href="http://www.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=101620713606637979698.00045b6ead4ab4ea70b78&z=11" target="_blank">Response Area</a></li>
          <li><a href="/medical.php">Medical</a></li>
          <li><a href="/apparatus.php">Apparatus</a></li>
          <li><a href="/training.php">Training</a></li>
          <li><a href="/volunteer.php">Volunteer</a></li>
          <li><a href="/statistics.php">Statistics</a></li>
          <li><a href="/patchtrading.php">Patch Trading</a></li>
        </ul>
      </li>
      <li><a href="/gallery2/main.php">Photo Gallery</a></li>
      <li><a href="/calendar.php">Calendar</a></li>
      <li><a href="/news.php">Blog/News</a></li>
      <li><a href="/links.php">Links</a></li>
      <li><a href="/contact.php">Contact Us</a></li>
    </ul>
    <br />
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
      <span class="lefttext">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="8567201">
    <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" align="middle" />
    <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" align="absmiddle" >
    </img></input></input>
      </span>
    </form>
    <span class="lefttext"><br />
    </span>
    <center>
      <span class="lefttext"><a href="http://www.facebook.com/pages/Santa-Fe-NM/Hondo-Volunteer-Fire-Department/74284233488" target="_blank" class="lefttext">Hondo VFD on Facebook</a></span>
    </center>
      <!-- end #sidebar1 --></div>
      <div id="sidebar2"> 
        <p><a href="/membersonly/login.php">Log In</a> | <a href="/membersonly/logout.php">Log Out</a><br />
        <a href="/membersonly/register.php">Register</a></p>
        <p><img src="/firedanger/Moderate.jpg" width="127" height="100" /></p>
        <p>Call Statistics as of:<br />
        <?php
    $myFile = "/home/hondovf1/public_html/membersonly/month.txt";
    $fh = fopen($myFile, 'r');
    $theData = fread($fh, filesize($myFile));
    fclose($fh);
    echo $theData;
    ?><?php
    $myFile = "/home/hondovf1/public_html/membersonly/date.txt";
    $fh = fopen($myFile, 'r');
    $theData = fread($fh, filesize($myFile));
    fclose($fh);
    echo $theData;
    ?></p>
      <table width="90%" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td width="60%">EMS Calls</td>
        <td width="40%"><?php
    $myFile = "/home/hondovf1/public_html/membersonly/emscalls.txt";
    $fh = fopen($myFile, 'r');
    $theData = fread($fh, filesize($myFile));
    fclose($fh);
    echo $theData;
    ?></td>
      </tr>
      <tr>
        <td>Fire Calls</td>
        <td><?php
    $myFile = "/home/hondovf1/public_html/membersonly/firecalls.txt";
    $fh = fopen($myFile, 'r');
    $theData = fread($fh, filesize($myFile));
    fclose($fh);
    echo $theData;
    ?></td>
      </tr>
        <tr>
        <td>Other Calls</td>
        <td><?php
    $myFile = "/home/hondovf1/public_html/membersonly/othercalls.txt";
    $fh = fopen($myFile, 'r');
    $theData = fread($fh, filesize($myFile));
    fclose($fh);
    echo $theData;
    ?></td>
      </tr>
    </table>
      <hr />
           <!-- Begin Google Search Element -->
        <div id="cse" style="width: 100%;">Loading</div>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load('search', '1', {language : 'en'});
      google.setOnLoadCallback(function(){
        var googleNumSearchResults = 5;
         var customSearchControl = new google.search.CustomSearchControl('002969495656254731547:rhlwwedx2hi');
        customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
        customSearchControl.draw('cse');
      }, true);
    </script>
    <link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
           <!-- End Google Search Element -->
    </div>
      <!-- end #sidebar2 -->
      <div id="mainContent">
      <div class="topleft"></div><div class="top"><div class="topright"></div></div>
      <div class="wrap">
    <!-- TemplateBeginEditable name="Main Content" -->
        <table width="95%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="47" class="h2">Header</td>
          </tr>
          <tr>
            <td>Text Goes Here!</td>
          </tr>
        </table>
      <!-- TemplateEndEditable -->
      </div><br class="clearfloat" />
    <div class="bottomleft"></div><div class="bottom"><div class="bottomright"></div></div></div>
    </div>
    </div>
    </div>
         <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
      <div id="footer">
        <p align="center">&copy; Copyright 2009 Hondo Volunteer Fire Department | <a href="mailto:[email protected]">Contact Us</a><a href="http://www.legalhelpers.com/chapter-13-bankruptcy/chapter13.html"></a><br />Hosting provided by <a href="http://studiox.com/" target="_blank">Studio X</a></p>
      <!-- end #footer --></div>
    <!-- end #container --></div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    <?php include_once("/home/hondovf1/public_html/analyticstracking.php"); ?>
    </body>
    </html>
    And here is my CSS file:
    body {
         font-family: Verdana, Arial, Helvetica, sans-serif;
         font-size: 12px;
         width: auto;
         color: #333333;
         margin-top: 0;
         margin-right: 0;
         margin-bottom: 0;
         margin-left: 0;
         padding-top: 0;
         padding-right: 0;
         padding-bottom: 0;
         padding-left: 0;
         background-image: url(images/main-right.png);
         background-repeat: repeat-y;
    .thrColLiqHdr #container {
         width: 95%; /* this overrides the text-align: center on the body element. */
         margin-top: 0;
         margin-right: auto;
         margin-bottom: 0;
         margin-left: auto;
         height: auto;
         background-image: url(/images/halftone1.png);
    .thrColLiqHdr #header {
         padding: 0 10px;
         height: 100px;/* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
         background-image: url(images/header.jpg);
         background-repeat: no-repeat;
         background-position:center;
         border-bottom-width: 5px;
         border-bottom-style: solid;
         border-bottom-color: #000;
    .thrColLiqHdr #navbar {
         height:45px;
    .thrColLiqHdr #header h1 {
         margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
         padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    /* Tips for sidebars:
    1. Since we are working in percentages, it's best not to use side padding on the sidebars. It will be added to the width for standards compliant browsers creating an unknown actual width.
    2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".thrColLiqHdr #sidebar1 p" rule.
    3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
    .thrColLiqHdr #sidebar1 {
         float: left; /* this element must precede in the source order any element you would like it be positioned next to */
         width: 15%; /* top and bottom padding create visual space within this div  */
         height: 100%;
         padding-top: 15px;
         padding-right: 0;
         padding-bottom: 15px;
         padding-left: 0;
         min-width: 150px;
    .thrColLiqHdr #sidebar2 {
         float: right; /* this element must precede in the source order any element you would like it be positioned next to */
         width: 15%; /* top and bottom padding create visual space within this div */
         padding-top: 0px;
         padding-right: 0;
         padding-bottom: 15px;
         padding-left: 0;
         min-width: 150px;
    .thrColLiqHdr #sidebar3 {
         float: right; /* this element must precede in the source order any element you would like it be positioned next to */
         width: 275px; /* top and bottom padding create visual space within this div */
         padding-top: 0px;
         padding-right: 0;
         padding-bottom: 15px;
         padding-left: 0;
         min-width: 150px;
    .thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
         margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
         margin-right: 10px;
         text-align: center;
    /* Tips for mainContent:
    1. the space between the mainContent and sidebars is created with the left and right margins on the mainContent div.
    2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px or smaller (this includes images).
    3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
    .thrColLiqHdr #mainContent {
         margin-top: 10px;
         margin-bottom: 10px;
         float: left;
         width: 65%;
         background-image: url(images/main-right.png);
         background-repeat: repeat-y;
         background-position: right;
    .h2 {
         color: #B4241B;
         font-size: 20px;
         letter-spacing: -2px;
         font-weight: 100;
         font-family: Verdana, Arial, Helvetica, sans-serif;
         padding-top: 0px;
         padding-right: 0px;
         padding-bottom: 0px;
         padding-left: 0px;
         line-height: normal;
    .thrColLiqHdr #footer {
         text-align: center;
         color: #666;
         font-size: 11px;
         padding: 10px;
         background: #f7f7f7;
         border-top: 1px solid #aaa;
         width: auto;
    .thrColLiqHdr #footer p {
         margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
         padding: 2px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    /* Miscellaneous classes for reuse */
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
         float: right;
         margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */
         float: left;
         margin-right: 8px;
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
         clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    .topleft {
         height:22px;
         width:19px;
         background-image:url(images/top-left.png);
         float: left;
    .top {
         height:23px;
         background-image: url(images/top.png);
         background-repeat:repeat-x;
         width: auto;
    .topright {
         height:22px;
         width:28px;
         background-image:url(images/top-right.png);
         float: right;
    .textarea{
    .wrap{
         text-align: justify;
         padding-right: 40px;
         padding-left: 40px;
         background-repeat: repeat-y;
         float:left;
         background-image: url(images/main-left.png);
         width: auto;
         clear: left;
    .wrapright {
         width:4px;
         background-image:url(images/main-right.png);
         background-repeat: repeat-y;
         float: right;
    .bottomleft {
         height:22px;
         width:19px;
         background-image:url(images/bottom-left.png);
         float: left;
         clear: left;
    .bottom {
         height:23px;
         background-image: url(images/bottom.png);
         background-repeat:repeat-x;
         width: auto;
    .bottomright {
         height:22px;
         width:27px;
         background-image:url(images/bottom-right.png);
         float: right;

    That's one of the problems with liquid (%) based layouts. In your default.css file, replace the top 2o selector rules with the following:
    body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #333;
        margin:0;
        padding:0;
        background: url(images/main-right.png) repeat-y;
    .thrColLiqHdr #container {
        width: 95%;
       min-width: 870px; /**keep page from collapsing**/
        margin:0 auto;
        background: url(/images/halftone1.png);
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb
    http://alt-web.blogspot.com

  • Nested Divs - BG images not showing in IE 6

    I'm using nested divs for the layout of the site below. The
    div tags have a BG image in each.
    Everything works fine except in IE6. In that browser none of
    the BG images show up.
    Here's the site:
    http://www.jesseyoung.com/phenopath/test.html
    CSS is pasted in below
    Suggestions?
    -Jesse
    /* CSS Document */
    body {
    text-align:center;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 62.5%;
    margin-top: 31px;
    background-color: #333333;
    background-image: url(images/BG.gif);
    background-repeat: repeat-x;
    /* Sets all margins and padding to zero*/
    margin: 0;
    padding:0;
    /* Main Wrapper*/
    #wrapper {
    text-align:left;
    width:900px;
    position:relative;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    font-size: 1.2em;
    height: auto;
    .top {
    background-image: url(images/top.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    .right {
    background-image: url(images/right.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    .bottom {
    background-image: url(images/bottom.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    .left {
    background-image: url(images/left.jpg);
    background-repeat: no-repeat;
    .tlc {
    background-image: url(images/tlc.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    .trc {
    background-image: url(images/trc.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    .brc {
    background-image: url(images/brc.jpg);
    background-repeat: no-repeat;
    background-position: right bottom;
    .blc {
    background-image: url(images/blc.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
    .contentWrapper {
    padding-right: 18px;
    padding-left: 18px;
    padding-top: 31px;
    padding-bottom: 21px;
    #logoNavWrap {
    height: 71px;
    width: 864px;
    position: relative;
    #logoBox {
    width: 175px;
    height: 71px;
    float: left;
    /*End hide from IE-mac */
    #NavWrap {
    float: right;
    width: 650px;
    padding-top: 30px;
    #contentWrapperInner {
    background-color: #FFFFFF;
    /* Main Layout */
    JESSE FOOTER CREDITS
    a.jesse:link { color: #999999; font-size:8pt; font-family:
    Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration:
    none }
    a.jesse:visited { color: #999999; font-size: 8pt;
    font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
    text-decoration: none }
    a.jesse:hover { color: #999999; font-weight: bold; font-size:
    8pt; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
    text-decoration: none; letter-spacing: 1pt }
    a.jesse:active { color: #999999; font-size: 8pt; font-family:
    Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration:
    none }
    #jesseCredit {
    width: 760px;
    padding-top: 10px;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    PAGE FOOTER
    #footer a:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8pt;
    color: #FFFFFF;
    #footer a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8pt;
    color: #FFFFFF;
    #footer a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8pt;
    color: #FFFFFF;
    #footer a:active {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8pt;
    color: #FFFFFF;
    #footer{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8pt;
    color: #FFFFFF;
    #footerBox {
    width: 760px;
    padding-top: 10px;
    margin-right: auto;
    margin-left: auto;
    color: #FFFFFF;
    Navigation Banner
    #navigationBanner {
    background-color: #0033FF;
    height: 50px;
    width: 760px;
    Clears floats within container, so container continues to
    wrap around contents
    .clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    .clearfix {display:inline-table;}
    /*Hides from IE-mac\*/
    *html .clearfix {height:1%;}
    .clearfix {display:block;}
    #imageBannerWrap {
    height: 240px;
    width: 862px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #666666;
    border-right-color: #FFFFFF;
    border-bottom-color: #666666;
    border-left-color: #FFFFFF;
    padding-top: 1px;
    padding-bottom: 1px;
    margin-right: auto;
    margin-left: auto;
    #ColumnLeft {
    padding: 20px;
    #columnRight {
    padding: 20px;
    h1 {
    color: #335AA3;
    font-weight: normal;
    letter-spacing: .1em;
    font-size: 2em;

    JesseLY wrote:
    > I'm using nested divs for the layout of the site below.
    The div tags have a BG
    > image in each.
    > Everything works fine except in IE6. In that browser
    none of the BG images
    > show up.
    >
    > Here's the site:
    http://www.jesseyoung.com/phenopath/test.html
    >
    > CSS is pasted in below
    >
    > Suggestions?
    I see your background images in IE6 - perhaps too much in IE6
    even - I
    see the BG.gif showing through in the area around the
    navigation.
    This could be one of these IE quirky things or perhaps a
    matter of
    needing background-color: #fff; applied to the divs in and
    around that area.
    HTH
    chin chin
    Sinclair

  • Issue with images and AP div layers

    Im a bit of a noobie. but i have a problem with this website
    im working on. I have a table with an image in it serving as a
    background for some text i wish to put into it. I use an AP Div
    layer to put in the text on top of the image. Of course when i open
    the page in a full window, it displays properly, but when resizing
    the window, the text shifts as a cause of the div layer not
    moving... Is there a way to fix this or another way to do this
    properly?
    thanks in advance.

    This is a problem with absolute positioned tags it's a CSS
    thing not a Dreamweaver problem.
    You should be staying from layers and using hand CSS with
    divs ID and class. Check out the adobe site for tutorials on using
    Dreamweaver with CSS. You should find these in the designer
    section. They are quite good and they'll give you what you're
    looking for
    Also a good book on this is CSS the Missing Manaul it really
    explains what's happening and going on here

  • Issue with container divs, and absolute/fixed positioning

    Hello everyone, I have an issue getting my divs to function properly. I have a container div and I want the table div to float inside (and move with page resize). Right now it doesnt move with the page (see photo).
    However, when I change the position to relative of that div, it moves under the container div and locks itself there.(Second photo)
    Any help would be great! Thanks!
    Picture one:
    Picture two
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>davide marchetti architetto</title>
    <!-- TemplateEndEditable -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <link href="ttp://mottie.github.com/tablesorter/css/theme.blue.css" rel="stylesheet">
    <script type="text/javascript" src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
            $("#myTable").tablesorter();
    </script>
    <style type="text/css">
    body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    margin: 0;
    padding: 0;
    color: #000;
    background-image: url();
    background-repeat: no-repeat;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
    h1, h2, h3, h4, h5, h6, p {
    margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
    color:#414958;
    text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
    color: #4E5869;
    text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
    /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
    .container {
    width: 80%;
    max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
    min-width: 780px;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
    /* ~~ This is the layout information. ~~
    1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
    .content {
    padding: 10px 0;
    font-size: x-small;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
    padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    body,td,th {
              font-family: "Courier New", Courier, monospace;
              font-size: 12px;
    #apDiv1 {
    position: relative;
    width: 618px;
    height: 268px;
    z-index: 1;
    left: 186px;
    top: 147px;
    overflow: hidden;
    #apDiv2 {
              position: relative;
              width: 698px;
              height: 299px;
              z-index: 1;
              left: 266px;
              top: 117px;
              overflow: scroll;
    table.tableizer-table {
    border: 1px solid #CCC; font-family: Courier New, Courier, monospace;
    font-size: 12px;
    .tableizer-table td {
    padding: 4px;
    margin: 3px;
    border: 1px solid #ccc;
    .tableizer-table th {
    background-color: #000000;
    color: #FFF;
    font-weight: bold;
    #apDiv4 {
    position: relative;
    width: 697px;
    height: 299px;
    z-index: 1;
    left: -141px;
    top: -636px;
    overflow: scroll;
    #apDiv3 {
    position: relative;
    width: 700px;
    height: 300px;
    z-index: 2;
    h1,h2,h3,h4,h5,h6 {
    font-family: "Courier New", Courier, monospace;
    </style>
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    </head>
    <div class="container">
      <div class="container"><img src="../images/Davide.png" width="800" height="600" usemap="#Map" border="0" />
        <div id="apDiv2">
          <map name="Map" id="Map">
            <area shape="rect" coords="48,416,125,435" href="../news.html" />
            <area shape="rect" coords="262,416,304,436" href="../studio.html" />
            <area shape="rect" coords="490,416,545,435" href="../projects.html" />
            <area shape="rect" coords="702,415,751,436" href="../contact.html" />
          </map>
          <table id="myTable" class="tableizer-table">
            <thead>
              <tr class="tableizer-firstrow">
                <th>YEAR </th>
                <th>PROJECT</th>
                <th>LOCATION</th>
                <th>CATEGORY</th>
                <th>STATUS</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>2013</td>
                <td>EXPO 2015 - Italian Pavilion</td>
                <td>Milan - Italy</td>
                <td>Culture</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td>2012</td>
                <td>Requalification of "Almerici", "Bufalini" and "Fabbri" Squares</td>
                <td>Cesena - Italy</td>
                <td>Urban planning</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>Re-thinking Shanghai: sustainable intervention along the Suzhou Creek</td>
                <td>Shanghai - China</td>
                <td>Mixed use</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>VCC Flat</td>
                <td>Rome - Italy</td>
                <td>Interior design</td>
                <td>Commission / Built</td>
              </tr>
              <tr>
                <td>2011</td>
                <td>London 2012 Olympic Games Information Pavilion</td>
                <td>London - UK</td>
                <td>Culture</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>Enhancement project for the sacred area of the sanctuary of Hercules Victor</td>
                <td>Tivoli - Italy</td>
                <td>Culture</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td>2010</td>
                <td>VTL Flat </td>
                <td>Rome - Italy</td>
                <td>Interior design</td>
                <td>Commission / Built</td>
              </tr>
              <tr>
                <td> </td>
                <td>BNC Flat</td>
                <td>Rome - Italy</td>
                <td>Interior design</td>
                <td>Commission / Built</td>
              </tr>
              <tr>
                <td> </td>
                <td>Expansion of the "Farnesina" High School</td>
                <td>Rome - Italy</td>
                <td>Education</td>
                <td>Competition / Selected Project</td>
              </tr>
              <tr>
                <td> </td>
                <td>Neanderthal Art Center</td>
                <td>Pilo�a - Spain</td>
                <td>Culture</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>New pedestrian & cycling footpath in the site of the "San Leopoldo II" old bridge</td>
                <td>Poggio a Caiano - Italy</td>
                <td>Infrastructure</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>Proposition 2065 - St. Leonards site</td>
                <td>Sidney - Australia</td>
                <td>Mixed use</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>MEIS - National Museum of Italian Judaism and Shoah </td>
                <td>Ferrara - Italy</td>
                <td>Culture</td>
                <td>Competition / 3rd Prize</td>
              </tr>
              <tr>
                <td> </td>
                <td>36 The Calls Design Competition</td>
                <td>Leeds - UK</td>
                <td>Offices</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>Europan 10: masterplan for an harbour area</td>
                <td>Rudk�bing - Denmark</td>
                <td>Urban planning</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td>2009</td>
                <td>"Scuola in Piazza a Levante" - Kindergarten and public areas</td>
                <td>Bisceglie - Italy</td>
                <td>Education</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>CIBAF - City of Kids </td>
                <td>Frattamaggiore - Italy</td>
                <td>Education</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>Designing in Teheran</td>
                <td>Teheran - Iran</td>
                <td>Mixed use</td>
                <td>Competition / Selected Project</td>
              </tr>
              <tr>
                <td>2008</td>
                <td>DawnTown 2008: Waterworks</td>
                <td>Miami - USA</td>
                <td>Mixed use</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>Venice Biennale New Australian Pavillion</td>
                <td>Venice - Italy</td>
                <td>Culture</td>
                <td>Competition / 1st Prize</td>
              </tr>
              <tr>
                <td> </td>
                <td>New pedestrian and cycling bridge</td>
                <td>Civita di Bagnoregio - Italy</td>
                <td>Infrastructure</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>Renovation of "San Ciro" Square</td>
                <td>Portici - Italy</td>
                <td>Urban planning</td>
                <td>Competition / 2nd phase selected / 3rd Prize</td>
              </tr>
              <tr>
                <td> </td>
                <td>Renovation of "Umberto I�" Square</td>
                <td>San Ferdinando di Puglia - Italy</td>
                <td>Urban planning</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>Historic Renovation of the "Corsie Sistine" Hospital Wards </td>
                <td>Rome - Italy</td>
                <td>Culture</td>
                <td>Tender Competition (design/bid/build)</td>
              </tr>
              <tr>
                <td> </td>
                <td>Cupboard</td>
                <td>Rome - Italy</td>
                <td>Furniture design</td>
                <td>Commission / Built</td>
              </tr>
              <tr>
                <td> </td>
                <td>Office table and lighting system</td>
                <td>Rome - Italy</td>
                <td>Furniture design</td>
                <td>Commission / Built</td>
              </tr>
              <tr>
                <td> </td>
                <td>New City Library</td>
                <td>Legnano - Italy</td>
                <td>Library</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>Office table</td>
                <td>Rome - Italy</td>
                <td>Furniture design</td>
                <td>Concept Design</td>
              </tr>
              <tr>
                <td> </td>
                <td>Volleyball Arena, Hotel and Commercial Spaces</td>
                <td>Rome - Italy</td>
                <td>Mixed use</td>
                <td>Concept Design</td>
              </tr>
              <tr>
                <td>2007</td>
                <td>New Provincial Archaeological Museum in the Santa Scolastica Monastery</td>
                <td>Bari - Italy</td>
                <td>Culture</td>
                <td>Competition / 5th Prize</td>
              </tr>
              <tr>
                <td> </td>
                <td>The City of Water and Health</td>
                <td>Rome - Italy</td>
                <td>Mixed use</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>Parkway Iconic Bridge</td>
                <td>Sheffield - UK</td>
                <td>Infrastructure</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>Renovation of "Loveno 84" Sport Center</td>
                <td>Menaggio - Italy</td>
                <td>Sport</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>"Guardia di Finanza" Corp Main Headquarters</td>
                <td>Catanzaro - Italy</td>
                <td>Mixed use</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>"Lega Lombarda" Real Estate Complex Urban Development</td>
                <td>Rome - Italy</td>
                <td>Mixed use</td>
                <td>Tender Competition (design/bid/build) </td>
              </tr>
              <tr>
                <td> </td>
                <td>Necklace</td>
                <td>Rome - Italy</td>
                <td>Jewellery design</td>
                <td>Prototype </td>
              </tr>
              <tr>
                <td> </td>
                <td>Moon putter</td>
                <td>Rome - Italy</td>
                <td>Product design</td>
                <td>Prototype</td>
              </tr>
              <tr>
                <td> </td>
                <td>Aleale Coffee Table</td>
                <td>Rome - Italy</td>
                <td>Furniture design</td>
                <td>Concept Design</td>
              </tr>
              <tr>
                <td>2006</td>
                <td>"1st October" Public Square</td>
                <td>Santa Maria Capua Vetere - Italy</td>
                <td>Urban planning</td>
                <td>Competition / 1st Prize / Built</td>
              </tr>
              <tr>
                <td> </td>
                <td>"Attilio Pecile" New Square and Sustainable Mixed Use Building</td>
                <td>Rome - Italy</td>
                <td>Mixed use</td>
                <td>Competition / 1st Prize</td>
              </tr>
              <tr>
                <td> </td>
                <td>Renewal of the "Porta Nuova" Old Tower</td>
                <td>Venice - Italy</td>
                <td>Culture</td>
                <td>Competition / 2nd Prize</td>
              </tr>
              <tr>
                <td> </td>
                <td>"Meno e pi� 4": Civic Center and Pre-school Building</td>
                <td>Rome - Italy</td>
                <td>Mixed use</td>
                <td>Competition / Mention</td>
              </tr>
              <tr>
                <td> </td>
                <td>Urban Renewal of Historic Building and Public Squares</td>
                <td>Conversano - Italy</td>
                <td>Urban planning</td>
                <td>Competition / 2nd Prize</td>
              </tr>
              <tr>
                <td> </td>
                <td>New Seafront and Beach Accesses</td>
                <td>Fregene - Italy</td>
                <td>Urban planning</td>
                <td>Competition / Mention</td>
              </tr>
              <tr>
                <td> </td>
                <td>Requalification of Main Streets and Squares of the Old City Centre</td>
                <td>Bari - Italy</td>
                <td>Urban planning</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>Gyeonggi-do Jeongok Prehistory Museum</td>
                <td>Jeongok-ri - South Korea</td>
                <td>Culture</td>
                <td>Competition / Honourable Mention</td>
              </tr>
              <tr>
                <td> </td>
                <td>Low-income housing development</td>
                <td>Guadalajara/Ceuta - Spain</td>
                <td>Residential</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>Shop extension</td>
                <td>Rome - Italy</td>
                <td>Retail</td>
                <td>Commission / Concept Design</td>
              </tr>
              <tr>
                <td> </td>
                <td>Temporary Concert Hall</td>
                <td>Rome - Italy</td>
                <td>Culture</td>
                <td>Concept Design</td>
              </tr>
              <tr>
                <td> </td>
                <td>Office Space Interior Design - New Seat of the Lombardy Regional Government </td>
                <td>Milan - Italy</td>
                <td>Office</td>
                <td>Tender Competition (design/bid/build)</td>
              </tr>
              <tr>
                <td>2005</td>
                <td>Europan 8 - Urban Requalification</td>
                <td>Istanbul - Turkey</td>
                <td>Urban planning</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>Natural Park Visitor Center, Kindergarten and Primary School</td>
                <td>Funes - Italy</td>
                <td>Education</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>Coastal Area Development</td>
                <td>Latina - Italy</td>
                <td>Urban planning</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>Requalification of Three Squares</td>
                <td>Benevento - Italy</td>
                <td>Urban planning</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>Office and Data Center New Building in the Ministry of Defense headquarters</td>
                <td>Rome - Italy</td>
                <td>Office</td>
                <td>Concept Design</td>
              </tr>
              <tr>
                <td>2004</td>
                <td>JCD Floating Pearl Store</td>
                <td>Tokio - Japan</td>
                <td>Retail</td>
                <td>Competition / 2nd phase selected </td>
              </tr>
              <tr>
                <td> </td>
                <td>Requalifications of Rome�s Beachfront and Coastal Areas</td>
                <td>Ostia - Italy</td>
                <td>Urban planning</td>
                <td>Competition / 1st Prize</td>
              </tr>
              <tr>
                <td> </td>
                <td>40 Apartments Building and Sport Center</td>
                <td>Rome - Italy</td>
                <td>Mixed use</td>
                <td>Competition / 2nd Prize</td>
              </tr>
              <tr>
                <td> </td>
                <td>nMBA New Beaux-Art Museum</td>
                <td>Lausanne - Switzerland</td>
                <td>Culture</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>The Dubai Residence and Hotel Towers</td>
                <td>Dubai - UAE</td>
                <td>Mixed use</td>
                <td>Concept Design</td>
              </tr>
              <tr>
                <td> </td>
                <td>Shoes and Accessories Shop</td>
                <td>Rome - Italy</td>
                <td>Retail</td>
                <td>Commission / Concept Design</td>
              </tr>
              <tr>
                <td>2003</td>
                <td>Pedestrian and cycling Bridge </td>
                <td>Rome - Italy</td>
                <td>Infrastructure</td>
                <td>Competition</td>
              </tr>
              <tr>
                <td> </td>
                <td>Temporary Pavillion for a Car Show</td>
                <td>Rome - Italy</td>
                <td>Retail</td>
                <td>Commission / Concept Design</td>
              </tr>
              <tr>
                <td> </td>
                <td>Belvedere Tower</td>
                <td>Castellammare di Stabia - Italy</td>
                <td>Infrastructure</td>
                <td>Concept Design</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    <!-- end .container --></div>
    </body>
    </html>

    #apDiv2 {
        position: absolute;
        width: 698px;
        height: 299px;
        z-index: 1;
        left:50px;
        top: 117px;
        overflow: scroll;
    Don't forget to fix your code errors.  You're still missing a <body> tag in your markup. 
    Nancy O.

  • [Forum FAQ] How to remove div characters from multiline textbox field in SharePoint 2013

    Scenario:
    Need to avoid the div tags and get data alone from multiline textbox field using JavaScript Client Object Model in SharePoint 2013.
    Solution:
    We can use a regular expression to achieve it.
    The steps in detail as follows:
    1. Insert a Script Editor Web Part into the page.
    2. This is the complete code, add it into the Script Editor Web Part and save.
    <script type="text/javascript">
    ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
    function retrieveListItems() {
    // Create an instance of the current context to return context information
    var clientContext = new SP.ClientContext.get_current();
    //Returns the list with the specified title from the collection
    var oList = clientContext.get_web().get_lists().getByTitle('CustomListName');
    //use CAML to query the top 10 items
    var camlQuery = new SP.CamlQuery();
    //Sets value that specifies the XML schema that defines the list view
    camlQuery.set_viewXml('<View><RowLimit>10</RowLimit></View>');
    //Returns a collection of items from the list based on the specified query
    this.collListItem = oList.getItems(camlQuery);
    clientContext.load(this.collListItem, 'Include(Title,MultipleText)');
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
    function onQuerySucceeded() {
    //Returns an enumerator to iterate through the collection
    var listItemEnumerator = this.collListItem.getEnumerator();
    //Remove div tag use a regular expression
    var reg1 = new RegExp("<div class=\"ExternalClass[0-9A-F]+\">[^<]*", "");
    var reg2 = new RegExp("</div>$", "");
    //Advances the enumerator to the next element of the collection
    while (listItemEnumerator.moveNext()) {
    //Gets the current element in the collection
    var oListItem = listItemEnumerator.get_current();
    alert(oListItem.get_item('MultipleText').replace(reg1, "").replace(reg2, ""));
    function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    </script>
    Result:<o:p></o:p>
    References:
    http://www.w3schools.com/jsref/jsref_obj_regexp.asp
    Please click to vote if the post helps you. This can be beneficial to other community members reading the thread.

    Nice article :)
    If this helped you resolve your issue, please mark it Answered

  • AP Divs (layers) move when I open my website on different window size.

    First of all, this is my first time trying to make a website.
    I'm doing an assignment for my class and i found it difficult for me to fix. I have spend 4-5 hours researching online but nothing work for me.
    Well,the problem is the AP Divs (layers) move when I open my website on different window size(iphone,ipad).
    The website only look right on 1366 x 786 resolution. Please take a look at my 2 pics below:
    And I don't know how to make the website to fit on the iphone and ipad so that I don't have to scroll down or sroll to the right to view the whole thing.
    Please someone help me!
    The code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width" />
    <title>Boston Green Community College</title>
    <style type="text/css">
    <!--
    body {
        background-color: #3f7244;
        padding: 0;
        color: #8d0101;
        margin-top: 0;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 0;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 100%;
        line-height: 1.4;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
        padding: 0;
        margin: 0;
    h1, h2, h3, h4, h5, h6, p {
        margin-top: 0;     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
        padding-right: 15px;
        padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
        border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
        color: #003702;
        text-decoration: NONE; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
        color: #028b66;
        text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
        text-decoration: none;
    /* ~~ this fixed width container surrounds the other divs ~~ */
    .container {
        width: 960px;
        background-color: #FFF;
        margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
        background-color: #ADB96E;
    /* ~~ This is the layout information. ~~
    1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
    .content {
        padding: 0px 0;
    /* ~~ The footer ~~ */
    .footer {
        padding: 10px 0;
        background-color: #CCC49F;
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
        float: right;
        margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
        float: left;
        margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    #apDiv1 {
        position: absolute;
        width: 251px;
        height: 101px;
        z-index: 1;
        left: 871px;
        top: 10px;
    #apDiv2 {
        position: absolute;
        width: 228px;
        height: 60px;
        z-index: 2;
        left: 9px;
        top: 1397px;
    #apDiv3 {
        position: absolute;
        width: 273px;
        height: 198px;
        z-index: 2;
        left: 851px;
        top: 383px;
    #apDiv4 {
        position: absolute;
        width: 200px;
        height: 115px;
        z-index: 3;
        left: 242px;
        top: 120px;
    #apDiv5 {
        position: absolute;
        width: 200px;
        height: 115px;
        z-index: 4;
        left: 902px;
        top: 178px;
    #apDiv6 {
        position: absolute;
        width: 200px;
        height: 115px;
        z-index: 4;
        left: 857px;
        top: 171px;
    #apDiv7 {
        position: absolute;
        width: 200px;
        height: 115px;
        z-index: 4;
        left: 455px;
        top: 547px;
    #apDiv8 {
        position: absolute;
        width: 200px;
        height: 115px;
        z-index: 4;
        left: 853px;
        top: 113px;
    #apDiv9 {
        position: absolute;
        width: 200px;
        height: 115px;
        z-index: 5;
        left: 853px;
        top: 246px;
    #apDiv10 {
        position: absolute;
        width: 200px;
        height: 115px;
        z-index: 6;
        left: 513px;
        top: 121px;
    #apDiv11 {
        position: absolute;
        width: 200px;
        height: 115px;
        z-index: 6;
        left: 511px;
        top: 123px;
    -->
    </style></head>
    <body>
    <div class="container">
      <div class="header"><a href="#"><img src="Pictures/34d-1.png" alt="Insert Logo Here" name="Insert_logo" width="619" height="90" id="Insert_logo" style="background-color: #C6D580; display:block;" />
        <div id="apDiv11"><font color="#f4f1f1">
    <script type="text/javascript">
    var d=new Date()
    var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
    var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
    document.write(weekday[d.getDay()] + " ")
    document.write(d.getDate() + ". ")
    document.write(monthname[d.getMonth()] + " ")
    document.write(d.getFullYear())
    </script></font>
    </div>
        <div id="apDiv1">
      <!-- Use of this code assumes agreement with the Google Custom Search Terms of Service. -->
      <!-- The terms of service are available at http://www.google.com/cse/docs/tos.html -->
      <form name="cse" id="searchbox_demo" action="http://www.google.com/cse">
      <input type="hidden" name="cref" value="" />
      <input type="hidden" name="ie" value="utf-8" />
      <input type="hidden" name="hl" value="" />
      <input name="q" type="text" size="40" />
      <input type="submit" name="sa" value="Search" />
    </form>
    <script type="text/javascript" src="http://www.google.com/cse/tools/onthefly?form=searchbox_demo&lang="></script>
                                  </div>
                                    </div>
      <div class="content">
        <center><img src="Pictures/DFDF11.png" width="959" height="556" longdesc="Pictures/junior-2-960x.jpg" /></h1></center>
      <!-- end .content --></div>
      <div class="footer">
         <img src="Pictures/RRR1.png" width="202" height="70" />
         <div id="apDiv3">
           <p> </p>
           <p><a href="Job.html">Jobs</a>         </p>
           <p><a href="Art Gallery.html">Art Gallery</a>         </p>
           <p><a href="Contact us.html">Contact Us </a></p>
        </div>
        <div id="apDiv4"><center>
    <P>About</P>
    <a href="visiting.html">visiting</a> | <a href="Map.html">maps </a>| <P><a href="About.html">about BGCC</a></P>
    <P>Academic</P>
    <P><a href="Courses.html">schools+courses</a></P>
    <P>Admissions  </P>
    <P><a href="cost & aid basics.html">cost & aid basics </a>| <a href="Apply now.html">join BGCC</a>
    <P>Studen Life</P>
    <P><a href="Athletics.html">Athletics</a></P>
    <P>Greenforce Education</P>
    <P><a href="Career.html">career center</a></P>
    </center> </div>
         <p><font size="2" color="black">BGCC | 99 GreenField | Boston, MA 02199 |617-0101-1000| TTY 617-0202-9944|</font></p>
        <div id="apDiv9"><a href="Donate.html" target="_blank"><a href="Donate.html"><img src="Pictures/three-green-logo.jpg" width="218" height="99" longdesc="Pictures/three-green-logo.jpg" /></div>
        <div id="apDiv8"><a href="Apply now.html" target="_blank"><a href="Apply now.html">
    <img border="0" src="Pictures/cxgvxdvxgd.jpg" alt="Apply Now" width="218" height="99"></a></div>
      <!-- end .footer --></div>
      <!-- end .container --></div>
    </body>
    </html>

    That's what APDivs do.  This is the single most common problem new people have with web page layouts.  DO NOT use positioning.  You don't need it.  Start over.  Learn to use CSS floats, margins and padding to align elements. 
    Below is a basic HTML5 Layout.  View source in browser to see the code.
    http://www.alt-web.com/sandbox/HTML5-BasicLayout.html
    Nancy O.

  • Problem with Div and table

    I have a table that contains data parsed for a weather station page.  It also has a webcam picture on the page.  Up until now, the webcam pic has loaded via an applet but I want to change that to a jquery slideshow so it's accessible to more mobile devices.   My problem is that no matter what I do (aside from putting a 5x240 spacer) I can't get the table data to display below the webcam div (id="featured").  I've put the webcam and data table in their own div, the webcam's div in the table, used clear:both on the divs, tried setting block size, but it's like nothing is working.   So I'm back to go and thought I'd post it here since there are so many folks here who know more about this than me.  This is the html, right now with no CSS classes or anything added.  So whatever you would suggest as far as div and/or table layout and any CSS would be appreciated.
    <table width="100%" cellpadding="3">
    <tr align="center"><td >
          <div id="featured"> <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img0" /></a>
                  <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-9.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img10" /></a>
                  <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-8.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img9" /></a>
                  <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-7.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img8" /></a>
                  <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-6.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img7" /></a>
                  <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-5.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img6" /></a>
                  <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-4.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img5" /></a>
                  <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-3.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img4" /></a>
                  <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-2.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img3" /></a>
                  <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-1.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img2" /></a>
                  <a href="http://www.spyglasshill.com/Webcam/" target="_new"><img src="http://spyglasshill.com/Webcam/netcam-0.jpg" alt="Webcam of Holland Channel from Spyglass Condos" width="320" height="253" border="0" id="Img1" /></a>  <!--end div featured--></div>
    </td></tr>
    <tr>
      <td><img src="images/spacer5x260.gif" width="5" height="260"></td></tr>
    <tr>
                          <td colspan="4"><p align="center"><a href="images/06/Waterspout/Waterspouts.htm"><br />
                              </a></p>
                            <div align="center">
                              <p><a href="images/Waterspout/Waterspouts.php">Waterspout on Lake Mich </a>||| <a href="images/ANIFreighter.gif">Freighter Leaving Harbor</a><br />
                              </p>
                            </div></td>
                          </tr>
                        <tr>
                          <td colspan="4" bgcolor="#EAEFF9"><div align="center">
                            <h2>Weather Conditions Last Updated  wvcurudwv at wvcurutwv </h2>
                          </div></td>
                        </tr>
                        <tr>
                          <td><div align="right">                        Temperature                      </div></td>
                          <td><div align="left">                        wvcur01wv                      </div></td>
                          <td><div align="right">                        Wind Speed                      </div></td>
                          <td><div align="left">                        wvcur18wv                      </div></td>
                        </tr>
                        <tr>
                          <td><div align="right">                        Average High                      </div></td>
                          <td><div align="left">                        wvahtempwv                      </div></td>
                          <td><div align="right">                        Wind Direction                      </div></td>
                          <td><div align="left">                        wvcur17wv                      </div></td>
                        </tr>
                        <tr>
                          <td><div align="right">                        Record High                      </div></td>
                          <td><div align="left">                        wvrhtempwv in
                          wvrhtyrwv                      </div></td>
                          <td><div align="right">                        Peak Wind Gust                      </div></td>
                          <td><div align="left">                        wvhigh18wv at
                          wvhight18wv                      </div></td>
                        </tr>
                        <tr>
                          <td><div align="right">                        High
                          Since Midnight                      </div></td>
                          <td><div align="left">                        wvhigh01wv
                          at wvhight01wv                      </div></td>
                          <td><div align="right">                        Wind Chill Factor                      </div></td>
                          <td><div align="left">                        wvcur02wv                      </div></td>
                        </tr>
                        <tr>
                          <td><div align="right">                        Low                      </div></td>
                          <td><div align="left">                        wvlow01wv
                          at wvlowt01wv                      </div></td>
                          <td><div align="right">                        Yesterday Max Wind                      </div></td>
                          <td><div align="left">                        wvyhigh18wv at wvyhight18wv                      </div></td>
                        </tr>
                        <tr>
                          <td><div align="right">                        Rainfall Since
                          Midnight                      </div></td>
                          <td><div align="left">                        wvcur16wv                      </div></td>
                          <td><div align="right">                        Relative Humidity                      </div></td>
                          <td><div align="left">                        wvcur13wv                      </div></td>
                        </tr>
                        <tr>
                          <td><div align="right">                        Rainfall Yesterday                      </div></td>
                          <td><div align="left">                        wvyhigh16wv                      </div></td>
                          <td><div align="right">                        Barometric Pressure                      </div></td>
                          <td><div align="left">                        wvcur15wv                      </div></td>
                        </tr>
                        <tr>
                          <td><div align="right">                        Sunrise                      </div></td>
                          <td><div align="left">                        wvsrisewv                      </div></td>
                          <td><div align="right">                        Heat Index                      </div></td>
                          <td><div align="left">                        wvcur04wv                      </div></td>
                        </tr>
                        <tr>
                          <td><div align="right">                        Sunset                      </div></td>
                          <td><div align="left">                        wvssetwv                      </div></td>
                          <td><div align="right">                        Dew Point                      </div></td>
                          <td><div align="left">                        wvcur03wv                      </div></td>
                        </tr>
                        <tr>
                          <td> </td>
                          <td> </td>
                          <td> </td>
                          <td> </td>
                        </tr>
                        <tr>
                          <td> </td>
                          <td>Moon
                          distance from earth</td>
                          <td><span>wvmdistwv</span></td>
                          <td> </td>
                        </tr>
                        <tr>
                          <td><h2> </h2></td>
                          <td><h2> </h2></td>
                          <td><h2> </h2></td>
                          <td><h2> </h2></td>
                        </tr>
                        <tr>
                          <td><h2><a href="http://www.coastwatch.msu.edu/twomichigans.html" target="_blank">Lake
                            Michigan<br />
       Water Temp</a></h2></td>
                          <td><h2><a href="http://www.woodtv.com/Global/category.asp?C=2906&nav=0Rcf">TV
                          8</a> &amp; <a href="http://www.wzzm13.com/weather/forecast/weather.asp">TV13</a> Weather </h2></td>
                          <td><h2><a href="http://www.deq.state.mi.us/beach/Default.aspx?County=70" target="_blank">Ottawa County Beach Conditions</a></h2></td>
                          <td><h2><a href="http://www.crh.noaa.gov/product.php?site=grr&product=nsh&issuedby=grr" target="_blank">Nearshore
                          Marine Forcast</a></h2></td>
                        </tr>
                      </table>

    Of course as soon as I posted that, I found the error of my ways. I had forgotten to set containerheight:   on my .js script for 'div#featured'
    Arrrghh, why couldn't I have realized that a hour ago!!!

  • Problem with Flash in a Hide/Show Div Tag

    What is the best way to handle Flash files on an HTML page
    within a <div> tag you hide and show (via javascript). It
    seems to reload when you hide and then show the <div> tag
    when using display: block.
    Positioning instead (move offscreen)?
    Visibility?
    Other?

    I would say off-screen is going to give you the best
    cross-platform performance. I've found visibility show/hide
    prevents the swf from working in IE while hidden much like you
    alluded to. Of course in mozilla browsers hide doesn't behave the
    same way.

Maybe you are looking for