18 Replies Latest reply on Jun 18, 2007 1:14 PM by Newsgroup_User

    Centering

    Smalltownghosts
      How can i get an AP DIV, which is actually the homepage, to stay centered on all computer screens? message me for the link to the page. thanks!
        • 1. Re: Centering
          eFscl Level 1
          this is not a dreamweaver question - use the html forum - google for "div center" or use one of the templates coming with dw
          • 2. Re: Centering
            Level 7
            Asked and answered here quite often.. a search would have revealed the
            answer :-)
            http://tinyurl.com/yuswbc



            --
            Nadia
            Adobe® Community Expert : Dreamweaver
            ----------------------------------------
            CSS Templates |Tutorials |SEO Articles
            http://www.DreamweaverResources.com
            ~ Customisation Service Available ~
            http://www.csstemplates.com.au
            ----------------------------------------------------
            Spry Widget Examples
            http://www.dreamweaverresources.com/spry-widgets/
            ----------------------------------------------------


            > How can i get an AP DIV, which is actually the homepage, to stay centered
            > on all computer screens? message me for the link to the page. thanks!


            • 3. Re: Centering
              Smalltownghosts Level 1
              Thank you very very much!!
              • 4. Re: Centering
                Smalltownghosts Level 1
                Actually, those suggestions were very helpful, but, there is something a bit different with my scenario, i am using a background in which i created in photshop and imported into dreamweaver, which i have set as "repeating". is this the possible reason i am experiencing the centering issue? because, the page is centered on some screens adn not others (all using IE).
                thanks
                • 5. Re: Centering
                  Level 7
                  Would you relax with this, please.

                  --
                  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
                  ==================


                  "eFscl" <webforumsuser@macromedia.com> wrote in message
                  news:f55urc$5lf$1@forums.macromedia.com...
                  > this is not a dreamweaver question - use the html forum - google for "div
                  > center" or use one of the templates coming with dw


                  • 6. Re: Centering
                    Level 7
                    Let's see your page.

                    --
                    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
                    ==================


                    "Smalltownghosts" <webforumsuser@macromedia.com> wrote in message
                    news:f56127$87g$1@forums.macromedia.com...
                    > Actually, those suggestions were very helpful, but, there is something a
                    > bit
                    > different with my scenario, i am using a background in which i created in
                    > photshop and imported into dreamweaver, which i have set as "repeating".
                    > is
                    > this the possible reason i am experiencing the centering issue? because,
                    > the
                    > page is centered on some screens adn not others (all using IE).
                    > thanks
                    >


                    • 7. Re: Centering
                      Smalltownghosts Level 1
                      i just sent you an email.
                      • 8. Re: Centering
                        Level 7
                        I won't get it. Please just post the link here if you can.

                        --
                        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
                        ==================


                        "Smalltownghosts" <webforumsuser@macromedia.com> wrote in message
                        news:f564hh$c58$1@forums.macromedia.com...
                        >i just sent you an email.


                        • 9. Re: Centering
                          Smalltownghosts Level 1
                          www.answerdept.com


                          here also is the code:

                          <!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>Answer Dept</title>
                          <style type="text/css">
                          <!--
                          body {
                          background-image: url(background%20blue%20website%20flatten.png);
                          background-repeat: repeat;
                          background-position: center center;
                          background-attachment: scroll;
                          position: absolute;
                          height: 1050px;
                          width: 1000px;
                          margin: 0px;
                          }
                          #apDiv1 {
                          position:absolute;
                          width:137px;
                          height:137px;
                          z-index:auto;
                          left: 100px;
                          top: 25px;
                          right: auto;
                          bottom: auto;
                          }
                          -->
                          </style>
                          </head>

                          <body>
                          <div align="center" id="apDiv1"><img src="images/blue webpage flatten.png" width="793" height="1000" /></div>
                          </body>
                          </html>
                          • 10. Re: Centering
                            Level 7
                            You should not use file/pathnames that contain spaces for web work, you
                            know?

                            background%20blue%20website%20flatten.png

                            This one is a real stinker.

                            Also, did you create that image in FW? Did you explicitly export it as an
                            8-bit PNG image? If not, it's probably a huge image file, either as a
                            32-bit PNG or as a FW native file. You wouldn't want to use that.

                            Your problem is that you have placed the image into an absolutely positioned
                            div which is then anchored at the left/top positions specified here -

                            > #apDiv1 {
                            > position:absolute;
                            > width:137px;
                            > height:137px;
                            > z-index:auto;
                            > left: 100px; <---------------
                            > top: 25px; <----------------
                            > right: auto;
                            > bottom: auto;
                            > }

                            So - it's not a surprise that you are not seeing things center. If you want
                            the image centered, you would have to place it in an element that is going
                            to center on the page, e.g.,

                            <table align="center">
                            <tr>
                            <td><img src="yourfile.png"></td>
                            </tr>
                            </table>

                            or

                            <div style="margin:0 auto; width:793px;"><img src="yourfile.png"></div>

                            or, to make your attempt work, change this -

                            <body>
                            <div align="center" id="apDiv1"><img src="images/blue webpage flatten.png"
                            width="793" height="1000" /></div>
                            </body>
                            </html>

                            to this -

                            <body>
                            </body>
                            </html>

                            and see what happens.

                            --
                            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
                            ==================


                            "Smalltownghosts" <webforumsuser@macromedia.com> wrote in message
                            news:f56568$d12$1@forums.macromedia.com...
                            > www.answerdept.com
                            >
                            >
                            > here also is the code:
                            >
                            > <!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>Answer Dept</title>
                            > <style type="text/css">
                            > <!--
                            > body {
                            > background-image: url(background%20blue%20website%20flatten.png);
                            > background-repeat: repeat;
                            > background-position: center center;
                            > background-attachment: scroll;
                            > position: absolute;
                            > height: 1050px;
                            > width: 1000px;
                            > margin: 0px;
                            > }
                            > #apDiv1 {
                            > position:absolute;
                            > width:137px;
                            > height:137px;
                            > z-index:auto;
                            > left: 100px;
                            > top: 25px;
                            > right: auto;
                            > bottom: auto;
                            > }
                            > -->
                            > </style>
                            > </head>
                            >
                            > <body>
                            > <div align="center" id="apDiv1"><img src="images/blue webpage flatten.png"
                            > width="793" height="1000" /></div>
                            > </body>
                            > </html>
                            >
                            >


                            • 11. Re: Centering
                              Smalltownghosts Level 1
                              i created the image in photshop cs3, we do not have fireworks. ok , so now i added table and aligned it center, exactly how you set it up at the top. but, now it is centered inside of dreamweaver, but nowhere else (browsers). but at least it is universaly all the way to the left! a start of sorts. i really apreciate your help. here is what the new code looks like. o yeah, and i agree with the file names not having "spaces" i am going to go back and fix that after i get this situation taken care of.

                              <!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>Answer Dept</title>
                              <style type="text/css">
                              <!--
                              body {
                              background-image: url(background%20blue%20website%20flatten.png);
                              background-repeat: repeat;
                              background-position: center center;
                              background-attachment: scroll;
                              position: absolute;
                              height: auto;
                              width: auto;
                              margin: 0px;

                              }
                              -->
                              </style>
                              </head>

                              <body>
                              <table align="center">
                              <tr>
                              <td><img src="images/blue webpage flatten.png" width="793" height="1000" /></td>
                              </tr>
                              </table>

                              </body>
                              </html>



                              i am also going to try the second string of code that you suggested
                              • 12. Re: Centering
                                Level 7
                                That image will be centered in any browser viewport that is wider than the
                                width of the image.

                                Since you are now doing this with an image explicitly on the page, you can
                                remove this -

                                > <style type="text/css">
                                > <!--
                                > body {
                                > background-image: url(background%20blue%20website%20flatten.png);
                                > background-repeat: repeat;
                                > background-position: center center;
                                > background-attachment: scroll;
                                > position: absolute;
                                > height: auto;
                                > width: auto;
                                > margin: 0px;
                                >
                                > }
                                > -->
                                > </style>

                                As it will confuse things by also applying the image to the body tag as a
                                background image. You don't need both.

                                --
                                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
                                ==================


                                "Smalltownghosts" <webforumsuser@macromedia.com> wrote in message
                                news:f56aav$j5v$1@forums.macromedia.com...
                                >i created the image in photshop cs3, we do not have fireworks. ok , so now
                                >i
                                > added table and aligned it center, exactly how you set it up at the top.
                                > but,
                                > now it is centered inside of dreamweaver, but nowhere else (browsers). but
                                > at
                                > least it is universaly all the way to the left! a start of sorts. i really
                                > apreciate your help. here is what the new code looks like. o yeah, and i
                                > agree
                                > with the file names not having "spaces" i am going to go back and fix that
                                > after i get this situation taken care of.
                                >
                                > <!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>Answer Dept</title>
                                > <style type="text/css">
                                > <!--
                                > body {
                                > background-image: url(background%20blue%20website%20flatten.png);
                                > background-repeat: repeat;
                                > background-position: center center;
                                > background-attachment: scroll;
                                > position: absolute;
                                > height: auto;
                                > width: auto;
                                > margin: 0px;
                                >
                                > }
                                > -->
                                > </style>
                                > </head>
                                >
                                > <body>
                                > <table align="center">
                                > <tr>
                                > <td><img src="images/blue webpage flatten.png" width="793" height="1000"
                                > /></td>
                                > </tr>
                                > </table>
                                >
                                > </body>
                                > </html>
                                >
                                >
                                >
                                > i am also going to try the second string of code that you suggested
                                >


                                • 13. Re: Centering
                                  Smalltownghosts Level 1
                                  oh man, again i really apreciate this, but, i guess i did not make this known; i am using a background/ background image. i am nto sure if you have gone to the website but it is the orange crossing lines, and then the lighter shade of blue image is on top of that
                                  • 14. Re: Centering
                                    Level 7
                                    Oh - sorry. I see now that they are different images. All those spaces in
                                    the filenames confused me, too. See why it's bad to use them? 8)

                                    Is this *not* what you are wanting to achieve?

                                    http://murraytestsite.com/answerdept.html

                                    --
                                    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
                                    ==================


                                    "Smalltownghosts" <webforumsuser@macromedia.com> wrote in message
                                    news:f56eu1$otd$1@forums.macromedia.com...
                                    > oh man, again i really apreciate this, but, i guess i did not make this
                                    > known;
                                    > i am using a background/ background image. i am nto sure if you have gone
                                    > to
                                    > the website but it is the orange crossing lines, and then the lighter
                                    > shade of
                                    > blue image is on top of that
                                    >


                                    • 15. Re: Centering
                                      Smalltownghosts Level 1
                                      yes it is
                                      • 16. Re: Centering
                                        Level 7
                                        So.... I just reposted the code that you had in your post (other than
                                        fixing the spaces in the filename).

                                        --
                                        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
                                        ==================


                                        "Smalltownghosts" <webforumsuser@macromedia.com> wrote in message
                                        news:f56jsm$1k3$1@forums.macromedia.com...
                                        > yes it is


                                        • 17. Re: Centering
                                          Smalltownghosts Level 1
                                          O Man!!! thank you very much !!! it is rockin n' rollin!!! i really reall appreciate it! i am sure you will see my name come up again it these forums real soon, haha!
                                          • 18. Re: Centering
                                            Level 7
                                            Good luck!

                                            --
                                            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
                                            ==================


                                            "Smalltownghosts" <webforumsuser@macromedia.com> wrote in message
                                            news:f56nj7$615$1@forums.macromedia.com...
                                            >O Man!!! thank you very much !!! it is rockin n' rollin!!! i really reall
                                            >appreciate it! i am sure you will see my name come up again it these forums
                                            >real soon, haha!