5 Replies Latest reply: Jun 24, 2013 11:44 AM by svavrek RSS

    APDiv Position - Probably Simple... Have Question.

    svavrek

      I have set up my first web page using DW and PS... looks okay, but here's the question I have.

       

      I have one APDiv that has the content (content container) and then under that one, I have another for the footer I have... links, copyright info, etc.  Since the content container contains more info on some pages than others, what I have to do is position the footer div lower than the content container with the most content... so on some pages it looks okay, on other pages ithere is a huge gap between the content container and the footer... Keep in mind, I am not a professional web developer guy and this is my first go round, using only what google and youtube have had to teach me...  this should be, in theory, simple enough but I cannot figure it out.  Good page to look at is the "Services" page -- click on Aquarium Maintenance to see what I mean.

      Page: http://www.aquaticasuperstore.com/svtest -- its online, and want to use it to replace the original site which was tossed up in like an hour.

      Thanks in advance!

       

      PS - ALSO while you are there, check the gallery - the last one is not working... its a Clearbox3 gallery, and the code is copied and pasted from the other pictures just like the 20 before it, but for some reason I am not getting it to work... insight too, please

       

      Message was edited by: svavrek - forgot a few things.

        • 1. Re: APDiv Position - Probably Simple... Have Question.
          osgood_ MVP

          You can't build a site like that. Make a copy of the page (just incase you need to revert to it) and then change your css selectors to as below:

           

          #logo {

              margin: 0 auto;

              margin-top: 8px;

              width: 984px;

              height: 163px;

          }

          #div_Content {

              width: 80%;

              margin: 0 auto;

          }

          #div_mobilemenu {

              width: 80%;

              margin: 0 auto;

              height: 33px;

          }

           

          #div_mobilelogo {

          margin: 0 auto;

          width: 428px;

          height: 133px;

          }

          #div_Footer {

          margin: 0 auto;

          width: 80%;

          height: 35px;

          }

          • 2. Re: APDiv Position - Probably Simple... Have Question.
            Ben Pleysier MVP

            Don't use Absolute Positioning (AP) in a normal layout.

             

            The following is the reconstructed styling

            <style type="text/css">

            html,td,th {

                font-family: "Trajan Pro";

                font-size: 14px;

                color: rgba(214,214,214,1);

            }

            html {

                background-color: rgba(0,0,0,1);

                background-image: url(http://www.aquaticasuperstore.com/svtest/images/background.jpg);

                background-repeat: repeat-x;

            }

            body {

                width: 983px;

                margin: auto;

            }

            a {

                font-size: 14px;

                color: rgba(255,204,51,1);

            }

            a:visited {

                color: rgba(255,102,0,1);

            }

            a:hover {

                color: rgba(255,255,102,1);

            }

            a:active {

                color: rgba(255,102,0,1);

            }

            h1 {

                font-size: 24px;

                color: rgba(0,153,255,1);

            }

            h2 {

                font-size: 18px;

            }

            h3 {

                font-size: 16px;

                color: rgba(255,255,0,1);

            }

            .AAG-Text {

                color: rgba(0,255,0,1);

            }

            #logo {

                height: 163px;

            }

            #div_mobilemenu {

                width: 80%;

                height: 33px;

            }

            .mobile-menu {

                font-family: "Trajan Pro";

                font-size: 18px;

            }

            #div_mobilelogo {

                width: 428px;

                height: 133px;

            }

            #div_Footer {

                width: 80%;

                height: 35px;

            }

            #div_Footer h4 {

                text-align: center;

            }

            </style>

            Not sure what is in the external stylsheets, it may be an idea to un-link those.

            • 3. Re: APDiv Position - Probably Simple... Have Question.
              mhollis55 Community Member

              Osgood and Ben are both pointing to something that is critical for you to understand.

               

              One does not build a website with AP divs!

               

              Here is one quick way to get yourself a website and get up and running. We're talking a simple website here.

               

              In Dreamweaver, set up a defined site somewhere on your local computer.

               

              Site>New Site…

              Give it a name, create a local root folder for the site and set that up.

               

              Then go to File>New…

              Choose Blank Page, HTML and pick a layout. You can browse through layouts and what they look like in the preview window. I recommend you do not use an "elastic" layout.

               

              Once you have picked one, you will have an HTML document as well as a style sheet (CSS document) that will be heavily commented. Those comments will describe what is going on in the code.

               

              Now, that you have a page and a style sheet, you can start learning HTML and CSS.

              • 4. Re: APDiv Position - Probably Simple... Have Question.
                Ken Binney MVP

                Others have answered your spacing issue.

                Your missing image can be found here:

                 

                http://www.aquaticasuperstore.com/svtest/images/gallery/thumbs/lion-thumb.jpg

                 

                but not here:

                 

                http://www.aquaticasuperstore.com/images/gallery/thumbs/lion-thumb.jpg

                 

                Note the svtest in the path and either move the image match the link path to the actual location of the image.

                • 5. Re: APDiv Position - Probably Simple... Have Question.
                  svavrek Community Member

                  Thank You Ken... I knew it was going to be something simple like that.

                   

                  As far as others that replied, thank you for the information... Like I said, this is my first attempt at really doing this, coming from 15 years of automotive service background attempting a career change for a friend of mine who decided to give me a job... so I'm learning as I go   I appreciate the help and advice.  The good news is there is not a lot of time invested in this site so far, so changing it is not a problem