Skip navigation
svavrek
Currently Being Moderated

APDiv Position - Probably Simple... Have Question.

Jun 24, 2013 5:19 AM

Tags: #web #site #div #dreamweaver #ap #apdiv

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.

 
Replies
  • Currently Being Moderated
    Jun 24, 2013 5:59 AM   in reply to svavrek

    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;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 24, 2013 6:13 AM   in reply to svavrek

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 24, 2013 7:01 AM   in reply to svavrek

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 24, 2013 11:30 AM   in reply to svavrek

    Others have answered your spacing issue.

    Your missing image can be found here:

     

    http://www.aquaticasuperstore.com/svtest/images/gallery/thumbs/lion-th umb.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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points