13 Replies Latest reply on Oct 11, 2010 11:47 AM by MurraySummers

    Approval/advice please?

    4info

      Hello! Thanks to Nancy and Ken's guidance and generous advice, I have finally come up with a half decent home page... http://www.dgstanleygraphics.com/hallmarkauto_html/indexb.html

       

      I would really appreciate some constructive criticism and guidance! I have spent around 4 days and nights trying to figure this out since I am just taking baby steps trying to learn code. As you can see, I haven't learned much but I am struggling to learn more! I can't figure out why my page isn't centering in the browser window... I would really appreciate some help there for sure! THANKS SO MUCH!!!

        • 1. Re: Approval/advice please?
          cdeatherage Level 3

          It appears that you have not set up a container or wrapper DIV between your BODY and all other page content that is coded to be centered within the body. Do a search through the forum, and you'll find many posts on the subject.

           

          Chris

          1 person found this helpful
          • 2. Re: Approval/advice please?
            danthevan2009

            I'm certainly no expert, but i would say there are way too may ap div tags there. Have you been used to working with tables and cells in the past? (like me!)

            Have you tried using one of dreamweavers standard layouts to start with?

            Also it took forever to load, so maybe look at the size of your image files too?

            1 person found this helpful
            • 3. Re: Approval/advice please?
              Ken Binney-GnPIX3 Level 4

              AP (absolutely positioned) DIVs are positioned a specified distance from the top left corner of the screen  (or their container)

              without regard to the visitor's screen size or viewport

               

              Your entire page needs to be in a centered wrapper container

              • 4. Re: Approval/advice please?
                4info Level 1

                Well I have searched and read a lot... It sounds like this might be what I need, but I am not sure where to put it. I've played around with it, but haven't found the golden spot! Can you give me some guidance, please, please.

                • 5. Re: Approval/advice please?
                  4info Level 1

                  Sorry, I think my mind is on overload... I forgot to post the code:

                  $("button").click(function(){
                     $("p").wrapAll("<div></div>");
                  });

                  • 6. Re: Approval/advice please?
                    Nancy OShea Adobe Community Professional & MVP

                    You've got some work ahead of you.  When text size is increased in browser, the page is unreadable.  See screenshot.

                     

                    Hallmark.jpg

                    Don't use APDivs as your primary layout method.  Here's why:

                    http://apptools.com/examples/pagelayout101.php

                     

                    Do use default CSS  positioning (which is no positioning at all) along with margins, padding and floats to align elements on your page.  Or use a table if that's easier for you.

                     

                    Learn CSS positioning in 10 Steps -
                    http://www.barelyfitz.com/screencast/html-training/css/positioning/

                     

                     

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

                    • 7. Re: Approval/advice please?
                      4info Level 1

                      Well, you burst my bubble... I thought I was making progress. The tutorial was very informative and simplified, but I need to layer type on top of graphics which is why I thought the apdiv's with the graphics as backgrounds would work well. Is there ever going to be a working solution to this. I have read that tables are not good to use because of positioning and I played around with one and couldn't figure out how to get the graphic under type in the cells and how would I anchor the table, graphics and type together. I am spinning!!! Thanks for your help!

                      • 8. Re: Approval/advice please?
                        Nancy OShea Adobe Community Professional & MVP

                        Sorry.  But it's better you learn the right way of doing things now rather than 10 minutes before your site goes live.

                         

                        Here's a quick mock up using a basic CSS layout and table.  View source in browser to see the code.

                        http://alt-web.com/TEST/Hallmark-test.html

                         

                        You would need to modify your interstate background-image to get rid of the green boxes and other adornments.  Keep your designs simple.  You'll have fewer problems that way.

                         

                         

                        Good luck,

                         

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

                        • 9. Re: Approval/advice please?
                          4info Level 1

                          Thanks so much for all of your info and guidance! I have one more quetion, if you don't mind. I am using .png's so the image around the pic will be transparent and for smaller file size with clarity. I was recently advised that png's won't work with IE. Do you have any advice what would work best to convert them to for transparency, clarity and small file size? Thanks!

                          • 10. Re: Approval/advice please?
                            martcol Level 4

                            http://homepage.ntlworld.com/bobosola/pngtest.htm

                             

                            Try that for starters.

                             

                            .png images are supported in modern browsers.  You can fix it using Javascript and you can google that to find some code to drop in to your page. Any site you find with a solution will give instructions.

                             

                            You might also be able to get away with saving an image to a different format.  .gif and .jpeg will do it but it depends on what the image is that you are using and what the quality is like for you when you save it.  I think a very simple idea is .png for transparency (esp alpha transparency), .gif for solid colors and .jpg for photos.  There's heaps of advice out there so try Googling some of that too.

                             

                            Martin

                            • 11. Re: Approval/advice please?
                              4info Level 1

                              I have been reading and learning A LOT!!! I have made progress, but seem to be stalled. Would you mind looking at what I have to see what I am doing wrong with the table? Thank you SO MUCH!!!

                               

                              html code:

                               

                              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

                              <http://www.w3.org/TR/html4/strict.dtd">

                              <html>

                              <head>

                              <title>Hallmark Automotive Group</title>

                              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

                              <meta name="keywords" content="Nashville Hyundai | New Cars | Used Cars | Best Price | Sonata | Tucson | Santa Fe | Genesis | Tennessee | Certified Used Cars " />

                              <meta name="description" content="Nashville, Cool Springs, Franklin, Hendersonville, Madison, TN, Hyundai, Used Cars, New Cars, Best Price, Certified,  Best Gas Mileage, Hyundai, Mitsubishi, Volkswagen, Passat, Eos, Jetta, Accent, Sonata, Santa Fe, Tucson, Elantra, Tiburon, Accent, Eclipse, Outlander, Galant, Lancer, Endeavor, Spyder, Good Credit, Bad Credit, Tennesee, 37115, 37075, 37065, Gallatin, Madison " />

                              <meta name="author" content="Hallmark Automotive Group" />

                              <meta name="robots" content="index, follow" />

                              <meta name="expires" content="never" />

                              <meta name="distribution" content="global" />

                                  <meta http-equiv="X-UA-Compatible" content="chrome=1"/>

                              <link href="oneColFixCtrx.css" rel="stylesheet" type="text/css" />

                              </head>

                               

                              <body>

                              <div id="container">

                              <h1><strong>Hallmark Automotive Group</strong></h1>

                              <p><img src="images/HALLMARK-NLogo.png" alt="hallmark logo" width="648" height="393" class="logo" longdesc="images/HALLMARK-NLogo.png" /></p>

                               

                              <div id="interstate_wrapper">

                              <table id="interstate" cellspacing="10" cellpadding="5">

                              <div id="interstate table">

                              <table>

                              <div id="interstate th">

                              <th>

                              </th><th><h2><a href="http://www.Hallmarkvwcoolsprings.com"><img src="images/Das-Auto-logos.png" alt="das logo" width="97" height="97" border="0" longdesc="images/Das-Auto-logos.png" /></a></h2>

                              </th><th><h2><a href="http://www.Hallmarkhendersonville.com"><img src="images/nhyund.png" alt="hyundai" width="144" height="97" border="0" longdesc="images/nhyund.png" /></a></h2>

                              </th><th><a href="http://www.hallmarkmitsubishi.com/index.htm?accountId=hallmarkauto"><img src="images/Mitsu.png" alt="mitsubishi" width="78" height="101" border="0" longdesc="images/mitsu.png" /></a>

                              </th><th><a href="http://www.Hallmarkvw.com"><img src="images/Das-Auto-logos.png" alt="das" width="97" height="97" border="0" longdesc="images/Das-Auto-logos.png" /></a>

                              </th>

                              <tr>

                              <td>HALLMARK</td>

                              <td>HALLMARK</td>

                              <td>HALLMARK</td>

                              <td>NASHVILLE'S</td>

                              </tr>

                              <tr>

                              <td>VOLKSWAGEN</td>

                              <td>HYUNDAI</td>

                              <td>MITSUBISHI</td>

                              <td>HALLMARK</td>

                              </tr>

                              <tr>

                              <td>COOL SPRINGS</td>

                              <td>1198 West Main St.</td>

                              <td>2431 Gallatin Road</td>

                              <td>VOLKSWAGEN</td>

                              </tr>

                              <tr>

                              <td>620 Bakers Bridge</td>

                              <td>Hendersonville, TN</td>

                              <td>North Madison, TN</td>

                              <td>2431 Gallatin Road</td>

                              </tr>

                              <tr>

                              <td>Avenue</td>

                              <td>37075</td>

                              <td>37115</td>

                              <td>North Madison, TN</td>

                              </tr>

                              <tr>

                              <td>Franklin, TN 37067</td>

                              <td>888-290-5174</td>

                              <td>800-759-3222</td>

                              <td>37115</td>

                              </tr>

                              <tr>

                              <td>887-800-8015</td>

                              <td>Cell 30</td>

                              <td>Cell 31</td>

                              <td>800-759-3222</td>

                              <tr>

                              <td colspan="2">some image here</td>

                              <td colspan="2">some image here</td>

                              </tr> 

                              </div>

                              </div>

                              </table>

                              </div>

                              </div>

                              </div>  

                              </body>

                              </html>

                               

                               

                              css:

                               

                              @charset "UTF-8";

                              body {

                              padding: 0;

                              color: #000;

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

                              font-size: 1em;

                              line-height: 1.4;

                              background-color: #004CA9;

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

                              background-repeat: no-repeat;

                              text-align: center;

                              display: block;

                              margin-top: 0;

                              margin-right: auto;

                              margin-bottom: 0;

                              margin-left: auto;

                              background-position: center top;

                              }

                              .logo {

                              display: block;

                              width: 648px;

                              margin-right: auto;

                              margin-left: auto;

                              }

                              header {

                              color: #FFF;

                              }

                               

                              #container {

                               

                              width: 960px;

                               

                              height: 884px;

                               

                              margin:0 auto; /**centered**/

                               

                              border:none;

                               

                              background:url(images/bkgls.png) no-repeat;

                               

                              }

                               

                               

                               

                              /**COMPANY NAME**/

                               

                              h1 {

                              font-size: 48px;

                              margin:0;

                               

                              padding:0

                               

                              color: #FFF; color: #FFF;

                               

                              }

                               

                               

                               

                              #interstate_wrapper {

                               

                              width: 864px;

                               

                              height: 460px;

                               

                              margin:0 auto; /**centered**/

                               

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

                               

                              background-repeat: no-repeat;

                               

                              }

                               

                               

                               

                              #interstate table {

                               

                              border:none;

                               

                              width: 100%;

                               

                              margin:0 auto; /**centered**/

                               

                              text-align:center;

                               

                              }

                               

                               

                               

                              #interstate th {

                               

                              width: 180px;

                               

                              margin:0 auto; /**centered**/

                               

                              background:green;

                               

                              border: 3px solid silver;

                               

                              color: #FFF;

                               

                              /**rounded borders**/

                               

                              border-radius: 10px;

                               

                              -moz-border-radius: 10px;

                               

                              -webkit-border-radius: 10px;

                               

                              -khtml-border-radius: 10px;

                               

                              text-align:center;

                               

                              }

                               

                               

                               

                              #interstate td {

                               

                              color: #FFF;

                               

                              text-align:center;}

                               

                              margin:0 auto; /**centered**/

                               

                              text-align:center;

                               

                              }

                               

                               

                               

                              /**END INTERSTATE TABLE**/

                               

                               

                               

                              #footer {

                              text-align:center;

                              font-size: 18px; }

                              • 12. Re: Approval/advice please?
                                Nancy OShea Adobe Community Professional & MVP

                                For quicker answers, post a link to your page please.

                                 

                                 

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

                                • 13. Re: Approval/advice please?
                                  MurraySummers Level 8

                                  AP (absolutely positioned) DIVs are positioned a specified distance from the top left corner of the screen  (or their container)

                                  without regard to the visitor's screen size or viewport

                                   

                                  Your entire page needs to be in a centered wrapper container

                                   

                                  AP elements (not just divs) are positioned the specified distance from the top, right, bottom or left of the browser viewport (or their POSITIONED container)....

                                   

                                  Your entire page needs to be in a centered, positioned wrapper container (positioning can be relative | absolute | fixed).

                                   

                                  A positioned element will simply ignore any container that is not positioned in that way.