1 Reply Latest reply on Jul 26, 2007 6:25 AM by Newsgroup_User

    Help with AP Div, quick question plz...

      I am setting up a layout using CSS. You can see it thus far here I had someone else looking at it (from IE, I want to say 7, but they dont actually know) and they said they saw a white border around that logo at the 'z' and the 'a' Doing this and dropping the logo and what not in AP Divs Do some browsers make a border automatically around the pic inside of it. Do I need to set the padding or margins to 0? Im new to doing layouts in CSS, however I love it thus far. That border goes right around the edge of the AP Div, note i made the AP Div the EXACT size of the logo...in case that matters. Thanks in advance to anyone taking time to help me here

      PS Notice anything else I should be aware of on the page?
        • 1. Re: Help with AP Div, quick question plz...
          Level 7
          The page looks pretty distressed to me in IE6 -

          http://www.murraytestsite.com/zpizza.png

          What you need to understand is that using absolutely positioned elements to
          build a page is nothing like using CSS to build the page. So much so, that
          your approach is actually on the "worst practices" list! 8(

          From the top - you have an error in your CSS -

          body {
          background-image:url(images/bg_grad.png);
          background-repeat:repeat-x
          background-color: #FFFFFF;
          text-align:center;
          margin-left: 0px;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 0px;
          }

          (the repeat-x should be followed by a semicolon)

          Second, there is no need for any absolute positioning there. Consider this
          page -

          http://www.murraytestsite.com/zpizza.html

          No layers. No tables. Your code (slightly edited), but not your CSS.

          To read about why using layers as a layout method is a bad idea, go here -

          http://www.great-web-sights.com/g_layer-overlap.asp

          This may help you understand positioning a bit -

          There are 4 different types of positioning:
          Absolute
          Relative
          Fixed
          Static

          Here is a brief explanation of each kind of positioning (with regard to
          placement of elements on the page only)....

          Position:absolute (or A/P elements)
          -----------------------
          This does several things -
          1. It 'removes' the element from the flow of the code on the page so that
          it can no longer influence the size or position of any other page element
          (except for those contained within it, of course).

          2. The absolutely positioned element takes its position from the position of
          its closest PARENT *positioned* element - in the absence of any explicitly
          positioned parent, this will default to the <body> tag, which is always
          positioned
          at 0,0 in the browser viewport.

          This means that it doesn't matter where in the HTML code the layer's code
          appears (between <body> and </body>), its location on the screen will not
          change (this assumes that you have not positioned the A/P element within
          a table or another A/P element, of course). Furthermore, the space in
          which
          this element would have appeared were it not positioned is not preserved
          on the screen. In other words, absolutely positioned elements don't take
          up any space on the page. In fact, they FLOAT over the page.

          Position:relative (or R/P elements)
          ----------------------
          In contrast to absolute positioning, a relatively positioned page element is
          *not* removed from the flow of the code on the page, so it will use the
          spot
          where it would have appeared based on its position in the code as its
          zero point reference. If you then supply top, right, bottom, or left
          positions
          to the style for this element, those values will be used as offsets from
          its
          zero point.

          This means that it DOES matter where in the code the relatively positioned
          element appears (, as it will be positioned in that location (factoring in
          the offsets) on the screen (this is true for any placement in the code).
          Furthermore, the space where this element would have appeared is
          preserved in the display, and can therefore affect the placement of
          succeeding elements. This means that the taller a relatively
          positioned element is, the more space it forces on the page.

          Position:static
          -------------------
          As with relative position, static positions also "go with the flow". An
          element with a static position cannot have values for offsets (top, right,
          left, bottom) or if it has them, they will be ignored. Unless explicitly
          positioned, all div elements default to static positioning.

          Position:fixed
          ------------------
          A page element with this style will not scroll as the page content scrolls.
          Support for this in elements other than page backgrounds is quirky

          There are several other things you need to know:

          1. ANY page element can be positioned - paragraphs, tables, images, lists,
          etc.
          2. The <div> tag is a BLOCK level tag. This means that if it is not
          positioned or explicitly styled otherwise, a) it will always begin on a new
          line on the screen, and b) it will always force content to a new line below
          it, and c) it will always take up the entire width of its container (i.e.,
          width:100%).
          3. The placement of A/P elements *can* affect the BEHAVIOR of other
          elements
          on the page. For example, a 'layer' placed over a hyperlink will mask that
          hyperlink.

          You can see a good example of the essential difference between absolute and
          relative positioning here -

          http://www.great-web-sights.com/g_layersdemo.asp

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.dreamweavermx-templates.com - Template Triage!
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
          ==================


          "SinisterDesign" <webforumsuser@macromedia.com> wrote in message
          news:f87vr4$fql$1@forums.macromedia.com...
          >I am setting up a layout using CSS. You can see it thus far
          > http://sinisterdesign.com/zpizzaTest/index.html I had someone else looking
          > at
          > it (from IE, I want to say 7, but they dont actually know) and they said
          > they
          > saw a white border around that logo at the 'z' and the 'a' Doing this and
          > dropping the logo and what not in AP Divs Do some browsers make a border
          > automatically around the pic inside of it. Do I need to set the padding or
          > margins to 0? Im new to doing layouts in CSS, however I love it thus far.
          > That
          > border goes right around the edge of the AP Div, note i made the AP Div
          > the
          > EXACT size of the logo...in case that matters. Thanks in advance to anyone
          > taking time to help me here
          >
          > PS Notice anything else I should be aware of on the page?
          >