5 Replies Latest reply on Apr 16, 2010 2:21 PM by homebrews

    positioning in divs

    homebrews

      Set up a page with a div container and placed all other stuff inside the container. Have a header, pix and then three (3) separate data divs under the pix using float left and position relative for all three. However, when viewing the page in DW it seems that the data is outside the container and when viewing in FF  and IE8 it gives the same appearance. Could use top -100px but that does not seem to be the right way since relative positioning is used. Here is a link to the page: http://tricksterfilms.com/test/about.htm.

       

      Thanks for the help.

        • 1. Re: positioning in divs
          Nancy OShea Adobe Community Professional & MVP

          The main problem I see is use of RELATIVE positioning which is not needed for most layouts.

           

          1) Build your HTML markup logically from top to bottom of page.

          2) Use default CSS positioning (which is no positioning at all).

          3) Use floats, margins and padding to align elements on the page.

           

          If you look at the code in the following 3-column example page, you'll see no positioning is needed other than a float: left and float: right on sidebars.

          http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml

           

          RELATED LINKS:

          -----------------------

          Learn CSS Positioning in 10 Steps -

          http://www.barelyfitz.com/screencast/html-training/css/positioning/

           

          Working with Floats

          http://css.maxdesign.com.au/floatutorial/

           

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

          • 2. Re: positioning in divs
            homebrews Level 1

            thanx for the response, Nancy.

             

            Here is the page without position: relative in any of the divs: http://tricksterfilms.com/test/about.htm

            and this one is with position: relative for, what appears to be the misplaced divs in the previous link:http://tricksterfilms.com/test/about_relative.htm

             

            I am at a loss if I follow your postioning rule. Any suggestions?

            • 3. Re: positioning in divs
              homebrews Level 1

              Here is the latest version that has a header and three columns. All done without position: relative. What needs to be done is to move the yellow square on top of the flag so that 'Location Shots' column can move up and be in line with the other two columns.

               

              If position: relative is used then the two columns on the left, 'trickster story' and 'from the director' also need the postion relative with a negative (-150px) top attribute. Which seems to be a cascading problem with the footer, which has not been added as of yet.

               

              Appreciate anyone who can help with moving the yellow square on top of the flag/man holding boy div.

               

              View here: http://http://tricksterfilms.com/test/about.htm

               

              Thanks.

              • 4. Re: positioning in divs
                Nancy OShea Adobe Community Professional & MVP

                Create a #flag division and put your flag image in the background CSS.  BTW: GIFS make awful photos.  You'll get much better picture quality with a JPEG.

                 

                Copy and Paste this code into a new, blank document.

                 

                <!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=iso-8859-1" />
                <title>Untitled Document</title>
                <style type="text/css">
                
                #wrapper {
                width: 700px;
                margin: 0 auto; /**centers page**/
                border: 1px solid red;
                }
                
                #flag {
                background: url(http://tricksterfilms.com/test/images/about_flag.gif) top no-repeat;
                height: 402px;
                margin: 0;
                padding: 0;
                }
                
                .caption {
                background-color:transparent;
                width: 350px;
                overflow: auto; /**adds scrollbars if text size or content is increased**/
                margin-left: 350px;
                padding-top: 150px;
                height: 300px;
                }
                
                .caption p {
                font-size: 1.5em;
                color: #FFFF00;
                font-weight: bold;
                }
                </style>
                </head>
                <body>
                <div id="wrapper">
                <div id="flag">
                <div class="caption">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce urna enim, vehicula sit amet lacinia sed, pulvinar dictum sapien. Duis feugiat bibendum aliquet. </p>
                </div>  <!--end caption -->
                </div>  <!--end flag -->
                </div>  <!--end wrapper -->
                </body>
                </html>
                
                

                 

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

                • 5. Re: positioning in divs
                  homebrews Level 1

                  Thank you.