30 Replies Latest reply on Sep 5, 2008 5:04 AM by Newsgroup_User

    Fixing website

    Devilzer
      Ive made a website and now i noticed that it doesnt follow the browser.
      I usually place pics and stuff in % to top/bottom/left/right.

      How can i fix everything in place, in % from the edges?
      Its many pictures and i dont want to remake it.

      Thanx for your help :D
        • 1. Re: Fixing website
          malcster2 Level 1
          have you got a link?
          • 2. Re: Fixing website
            Devilzer Level 1
            http://www.rasmus.110mb.com

            its not finished, but u asked for a link...
            • 3. Re: Fixing website
              malcster2 Level 1
              to position centrally, in your css main wrapper div, set margin:auto;
              set your main wrapper to a fixed px width, i.e770px;

              you can then use % within the main wrapper, as it will always be a % of 770, therefore the same px value.

              if possible, try not to use loads of ap divs aswell. you can get the same positions by using divs and margins.

              • 4. Re: Fixing website
                Devilzer Level 1
                and where is this main wrapper div? im not used to use the code, is there a way in the Dreamweaver UI?
                • 5. Re: Fixing website
                  malcster2 Level 1
                  the main wrapper div is the div that contains everything else.

                  it doesn't have to be called wrapper, you can call it anything you like, container for instance.

                  it usually like <div id="wrapper">
                  everything in the page goes here
                  </div>

                  and in the css page
                  #wrapper
                  {
                  margin:auto;
                  width:770px;
                  }

                  you'll find that a vast majority of pages have a main container.
                  try it with that width.
                  • 6. Re: Fixing website
                    malcster2 Level 1
                    also, at the top of your css file, enter this:

                    body { /* set everything to normal to define the base format */
                    font: normal 13px/normal Geneva, Arial, Helvetica,
                    sans-serif;
                    color: #000000;
                    margin:0;
                    margin-top:2px;
                    margin-bottom:2px;
                    }


                    h1 { font-size: 1.5em; margin: 0 .25em 0.65em 0; }
                    h2 { font-size: 1.2em; margin: 0 .25em 0.65em 0; }
                    h3 { font-size: 1.1em; margin: 0 .25em 0.4em 0; }

                    p, td, th, div, blockquote, ul, li, dl, ol { font-size: 1em; }
                    p, td, th, blockquote { margin: 0.5em 0;} /* controls spacing
                    between elements */


                    this sorts out the differences you may find between different browsers.
                    • 7. Re: Fixing website
                      Devilzer Level 1
                      so do i have to make one or is it already there?

                      sorry for my incompetence.

                      i dont seem to find it :SS
                      • 8. Re: Fixing website
                        malcster2 Level 1
                        you don't have to have one, just makes things a lot easier.

                        just stick this into your css file -

                        #wrapper
                        {
                        margin:auto;
                        width:770px;
                        }

                        and stick all your content inside <div id="wrapper">....</div>

                        everything will then be inside a container that is 770px wide, and if you are setting your content with %'s, things should always look ok
                        • 9. Re: Fixing website
                          Level 7
                          > everything will then be inside a container that is 770px wide, and if you
                          > are
                          > setting your content with %'s, things should always look ok

                          Not if there are absolutely positioned elements on the page. And there are.

                          Here are better and more comprehensive instructions -

                          Change this -

                          </head>

                          to this -

                          <style type="text/css">
                          <!--
                          body { text-align:center; }
                          #wrapper { text-align:left; width:760px; margin:0 auto;position:relative; }
                          /* 760px will display on an 800px screen maximized browser window without */
                          /* horizontal scrollbars. */
                          -->
                          </style>
                          </head>

                          change this -

                          <body alink="#FFFFFF" border="0">

                          to this -

                          <body alink="#FFFFFF">
                          <div id="wrapper">
                          (there is no border attribute for the body tag)

                          and this -

                          </body>

                          to this -

                          <!-- /wrapper -->
                          </div>
                          </body>

                          and see if that helps. You will need to re-position your absolutely
                          positioned divs, however.

                          Later, you'll find out what a mistake it is to make pages the way you
                          have....

                          --
                          Murray --- ICQ 71997575
                          Adobe Community Expert
                          (If you *MUST* email me, don't LAUGH when you do so!)
                          ==================
                          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                          ==================


                          "malcster2" <webforumsuser@macromedia.com> wrote in message
                          news:g9pirm$4p7$1@forums.macromedia.com...
                          > you don't have to have one, just makes things a lot easier.
                          >
                          > just stick this into your css file -
                          >
                          > #wrapper
                          > {
                          > margin:auto;
                          > width:770px;
                          > }
                          >
                          > and stick all your content inside <div id="wrapper">....</div>
                          >
                          > everything will then be inside a container that is 770px wide, and if you
                          > are
                          > setting your content with %'s, things should always look ok
                          >

                          • 10. Re: Fixing website
                            Devilzer Level 1
                            it is not working :S i did what u said. Is there a easier way to do this?

                            None of my items are controlled with %. I would have done that from the beginning, but the white area is one picture and the boats are one. so if i say place all 50% from the left edge they all get clogged up.

                            can you group or glue all things to one?
                            • 11. Re: Fixing website
                              Level 7
                              malcster2 wrote:
                              > you don't have to have one, just makes things a lot easier.
                              >
                              > just stick this into your css file -
                              >
                              > #wrapper
                              > {
                              > margin:auto;
                              > width:770px;
                              > }
                              >
                              > and stick all your content inside <div id="wrapper">....</div>
                              >
                              > everything will then be inside a container that is 770px wide, and if you are
                              > setting your content with %'s, things should always look ok
                              >

                              Just to add - because you have constructed using layers or absolutely
                              positioned divs then you need to introduce position relative to the
                              wrapper or container div and adjust the left positioning on your dives
                              relative to that - try this for your inehall.html page.......

                              The CSS......

                              body {
                              background-color: #2A2A34;
                              border: 0;
                              }
                              #wrap {
                              position:relative;
                              width:760px;
                              margin: 0 auto;
                              }
                              #apDiv1 {
                              position:absolute;
                              left:127px;
                              top:107px;
                              width:573px;
                              height:417px;
                              z-index:1;
                              }
                              #apDiv2 {
                              position:absolute;
                              left:0px;
                              top:123px;
                              width:188px;
                              height:393px;
                              z-index:2;
                              }
                              #apDiv3 {
                              position:absolute;
                              left:9px;
                              top:173px;
                              width:124px;
                              height:55px;
                              z-index:3;
                              }
                              #apDiv4 {
                              position:absolute;
                              left:0px;
                              top:420px;
                              width:99px;
                              height:63px;
                              z-index:4;
                              border-color: #FFFFFF;
                              background-color: #FFFFFF;
                              border: 0;
                              }
                              a:link {
                              text-decoration: none;
                              }
                              a:visited {
                              text-decoration: none;
                              }
                              a:hover {
                              text-decoration: none;
                              }
                              a:active {
                              text-decoration: none;
                              border: 0;
                              }
                              #apDiv5 {
                              position:absolute;
                              left:0px;
                              top:293px;
                              width:141px;
                              height:63px;
                              z-index:4;
                              }
                              #apDiv6 {
                              position:absolute;
                              left:9px;
                              top:307px;
                              width:124px;
                              height:34px;
                              z-index:4;
                              }
                              #apDiv7 {
                              position:absolute;
                              left:9px;
                              top:356px;
                              width:119px;
                              height:36px;
                              z-index:5;
                              }
                              #apDiv8 {
                              position:absolute;
                              left:9px;
                              top:411px;
                              width:109px;
                              height:54px;
                              z-index:6;
                              }

                              And in your html markup - immediately *above* <div id="apDiv1"><img
                              src="main2.jpg" width="572" height="416" /></div>

                              put this....

                              <div id="wrap">

                              then - immediately *above* </body>

                              put this....

                              </div>


                              --
                              chin chin
                              Sinclair
                              • 12. Re: Fixing website
                                Level 7
                                Malcstr2's suggestion was incorrect. Please see mine or djinn's for a
                                better method.

                                --
                                Murray --- ICQ 71997575
                                Adobe Community Expert
                                (If you *MUST* email me, don't LAUGH when you do so!)
                                ==================
                                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                ==================


                                "Devilzer" <webforumsuser@macromedia.com> wrote in message
                                news:g9pjn0$5nj$1@forums.macromedia.com...
                                > it is not working :S i did what u said. Is there a easier way to do this?
                                >
                                > None of my items are controlled with %. I would have done that from the
                                > beginning, but the white area is one picture and the boats are one. so if
                                > i say
                                > place all 50% from the left edge they all get clogged up.
                                >
                                > can you group or glue all things to one?
                                >

                                • 13. Re: Fixing website
                                  malcster2 Level 1
                                  yeah, but you don't place everything 50% from the left.
                                  if you really want to stick with ap divs, you use the left and top values, for instance,
                                  #apDiv2 {
                                  position:absolute;
                                  xxxx ==> left:98px;
                                  XXXX==> top:123px;
                                  width:188px;
                                  height:393px;
                                  z-index:2;
                                  }
                                  • 14. Re: Fixing website
                                    Devilzer Level 1
                                    Thanx!!!!!

                                    Omg u really did it lol.

                                    just one more qs, it stays kinda in the middle now, but how do you make that "wrapper" stay right in the midle? 50% from the left edge?
                                    • 15. Re: Fixing website
                                      Level 7
                                      Read my post. It's covered there.

                                      --
                                      Murray --- ICQ 71997575
                                      Adobe Community Expert
                                      (If you *MUST* email me, don't LAUGH when you do so!)
                                      ==================
                                      http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                      http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                      ==================


                                      "malcster2" <webforumsuser@macromedia.com> wrote in message
                                      news:g9pkjs$6j4$1@forums.macromedia.com...
                                      > yeah, but you don't place everything 50% from the left.
                                      > if you really want to stick with ap divs, you use the left and top values,
                                      > for
                                      > instance,
                                      > #apDiv2 {
                                      > position:absolute;
                                      > xxxx ==> left:98px;
                                      > XXXX==> top:123px;
                                      > width:188px;
                                      > height:393px;
                                      > z-index:2;
                                      > }
                                      >

                                      • 16. Re: Fixing website
                                        Level 7
                                        Your entire body content is within absolutely positioned elements. You have
                                        to reposition them in DW so that their location on the page is the way you
                                        want it. They will stay that way on the web.

                                        Another thing - the wrapper div is set to 760px width. Your widest div is
                                        less than that. This will cause the centering to be a bit skewed left.
                                        Make the wrapper div have the same width as your widest div and it'll be a
                                        bit better.

                                        --
                                        Murray --- ICQ 71997575
                                        Adobe Community Expert
                                        (If you *MUST* email me, don't LAUGH when you do so!)
                                        ==================
                                        http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                        http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                        ==================


                                        "Devilzer" <webforumsuser@macromedia.com> wrote in message
                                        news:g9pkk8$6jn$1@forums.macromedia.com...
                                        > Thanx!!!!!
                                        >
                                        > Omg u really did it lol.
                                        >
                                        > just one more qs, it stays kinda in the middle now, but how do you make
                                        > that "wrapper" stay right in the midle? 50% from the left edge?

                                        • 17. Re: Fixing website
                                          malcster2 Level 1
                                          if it starts 50% from the left, it would be a lot closer than 50% to the right, and will look a bit dodgy!!

                                          if you use #wrapper { text-align:left; width:760px; margin:0 auto;position:relative; }

                                          than it will be dead centre.. change your resolution to 800x600, and you'll see why it is important
                                          • 18. Re: Fixing website
                                            Level 7
                                            .oO(Murray *ACE*)

                                            >> everything will then be inside a container that is 770px wide, and if you
                                            >> are
                                            >> setting your content with %'s, things should always look ok
                                            >
                                            >Not if there are absolutely positioned elements on the page. And there are.
                                            >
                                            >Here are better and more comprehensive instructions -
                                            >
                                            >Change this -
                                            >
                                            ></head>
                                            >
                                            >to this -
                                            >
                                            ><style type="text/css">
                                            ><!--
                                            >body { text-align:center; }
                                            >#wrapper { text-align:left; width:760px; margin:0 auto;position:relative; }
                                            >/* 760px will display on an 800px screen maximized browser window without */
                                            >/* horizontal scrollbars. */
                                            >-->
                                            ></style>
                                            ></head>

                                            Don't you think it's about time now to drop support for Netscape 3 and
                                            olders? ;-)

                                            Absolutely _no_ recent browser, not a single one, needs the HTML comment
                                            tags in a 'style' or 'script' element. In real XHTML they would even be
                                            completely wrong. Same for the text-align hack, as already mentioned in
                                            the other thread. IE 6 doesn't need it and IE 5 doesn't really matter
                                            anymore, as long as the page content is accessible of course.

                                            Keep it short and simple (KISS):

                                            <style type="text/css">
                                            #wrapper {margin: 0 auto; width: 760px; position: relative;}
                                            </style>

                                            That's it.

                                            Micha
                                            • 19. Re: Fixing website
                                              Level 7
                                              > Don't you think it's about time now to drop support for Netscape 3 and
                                              > olders? ;-)

                                              But....

                                              > Absolutely _no_ recent browser, not a single one, needs the HTML comment
                                              > tags in a 'style' or 'script' element.

                                              You're right. Edits made.


                                              --
                                              Murray --- ICQ 71997575
                                              Adobe Community Expert
                                              (If you *MUST* email me, don't LAUGH when you do so!)
                                              ==================
                                              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                              ==================


                                              "Michael Fesser" <netizen@gmx.de> wrote in message
                                              news:ven0c4p29lc336lu4i6t57sm9guj08iiqg@4ax.com...
                                              > .oO(Murray *ACE*)
                                              >
                                              >>> everything will then be inside a container that is 770px wide, and if
                                              >>> you
                                              >>> are
                                              >>> setting your content with %'s, things should always look ok
                                              >>
                                              >>Not if there are absolutely positioned elements on the page. And there
                                              >>are.
                                              >>
                                              >>Here are better and more comprehensive instructions -
                                              >>
                                              >>Change this -
                                              >>
                                              >></head>
                                              >>
                                              >>to this -
                                              >>
                                              >><style type="text/css">
                                              >><!--
                                              >>body { text-align:center; }
                                              >>#wrapper { text-align:left; width:760px; margin:0
                                              >>auto;position:relative; }
                                              >>/* 760px will display on an 800px screen maximized browser window without
                                              >>*/
                                              >>/* horizontal scrollbars. */
                                              >>-->
                                              >></style>
                                              >></head>
                                              >
                                              > Don't you think it's about time now to drop support for Netscape 3 and
                                              > olders? ;-)
                                              >
                                              > Absolutely _no_ recent browser, not a single one, needs the HTML comment
                                              > tags in a 'style' or 'script' element. In real XHTML they would even be
                                              > completely wrong. Same for the text-align hack, as already mentioned in
                                              > the other thread. IE 6 doesn't need it and IE 5 doesn't really matter
                                              > anymore, as long as the page content is accessible of course.
                                              >
                                              > Keep it short and simple (KISS):
                                              >
                                              > <style type="text/css">
                                              > #wrapper {margin: 0 auto; width: 760px; position: relative;}
                                              > </style>
                                              >
                                              > That's it.
                                              >
                                              > Micha

                                              • 20. Re: Fixing website
                                                Level 7
                                                djinn wrote:
                                                > inehall.html page.......

                                                That looks better now - although you forgot to close the wrap div -
                                                re-read my post - you missed the last step.

                                                You should now be able to adapt this to your opening page using the same
                                                technique.

                                                HTH

                                                --
                                                chin chin
                                                Sinclair
                                                • 21. Re: Fixing website
                                                  Level 7
                                                  djinn wrote:
                                                  > djinn wrote:
                                                  >> inehall.html page.......
                                                  >
                                                  > That looks better now - although you forgot to close the wrap div -
                                                  > re-read my post - you missed the last step.
                                                  >
                                                  > You should now be able to adapt this to your opening page using the same
                                                  > technique.
                                                  >
                                                  > HTH
                                                  >

                                                  Hehe - my math isn't as good as it could be - change this rule, from
                                                  this........

                                                  #apDiv1 {
                                                  position:absolute;
                                                  left:127px;
                                                  top:107px;
                                                  width:573px;
                                                  height:417px;
                                                  z-index:1;
                                                  }

                                                  to this........

                                                  #apDiv1 {
                                                  position:absolute;
                                                  left:187px;
                                                  top:107px;
                                                  width:573px;
                                                  height:417px;
                                                  z-index:1;
                                                  }


                                                  --
                                                  chin chin
                                                  Sinclair
                                                  • 22. Re: Fixing website
                                                    Devilzer Level 1
                                                    But i wanted to add a small space below the big boat image, i want to place small thumbnails there that will replace the big image, how do i get them to stay right under the big image?

                                                    they are stuck at the left side. hmm...
                                                    • 23. Re: Fixing website
                                                      malcster2 Level 1
                                                      you could create a new div for your thumnails, and float it to the right.

                                                      or, since you are only using absolute divs, you could create a new one, a put your thumbnail pics in there.

                                                      quick tip from someone who is still learning......rename your divs to something more relevant, i.e boat pics div, header div.

                                                      #apDiv5 will mean nothing in a few weeks.


                                                      it'll save you loads of time in the future, and is good practice
                                                      • 24. Re: Fixing website
                                                        Devilzer Level 1
                                                        yes i know, but i did a new apdiv and placed it but it still floats to the left:S
                                                        • 25. Re: Fixing website
                                                          malcster2 Level 1
                                                          but if its an ap div, you can place it where you want with left:xx px;

                                                          e.g

                                                          #boat buttons
                                                          {
                                                          left:xx px;
                                                          positon:absolute;
                                                          etc....
                                                          }
                                                          • 26. Re: Fixing website
                                                            Level 7
                                                            Devilzer wrote:
                                                            > yes i know, but i did a new apdiv and placed it but it still floats to the left:S

                                                            Sorry to butt in guys - I saw that you followed my instructions for your
                                                            inehall.html page - please note that I posted an amendment and a
                                                            reminder that you hadn't closed the wrap div - see further up in the
                                                            thread :-)

                                                            HTH

                                                            --
                                                            chin chin
                                                            Sinclair
                                                            • 27. Re: Fixing website
                                                              Level 7
                                                              No space between the value and the unit, i.e.,

                                                              left:xxpx not left:xx px

                                                              --
                                                              Murray --- ICQ 71997575
                                                              Adobe Community Expert
                                                              (If you *MUST* email me, don't LAUGH when you do so!)
                                                              ==================
                                                              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                                              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                                              ==================


                                                              "malcster2" <webforumsuser@macromedia.com> wrote in message
                                                              news:g9r36d$p77$1@forums.macromedia.com...
                                                              > but if its an ap div, you can place it where you want with left:xx px;
                                                              >
                                                              > e.g
                                                              >
                                                              > #boat buttons
                                                              > {
                                                              > left:xx px;
                                                              > positon:absolute;
                                                              > etc....
                                                              > }

                                                              • 28. Re: Fixing website
                                                                Level 7
                                                                AP divs do not float. And we cannot possibly know why you are getting this
                                                                without seeing your code, you know?

                                                                --
                                                                Murray --- ICQ 71997575
                                                                Adobe Community Expert
                                                                (If you *MUST* email me, don't LAUGH when you do so!)
                                                                ==================
                                                                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                                                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                                                ==================


                                                                "Devilzer" <webforumsuser@macromedia.com> wrote in message
                                                                news:g9r2up$ou0$1@forums.macromedia.com...
                                                                > yes i know, but i did a new apdiv and placed it but it still floats to the
                                                                > left:S

                                                                • 29. Re: Fixing website
                                                                  malcster2 Level 1
                                                                  yeah, the wrap div has not been closed.

                                                                  murray

                                                                  the link to this page is http://www.rasmus.110mb.com/inehall.html
                                                                  • 30. Re: Fixing website
                                                                    Level 7
                                                                    Yep. djinn's on it.

                                                                    --
                                                                    Murray --- ICQ 71997575
                                                                    Adobe Community Expert
                                                                    (If you *MUST* email me, don't LAUGH when you do so!)
                                                                    ==================
                                                                    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                                                    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                                                    ==================


                                                                    "malcster2" <webforumsuser@macromedia.com> wrote in message
                                                                    news:g9r5u0$rsq$1@forums.macromedia.com...
                                                                    > yeah, the wrap div has not been closed.
                                                                    >
                                                                    > murray
                                                                    >
                                                                    > the link to this page is http://www.rasmus.110mb.com/inehall.html
                                                                    >