Skip navigation
dbr 200
Currently Being Moderated

AP Div placement

Nov 14, 2012 8:39 PM

Tags: #layout

I added two AP Divs to my home page and they are in a completely different place when I look at them online. Also they don't center with the rest of the layout objects. I think I've asked this before but I can't access an old question. Is this something new in the forum? It's been a year. Maybe someone can look at the page and the code...? I didn't want to use AP Divs, I wanted to put the content in existing divs, but I couldn't without screwing everything up. Thanks in advance!

http://dbruff.net/index.htm

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Nov 14, 2012 10:36 PM   in reply to dbr 200

    How do you want it to look like? Can you post a design mockup that you have so we'll understand better how you want it positioned?

     

    And APdivs are not required unless you want your content to be 'absolutely' positioned to the values you provide which I feel is redundant in modern website standards.

     

    Anyway, post a picture of your layout so we can help.

     

    -ST

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 15, 2012 4:51 AM   in reply to dbr 200

    What you are describing is typical for a centering page containing only absolutely positioned elements. The page content moves but the absolutely positioned elements are, well, absolutely positioned.  This is just one of the sadly many reasons why absolute positioning is a very poor layout choice.  As Sudarshan implies, the truth is that absolute positioning is never needed to create a stable layout for your web pages.

     

    Notwithstanding that, you can easily solve your problem in three steps:

     

    1.  Add "position:relative;" to the rule for div.container

    2.  Move ApDiv2 and ApDiv3 inside div.container

    3.  Reposition ApDiv2 and ApDiv3 so that they are where you want them on the screen

     

    (you can see another problem with AP text-containing elements by just enlarging the text size in your browser.  Two clicks up and you have an overlapping mess on the screen.)

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 15, 2012 7:29 AM   in reply to dbr 200

    Sorry about the confusion.  Here's the code you should be using -

     

    <!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>Donna Ruff home</title>

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

    <style type="text/css">

    .container {

              position:relative;

              width:960px;

    }

    #apDiv1 {

              position:relative;

              width:550px;

              height:550px;

              z-index:2;

              float: right;

              margin: 0px;

    }

    a:link {

              color: #666;

              text-decoration: none;

    }

    a:visited {

              color: #666;

              text-decoration: none;

    }

    a:hover {

              color: #FC0;

              text-decoration: none;

    }

    a:active {

              text-decoration: none;

              float: none;

    }

    #apDiv2 {

              position:absolute;

              width:auto;

              height:55px;

              z-index:3;

              float: left;

              margin: 0px;

              padding: 0px;

              top: -275px;

              font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

              letter-spacing: 0.4em;

              text-align: center;

              left: 100px;

    }

    body,td,th {

              font-family: Tahoma, Geneva, sans-serif;

              color: #666;

              font-size: 12px;

    }

    #apDiv3 {

              position:absolute;

              width:198px;

              height:22px;

              z-index:4;

              left: 500px;

              top: auto;

              float: left;

              margin: 0px;

    }

    </style>

    <script type="text/javascript">

     

     

      var _gaq = _gaq || [];

      _gaq.push(['_setAccount', 'UA-25529392-1']);

      _gaq.push(['_trackPageview']);

     

     

      (function() {

        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

      })();

     

     

    </script></head><meta name="description" content="Donna Ruff is an artist working with books, text, cut paper and burn drawings." />

     

     

    <body>

    <!-- Start of StatCounter Code -->

    <script type="text/javascript">

    var sc_project=3901733;

    var sc_invisible=1;

    var sc_security="d74dc508";

    </script>

    <script type="text/javascript"

    src="http://www.statcounter.com/counter/counter_xhtml.js"></script>

    <noscript><div class="statcounter"><a title="weebly

    statistics" href="http://statcounter.com/weebly/"

    class="statcounter"><img class="statcounter"

    src="http://c.statcounter.com/3901733/0/d74dc508/1/"

    alt="weebly statistics" /></a></div></noscript>

    <!-- End of StatCounter Code -->

    <meta name="description" content="Paper and book art by Donna Ruff. Installations, book objects, works on paper, exhibition news, biography, newspaper drawings, New York Times" />

    <div class="container">

      <div class="content">

        <div id="spacer"></div>

        <div id="apDiv1"><script type="text/javascript">

                                                      <!--

                                                      var imlocation = "random2/";

                                                      var currentdate = 0;

                                                      var image_number = 0;

                                                      function ImageArray (n) {

                                                                this.length = n;

                                                                for (var i =1; i <= n; i++) {

                                                                          this[i] = ' '

                                                                }

                                                      }

                                                      image = new ImageArray(3)

                                                      image[0] = 'frieze.det.jpg'

                                                      image[1] = '3.21.11.jpg'

                                                      image[2] = 'knish1.jpg'

                                                      var rand = 60/image.length

                                                      function randomimage() {

                                                                currentdate = new Date()

                                                                image_number = currentdate.getSeconds()

                                                                image_number = Math.floor(image_number/rand)

                                                                return(image[image_number])

                                                      }

                                                      document.write("<img src='" + imlocation + randomimage()+ "'>");

                                                      //-->

                                            </script></div>

        <div id="logo"> DONNA RUFF

        

            <div class="link">

              <table width="200" border="0" cellspacing="3" cellpadding="0">

                <tr>

                  <th scope="row"><a href="squareone.html" target="_self">works on paper</a></th>

                </tr>

                <tr>

                  <th scope="row"><a href="installation.html">installation</a></th>

                </tr>

                <tr>

                  <th scope="row"><a href="book.html">book objects</a></th>

                </tr>

                <tr>

                  <th scope="row"><a href="biography.html">bio</a></th>

                </tr>

                <tr>

                  <th scope="row"><a href="news.html">news</a></th>

                </tr>

                <tr>

                  <th scope="row"><a href="http://loosidia.blogspot.com" target="_top">blog</a></th>

                </tr>

                <tr>

                  <th scope="row"><a href="contact.html">contact</a></th>

                </tr>

              </table>

          </div>

        </div>

      </div>

    </div>

    <div class="link" id="apDiv2"><a href="http://www.huffingtonpost.com/2012/11/13/donna-ruffs-cut-newspaper_n_2 118138.html?utm_hp_ref=arts#slide=1748146">News:  <br />

    Huffington Post Feature</a></div>

    <div id="apDiv3">All images ©Donna Ruff 2000-2012</div>

    </div>

    <p> </p>

    </body>

    </html>

     

    And by the way, remove the scrollbar stuff from the .container rule in your stylesheet.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 16, 2012 4:59 AM   in reply to dbr 200

    Let's see what you have now.  I think the problem is that your very simple layout has been achieved with lots of unnecessary CSS. It's some of that extra stuff that is coming back to bite you now as you try to change things a bit.  Also, I looked at your bio page - why do you say you need the scrollbar coloring there?

     

    Your layout doesn't need any positioning, either relative or absolute.  All it needs is simple floats, margins and paddings to nudge everything into place. I'll see if I can throw an example together for you.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 16, 2012 6:08 AM   in reply to MurraySummers

    OK - does this page look right?

     

    http://murraytestsite.com/ruff.html (no absolute positioning)

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 16, 2012 6:46 AM   in reply to dbr 200

    If the page looks right then let me recast it without all of the legacy stuff in there.  I'll post back when I do that.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 16, 2012 9:55 AM   in reply to dbr 200

    The file that is at that link now has been simplified with all of the unnecessary CSS removed.  As it sits now, all of the CSS for that page is embedded, i.e., it's not using an external stylesheet.  But I wanted to show how simple the layout would be without your more complex (and redundant) CSS being loaded. You may need to a) externalize this CSS, and b) add some of the rules for your other pages.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 19, 2012 4:54 AM   in reply to dbr 200

    Good luck!

     
    |
    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