14 Replies Latest reply on Sep 29, 2010 12:35 PM by 4info

    Graphics floating in browser?

    4info

      Hello! I finally have my index page designed after several agonizing days and nights... but I can't get the 2 images at the bottom not to float off in the browser. They are where they should be in design window. I've put them in tables and adjusted spacing rules, etc... is there a way to lock them in place? i would really appreciate any guidance! This is my first site in DreamWeaver. Here is 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" />

       

      <title>Hallmark Automotive Group</title>

       

      <style type="text/css">

       

      <!--

       

      body {

      margin: 0;

      padding: 0;

      font-family: Verdana, Arial, Helvetica, sans-serif;

      font-size: 100%;

      line-height: 1.4;

      text-align: center;

      background-image: url(images/bkgl.png);

      background-repeat: no-repeat;

      background-position: center top;

      }

       

      .container .content p {

       

      }

       

      .h1 {

       

      font-size: 48px;

       

      font-family: "Copperplate Gothic Bold";

       

      text-align: center;

       

      vertical-align: middle;

       

      white-space: normal;

       

      }

       

      .container .content .content {

       

      }

       

       

       

       

       

      ul, ol, dl {

       

      padding: 0;

       

      margin: 0;

       

      }

       

      h1, h2, h3, h4, h5, h6, p {

       

      margin-top: 0;

       

      padding-right: 15px;

       

      padding-left: 30px;

       

      color: #1D70B8;

       

      }

       

      a img {

       

      border: none;

       

      }

       

       

       

      a:link {

       

      color: #42413C;

       

      text-decoration: underline;

       

      }

       

      a:visited {

       

      color: #6E6C64;

       

      text-decoration: underline;

       

      }

       

      a:hover, a:active, a:focus {

       

      text-decoration: none;

       

      }

       

       

       

       

       

      .container {

       

      width: 960px;

       

      margin: 0 auto;

       

      }

       

       

       

       

       

      .header {

       

      }

       

       

       

       

       

       

       

      .content {

       

       

       

      padding: 10px 0;

       

      }

       

       

       

       

       

      .footer {

      text-align: center;

      padding-top: 10px;

      padding-right: 30px;

      padding-bottom: 10px;

      padding-left: 0px;

      }

       

       

       

       

       

      .fltrt {

       

      float: right;

       

      margin-left: 8px;

       

      }

       

      .fltlft {

       

      float: left;

       

      margin-right: 8px;

       

      }

       

      .clearfloat {

       

      clear:both;

       

      height:0;

       

      font-size: 1px;

       

      line-height: 0px;

       

      }

       

      body,td,th {

       

      font-family: "Copperplate Gothic Bold";

       

      }

       

      .container .content {

       

      height: 2.5in;

       

      }

       

      #apDiv1 {

       

       

      float:left;

      text-align:center;

       

      width:230px;

       

      height:337px;

       

      z-index:1;

       

      }

       

      .content1 {

       

      padding: 10px 0;

       

      }

       

      p {

       

      color: #000;

       

      }

       

      h2 {

       

      font-size: 20px;

       

      }

       

      #h2 img {

       

      text-align: center;

       

      vertical-align: middle;

       

      }

       

      #apDiv2 {

       

       

      float:left;

       

      width:230px;

       

      height:340px;

       

      z-index:2;

       

      }

       

      #apDiv3 {

       

       

      float:left;

      width:230px;

       

      height:342px;

       

      z-index:3;

       

      }

       

      #apDiv4 {

       

       

       

      float:left;

       

      width:230px;

       

      height:375px;

       

      z-index:7;

       

      text-align: center;

       

      vertical-align: middle;

       

      }

       

      #apDiv5 {

       

       

       

      float:left;

       

      width:227px;

       

      height:63px;

       

      z-index:5;

       

      }

       

      #apDiv6 {

       

       

       

      float:left;

       

      width:227px;

       

      height:63px;

       

      z-index:6;

       

      }

       

      #apDiv7 {

       

       

       

      float:left;

       

      width:216px;

       

      height:56px;

       

      z-index:8;

       

      }

       

      #apDiv8 {

       

       

      float:left;

       

      width:216px;

       

      height:56px;

       

      z-index:9;

       

      }

      #footer    {

          width:120%;

          margin:0px auto;

          clear:both;

          text-align:center;

       

          }

      .container .header .h1 {

      color: #FFF;

      }

      .container #apDiv1 h2 {

      color: #FFF;

      }

      .container #apDiv2 h2 {

      color: #FFF;

      }

      .container #apDiv3 h2 {

      color: #FFF;

      }

      .container #apDiv4 h2 {

      color: #FFF;

      }

      .container #apDiv1 p {

      color: #FFF;

      }

      .container #apDiv2 p {

      color: #FFF;

      }

      .container #apDiv3 p {

      color: #FFF;

      }

      .container #apDiv4 p {

      color: #FFF;

      }

      .container #apDiv7 {

      color: #FFF;

      }

      .footer {

      color: #FFF;

      text-align: center;

      }

      #apDiv9 {

      position:absolute;

      left:725px;

      top:919px;

      width:232px;

      height:58px;

      z-index:1;

      }

      #apDiv10 {

      position:absolute;

      left:454px;

      top:926px;

      width:445px;

      height:31px;

      z-index:2;

      }

      #apDiv9 {

      float: right;

      }

      #preowned {

      line-height: normal;

      text-align: right;

      width: auto;

      background-repeat: no-repeat;

      float: right;

      vertical-align: middle;

      clear: right;

      margin-right: 5px;

      }

      #apDiv11 {

      position:absolute;

      left:210px;

      top:904px;

      width:496px;

      height:41px;

      z-index:1;

      }

      #footer table tr td div img {

      text-align: left;

      vertical-align: text-bottom;

      height: auto;

      width: auto;

      }

       

      -->

       

      </style></head>

       

       

       

      <body>

      <div class="container">

       

        <div class="header"><!-- end .header -->

       

          <h1 class="h1">HALLMARK AUTOMOTIVE GROUP</h1>

       

          <h1 class="h1"><img src="images/logo.png" width="720" height="428" alt="logo" longdesc="images/logo.png" /></h1>

       

        </div>

       

       

       

       

      <div id="apDiv1">

       

        <h2>hallmark volkswagen cool springs</h2>

       

        <h2><img src="images/das.png" width="200" height="119" alt="das nashville" longdesc="images/das.png" /></h2>

       

        <p>620 Bakers Bridge Avenue<br />

       

          Franklin, TN 37067<br />

       

          887-800-8015</p>

       

      </div>

       

      <div id="apDiv2">

       

        <h2>Hallmark Hyundai</h2>

       

        <h2><img src="images/nwhynd.png" width="200" height="118" alt="new hyundai" longdesc="images/nwhynd.png" /></h2>

       

        <p>1198 West Main St.<br />

       

          Hendersonville, TN 37075<br />

       

          888-290-5174</p>

       

      </div>

       

      <div id="apDiv3">

       

        <h2>Hallmark Mitsubishi</h2>

       

        <h2><img src="images/mitsu.png" width="200" height="119" alt="mitsubishi" longdesc="images/mitsu.png" /></h2>

       

        <p>2431 Gallatin Road<br />

       

          North Madison, TN 37115<br />

       

          800-759-3222</p>

       

      </div>

       

      <div id="apDiv4">

       

        <h2>Nashville's Hallmark Volkswagen</h2>

       

        <h2><img src="images/das.png" width="200" height="119" alt="das nashville" longdesc="images/das.png" /></h2>

       

        <p>2431 Gallatin Road<br />

       

          North Madison, TN 37115<br />

       

          800-759-3222</p>

       

      </div>

      </div>

       

      <!-- end .container -->

      <span class="footer">

      </div>

      </span>

      <div class="footer" id="footer">

        <table width="107%" border="0">

          <tr>

            <td><div align="center"><img src="images/pre.png" width="180" height="54" alt="preowned" longdesc="images/pre.png" /></div></td>

            <td> </td>

            <td><div align="center"><img src="images/new.png" width="180" height="54" alt="new" longdesc="images/new.png" /></div></td>

          </tr>

        </table>

        <p> </p>

        <p> </p>

      </div>

      </body>

       

      </html>

       

      Thanks so much for any ideas! I really need to finish this up this morning.

        • 1. Re: Graphics floating in browser?
          Ken Binney-GnPIX3 Level 4

          This is not your problem, but should be removed as it does nothing and will throw an error.

           

          <span class="footer">

          </div>

          </span>

           

          I have no idea what a table width of 107% is doing... try changing to a px width

          • 2. Re: Graphics floating in browser?
            4info Level 1

            Thanks, Ken! I just corrected it about fifteen minutes ago by trial and error. Obviously, this is my first site in DreamWeaver! Would you mind looking at my new code and giving me some pointers? I know one thing I need to do is change the size of the page, it is very large in my browser and I assume yours too, but I have no idea how to change it.

             

            <!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>Hallmark Automotive Group</title>

             

            <style type="text/css">

             

            <!--

             

            body {

            margin: 0;

            font-family: Verdana, Arial, Helvetica, sans-serif;

            font-size: 100%;

            line-height: 1.4;

            text-align: center;

            background-image: url(images/bkgl.png);

            background-repeat: no-repeat;

            background-position: center top;

            vertical-align: middle;

            padding-top: 0;

            padding-right: 30;

            padding-bottom: 0;

            padding-left: 0;

            background-color: #004CA9;

            }

             

            .container .content p {

             

            }

             

            .h1 {

             

            font-size: 48px;

             

            font-family: "Copperplate Gothic Bold";

             

            text-align: center;

             

            vertical-align: middle;

             

            white-space: normal;

             

            }

             

            .container .content .content {

             

            }

             

             

             

             

             

            ul, ol, dl {

             

            padding: 0;

             

            margin: 0;

             

            }

             

            h1, h2, h3, h4, h5, h6, p {

             

            margin-top: 0;

             

            padding-right: 15px;

             

            padding-left: 30px;

             

            color: #1D70B8;

             

            }

             

            a img {

             

            border: none;

             

            }

             

             

             

            a:link {

             

            color: #42413C;

             

            text-decoration: underline;

             

            }

             

            a:visited {

             

            color: #6E6C64;

             

            text-decoration: underline;

             

            }

             

            a:hover, a:active, a:focus {

             

            text-decoration: none;

             

            }

             

             

             

             

             

            .container {

             

            width: 960px;

             

            margin: 0 auto;

             

            }

             

             

             

             

             

            .header {

             

            }

             

             

             

             

             

             

             

            .content {

             

             

             

            padding: 10px 0;

             

            }

             

             

             

             

             

            .footer {

            text-align: center;

            padding-top: 10px;

            padding-right: 0px;

            padding-bottom: 10px;

            padding-left: 0px;

            color: #FFF;

            vertical-align: middle;

            }

             

             

             

             

             

            .fltrt {

             

            float: right;

             

            margin-left: 8px;

             

            }

             

            .fltlft {

             

            float: left;

             

            margin-right: 8px;

             

            }

             

            .clearfloat {

             

            clear:both;

             

            height:0;

             

            font-size: 1px;

             

            line-height: 0px;

             

            }

             

            body,td,th {

             

            font-family: "Copperplate Gothic Bold";

             

            }

             

            .container .content {

             

            height: 2.5in;

             

            }

             

            #apDiv1 {

             

             

            float:left;

            text-align:center;

             

            width:230px;

             

            height:337px;

             

            z-index:1;

             

            }

             

            .content1 {

             

            padding: 10px 0;

             

            }

             

            p {

             

            color: #000;

             

            }

             

            h2 {

             

            font-size: 20px;

             

            }

             

            #h2 img {

             

            text-align: center;

             

            vertical-align: middle;

             

            }

             

            #apDiv2 {

             

             

            float:left;

             

            width:230px;

             

            height:340px;

             

            z-index:2;

             

            }

             

            #apDiv3 {

             

             

            float:left;

            width:230px;

             

            height:342px;

             

            z-index:3;

             

            }

             

            #apDiv4 {

             

             

             

            float:left;

             

            width:230px;

             

            height:375px;

             

            z-index:7;

             

            text-align: center;

             

            vertical-align: middle;

             

            }

             

            #apDiv5 {

             

             

             

            float:left;

             

            width:227px;

             

            height:63px;

             

            z-index:5;

             

            }

             

            #apDiv6 {

             

             

             

            float:left;

             

            width:227px;

             

            height:63px;

             

            z-index:6;

             

            }

             

            #apDiv7 {

             

             

             

            float:left;

             

            width:216px;

             

            height:56px;

             

            z-index:8;

             

            }

             

            #apDiv8 {

             

             

            float:left;

             

            width:216px;

             

            height:56px;

             

            z-index:9;

             

            }

            #footer    {

            width:95%;

            clear:both;

            text-align:center;

            vertical-align: middle;

            margin-top: 0px;

            margin-right: 100px;

            margin-bottom: 0px;

            margin-left: 100px;

                }

            .container .header .h1 {

            color: #FFF;

            text-align: center;

            vertical-align: middle;

            }

            .container #apDiv1 h2 {

            color: #FFF;

            }

            .container #apDiv2 h2 {

            color: #FFF;

            }

            .container #apDiv3 h2 {

            color: #FFF;

            }

            .container #apDiv4 h2 {

            color: #FFF;

            }

            .container #apDiv1 p {

            color: #FFF;

            }

            .container #apDiv2 p {

            color: #FFF;

            }

            .container #apDiv3 p {

            color: #FFF;

            }

            .container #apDiv4 p {

            color: #FFF;

            }

            .container #apDiv7 {

            color: #FFF;

            }

            .footer {

            color: #FFF;

            text-align: center;

            }

            #apDiv9 {

            position:absolute;

            left:725px;

            top:919px;

            width:232px;

            height:58px;

            z-index:1;

            }

            #apDiv10 {

            position:absolute;

            left:454px;

            top:926px;

            width:445px;

            height:31px;

            z-index:2;

            }

            #apDiv9 {

            float: right;

            }

            #preowned {

            line-height: normal;

            text-align: right;

            width: auto;

            background-repeat: no-repeat;

            float: right;

            vertical-align: middle;

            clear: right;

            margin-right: 5px;

            }

            #apDiv11 {

            position:absolute;

            left:210px;

            top:904px;

            width:496px;

            height:41px;

            z-index:1;

            }

            #footer table tr td div img {

            text-align: left;

            vertical-align: text-bottom;

            height: auto;

            width: 100px;

            }

            .gallatin {

            color: #FFF;

            }

             

            -->

             

            </style></head>

             

             

             

            <body>

            <div class="container">

             

              <div class="header"><!-- end .header -->

             

                <h1 class="h1">HALLMARK AUTOMOTIVE GROUP</h1>

             

                <h1 class="h1"><img src="images/logo.png" width="720" height="428" alt="logo" longdesc="images/logo.png" /></h1>

             

              </div>

             

             

             

             

            <div id="apDiv1">

             

              <h2>hallmark volkswagen cool springs</h2>

             

              <h2><img src="images/das.png" width="200" height="119" alt="das nashville" longdesc="images/das.png" /></h2>

             

              <p>620 Bakers Bridge Avenue<br />

             

                Franklin, TN 37067<br />

             

                887-800-8015</p>

             

            </div>

             

            <div id="apDiv2">

             

              <h2>Hallmark Hyundai</h2>

             

              <h2><img src="images/newhynds.png" width="200" height="119" alt="new hyundai" longdesc="images/nwhynd.png" /></h2>

             

              <p>1198 West Main St.<br />

             

                Hendersonville, TN 37075<br />

             

                888-290-5174</p>

             

            </div>

             

            <div id="apDiv3">

             

              <h2>Hallmark Mitsubishi</h2>

             

              <h2><img src="images/mitsu.png" width="200" height="119" alt="mitsubishi" longdesc="images/mitsu.png" /></h2>

             

              <p>2431 Gallatin Road<br />

             

                North Madison, TN 37115<br />

             

                800-759-3222</p>

             

            </div>

             

            <div id="apDiv4">

             

              <h2>Nashville's Hallmark Volkswagen</h2>

             

              <h2><img src="images/das.png" width="200" height="119" alt="das nashville" longdesc="images/das.png" /></h2>

             

              <p>2431 Gallatin Road<br />

             

                North Madison, TN 37115<br />

             

                800-759-3222</p>

             

            </div>

            </div>

             

            <!-- end .container --></div>

            <div id="footer">

              <p><img src="images/pre.png" width="180" height="54" alt="preowned" longdesc="images/pre.png" /><img src="images/new.png" width="180" height="54" alt="new" longdesc="images/new.png" /></p>

            </div>

            </body>

             

            </html>

             

            Thanks SOO MUCH!!!

            • 3. Re: Graphics floating in browser?
              Ken Binney-GnPIX3 Level 4

              You'll get better response if you name a copy of your page (something like test.htm) and upload to your server and provide a link.

              All your images should be in your images folder.

              1 person found this helpful
              • 4. Re: Graphics floating in browser?
                4info Level 1

                Thanks Ken! I obviously still need to do a lot of tweaking. http://www.dgstanleygraphics.com/hallmark/indexco.html

                • 5. Re: Graphics floating in browser?
                  Nancy OShea Adobe Community Professional & MVP

                  Use a table for this.

                   

                   

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

                  1 person found this helpful
                  • 6. Re: Graphics floating in browser?
                    4info Level 1

                    Thanks Nancy! I was trying to stay away from tables because I read they were more or less taboo now?

                    • 7. Re: Graphics floating in browser?
                      Nancy OShea Adobe Community Professional & MVP

                      Thanks Nancy! I was trying to stay away from tables because I read they were more or less taboo now?

                      Not true.  When a table is required there is no substitute for it in CSS. 

                       

                      Use CSS for the bulk of your layout.  Use tables for tabular data or when you need to align elements in rows & columns.

                       

                       

                       

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

                      • 8. Re: Graphics floating in browser?
                        4info Level 1

                        Thanks so much Nancy, that sounds great! If you don't mind, would you look at the site at http://www.dgstanleygraphics.com/hallmarkautomotivegroup_html/index.html

                         

                        As you can see, I need to make the table on top of the interstate sign graphic and center it over the 4 green signs with four columns 1 column for each sign. Can i just click the sign graphic and go to the Insert Table and insert it then go to the css styles and insert a new rule for it and center it that way?

                        Thanks again for your valuable guidance, this is my first attempt with DreamWeaver, you're great!!!

                        • 9. Re: Graphics floating in browser?
                          Nancy OShea Adobe Community Professional & MVP
                          As you can see, I need to make the table on top of the interstate sign graphic and center it over the 4 green signs with four columns 1 column for each sign.

                           

                          That might work in Print Design but it won't fly on the web.  You can't precisely align elements over a background like this and expect it to stick.  As soon as someone increases/decreases text size in browser, the whole layout will shift and content will spill out of the little green boxes.

                           

                          You might get away with using the polls as a #wrapper background-image and placing your table inside the #wrapper like this:

                           

                           

                          <!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=iso-8859-1" />
                          <title>Untitled Document</title>
                          <style type="text/css">

                          #wrapper {
                          width: 1000px;
                          margin:0 auto; /**centered**/

                          background: url (polls.jpg) no-repeat top center;
                          }

                          #interstate table {
                          border:none;
                          width: 900px;
                          text-align:center;
                          }

                          #interstate th {
                          width: 200px;
                          background:green;
                          border: 4px solid silver;
                          color: #FFF;
                          /**rounded borders**/
                          border-radius: 10px;
                          -moz-border-radius: 10px;
                          -webkit-border-radius: 10px;
                          -khtml-border-radius: 10px;
                          }

                          #interstate td {min-height: 45px;}
                          </style>
                          </head>

                          <body>
                          <div id="wrapper">

                          <table id="interstate" width="900px" cellspacing="10" cellpadding="5">
                          <tr>
                          <th scope="col">Lorem ipsum dolor sit amet</th>
                          <th scope="col">Lorem ipsum dolor sit amet</th>
                          <th scope="col">Lorem ipsum dolor sit amet</th>
                          <th scope="col">Lorem ipsum dolor sit amet</th>
                          </tr>
                          <tr>
                          <td><address>Lorem ipsum dolor sit amet</address></td>
                          <td><address>Lorem ipsum dolor sit amet</address></td>
                          <td><address>Lorem ipsum dolor sit amet</address></td>
                          <td><address>Lorem ipsum dolor sit amet</address></td>
                          </tr>
                          </table>
                          </div>
                          </body>
                          </html>

                           

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

                          • 10. Re: Graphics floating in browser?
                            4info Level 1

                            WOW, thank you so much, you are amazing! I have no doubt this will work, but unfortunately I don't have the foggiest idea how to go about inserting it! I have so much to learn about CSS... it is overwhelming.

                            • 11. Re: Graphics floating in browser?
                              Nancy OShea Adobe Community Professional & MVP

                              Copy and paste my code into a new, blank HTML document and play with it.

                               

                               

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

                              • 12. Re: Graphics floating in browser?
                                4info Level 1

                                Hi! Would you mind walking me through inserting this in my code... like telling a 5 year old

                                Thanks! I'm trying to learn code, but not making much progress.

                                • 13. Re: Graphics floating in browser?
                                  4info Level 1

                                  Sorry, I didn't see your earlier post! I tried opening it in a blank page, but am not making any progress. I can't figure out how  to get the table down where I need it on top of the sign. The table looks great, by the way! Thanks!

                                  • 14. Re: Graphics floating in browser?
                                    Nancy OShea Adobe Community Professional & MVP

                                    Do NOT insert my code directly into your page.  I did this as a quick and dirty example of what YOU can do on your own.

                                     

                                    File > New HTML page.  Switch to code view, delete everything.

                                     

                                    Copy and paste all my code into the NEW HTML page.  File, Save As  Interstate-test.html. 

                                     

                                    If you get stuck, look at the CSS and HTML exercises at W3Schools.com

                                    Validate your code often during development to reduce errors.

                                     

                                    Code Validation Tools
                                    ------------------------------------
                                    CSS - http://jigsaw.w3.org/css-validator/
                                    HTML - http://validator.w3.org/

                                     

                                    The more you learn about CSS and HTML, the easier DW is to work with.  ;-)

                                     

                                     

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