18 Replies Latest reply on Aug 9, 2008 11:35 AM by virtutour

    What's the simplest way of getting my web-site in the middle

    virtutour Level 1
      Hello

      Im currently in the process of updating my web-site.

      You can see the bare bones here:

      www.virtutour.com/new_web_site

      Now before I go any further I would like to get the foundations right now and make it so the whole thing is horizontally in the middle of the page.whatever screen it is viewed on

      Ive looked this up but there are so many ways most of which are beyond my comprehension.
      What is the simplest way that works?

      Please find code attached

      Please note I am doing this using an old version of dreamweaver and know very little about direct coding.

      Many thanks in advance

      Masten

        • 1. Re: What's the simplest way of getting my web-site in the middle
          Ben M Adobe Community Professional
          Don't use absolute positioning. If you want your layout to appear in the center of the screen you can do the following:

          <div id="container">
          <div="content"></div>
          </div>

          Then your CSS would look like:

          #container {
          margin: 0 auto; /* This will do top of the page and center align*/
          }

          The content wouldn't really need any positioning since it is inside the container. Unfortunately, there is no way to center the design height-wise on the screen using CSS like this. I hope this is what you were looking for.
          • 2. Re: What's the simplest way of getting my web-site in the middle
            Level 7
            Wrong. You need to give the div#container a width for auto margins to have
            any effect - otherwise it will fill the width of the container, giving you
            auto margins of zero on left/right.

            #container { width:760px; margin:0 auto; }

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


            "SnakEyez02" <webforumsuser@macromedia.com> wrote in message
            news:g79pbm$mn9$1@forums.macromedia.com...
            > Don't use absolute positioning. If you want your layout to appear in the
            > center of the screen you can do the following:
            >
            > <div id="container">
            > <div="content"></div>
            > </div>
            >
            > Then your CSS would look like:
            >
            > #container {
            > margin: 0 auto; /* This will do top of the page and center align*/
            > }
            >
            > The content wouldn't really need any positioning since it is inside the
            > container. Unfortunately, there is no way to center the design
            > height-wise on
            > the screen using CSS like this. I hope this is what you were looking for.
            >

            • 3. Re: What's the simplest way of getting my web-site in the middle
              virtutour Level 1
              Thanks chaps

              Please bear with me as I do not usually do direct coding but just use dreamweaver 3.0's wysywig editor.

              I have tried creating a css style sheet using notepad and renaming it to .css with the content:

              #container { width:760px; margin:0 auto; }

              But then when I import the sytle sheet dreamweaver doesn't see it?
              Don't style sheets have to start with a full stop

              Very confused

              Masten
              • 4. Re: What's the simplest way of getting my web-site in the middle
                Level 7
                On Fri, 8 Aug 2008 13:30:49 +0000 (UTC), "virtutour"
                <webforumsuser@macromedia.com> wrote:

                >
                > #container { width:760px; margin:0 auto; }
                >
                > But then when I import the sytle sheet dreamweaver doesn't see it?
                > Don't style sheets have to start with a full stop
                >


                No - just a normal file name - usually like this main.css

                you are thinking of classes which do start with a full stop inside the
                style sheet

                --

                ~Malcolm~*...
                ~*
                • 5. Re: What's the simplest way of getting my web-site in the middle
                  Level 7
                  > Please bear with me as I do not usually do direct coding but just use
                  > dreamweaver 3.0's wysywig editor.

                  Be prepared for a long and tedious learning curve, then.

                  > But then when I import the sytle sheet dreamweaver doesn't see it?
                  > Don't style sheets have to start with a full stop

                  Let's see your code, please.

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


                  "virtutour" <webforumsuser@macromedia.com> wrote in message
                  news:g7hhq9$isj$1@forums.macromedia.com...
                  > Thanks chaps
                  >
                  > Please bear with me as I do not usually do direct coding but just use
                  > dreamweaver 3.0's wysywig editor.
                  >
                  > I have tried creating a css style sheet using notepad and renaming it to
                  > .css
                  > with the content:
                  >
                  > #container { width:760px; margin:0 auto; }
                  >
                  > But then when I import the sytle sheet dreamweaver doesn't see it?
                  > Don't style sheets have to start with a full stop
                  >
                  > Very confused
                  >
                  > Masten
                  >
                  >

                  • 6. What's the simplest way of getting my web-site in the middle
                    virtutour Level 1
                    Hi Malcom

                    "you are thinking of classes which do start with a full stop inside the
                    style sheet"

                    what I dont get is where

                    #container { width:760px; margin:0 auto; }

                    goes? In the css file? But dreamweaver wont read it?
                    -----------------------------------
                    'Be prepared for a long and tedious learning curve, then'

                    No problem, but the site will be very simple. Just a container for my work really.
                    ----------------------------------

                    Can I take this a step at a time. Please see code below which just has the main image in it. Id like to start off with just getting this centered hoiizontally.

                    • 7. Re: What's the simplest way of getting my web-site in the middle
                      Level 7
                      No code below, as you see below.

                      This -

                      #container { width:760px; margin:0 auto; }

                      goes in your stylesheet (either linked or embedded on the page).

                      It will style a page element with id="container".

                      DW reads it beautifully.

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


                      "virtutour" <webforumsuser@macromedia.com> wrote in message
                      news:g7i79f$bvb$1@forums.macromedia.com...
                      > Hi Malcom
                      >
                      > "you are thinking of classes which do start with a full stop inside the
                      > style sheet"
                      >
                      > what I dont get is where
                      >
                      > #container { width:760px; margin:0 auto; }
                      >
                      > goes? In the css file? But dreamweaver wont read it.
                      > -----------------------------------
                      > 'Be prepared for a long and tedious learning curve, then'
                      >
                      > No problem, but the site will be very simple. Just a container for my work
                      > really.
                      > ----------------------------------
                      >
                      > Can I take this a step at a time. Please see code below which just has the
                      > main image in it.
                      >
                      >
                      >

                      • 8. Re: What's the simplest way of getting my web-site in the middle
                        Level 7
                        On Fri, 8 Aug 2008 19:37:19 +0000 (UTC), "virtutour"
                        <webforumsuser@macromedia.com> wrote:

                        >Hi Malcom
                        >
                        > "you are thinking of classes which do start with a full stop inside the
                        > style sheet"
                        >
                        > what I dont get is where
                        >
                        > #container { width:760px; margin:0 auto; }
                        >
                        > goes? In the css file? But dreamweaver wont read it.



                        classes - which can be used as many times as you want on a page.

                        in the style sheet they look like this

                        .aclass { ..... }


                        an id which can only be used ONCE in a page

                        in the style sheet they look lile this

                        #anID { ....}


                        note that an ID has a higher significant - and scores higer in
                        "specificity" - so an ID with the same name as a class will overrule a
                        class of the same name.


                        --

                        ~Malcolm~*...
                        ~*
                        • 9. Re: What's the simplest way of getting my web-site in the middle
                          Level 7
                          > note that an ID has a higher significant - and scores higer in
                          > "specificity" - so an ID with the same name as a class will overrule a
                          > class of the same name.

                          Having an ID and a class with the same name sounds like confusion to me.
                          Better to say that if both an ID and a class apply to the same element, the
                          ID's rule will override any conflicting styles from the class, e.g.,

                          #this { color:red; }
                          .that { color:blue; }

                          ...

                          <p id="this" class="that">This text is red.</p>


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


                          "Malcolm _" <malcom@mon.org> wrote in message
                          news:5q9p94tbktb6jan0t6q897b80urmoo0g3h@4ax.com...
                          > On Fri, 8 Aug 2008 19:37:19 +0000 (UTC), "virtutour"
                          > <webforumsuser@macromedia.com> wrote:
                          >
                          >>Hi Malcom
                          >>
                          >> "you are thinking of classes which do start with a full stop inside the
                          >> style sheet"
                          >>
                          >> what I dont get is where
                          >>
                          >> #container { width:760px; margin:0 auto; }
                          >>
                          >> goes? In the css file? But dreamweaver wont read it.
                          >
                          >
                          >
                          > classes - which can be used as many times as you want on a page.
                          >
                          > in the style sheet they look like this
                          >
                          > .aclass { ..... }
                          >
                          >
                          > an id which can only be used ONCE in a page
                          >
                          > in the style sheet they look lile this
                          >
                          > #anID { ....}
                          >
                          >
                          > note that an ID has a higher significant - and scores higer in
                          > "specificity" - so an ID with the same name as a class will overrule a
                          > class of the same name.
                          >
                          >
                          > --
                          >
                          > ~Malcolm~*...
                          > ~*

                          • 10. Re: What's the simplest way of getting my web-site in the middle
                            Level 7
                            On Fri, 8 Aug 2008 16:29:17 -0400, "Murray *ACE*"
                            <forums@HAHAgreat-web-sights.com> wrote:


                            >
                            >Having an ID and a class with the same name sounds like confusion to me.
                            >Better to say that if both an ID and a class apply to the same element, the
                            >ID's rule will override any conflicting styles from the class, e.g.,
                            >
                            >#this { color:red; }
                            >.that { color:blue; }
                            >
                            >...
                            >
                            ><p id="this" class="that">This text is red.</p>


                            I agree - and always try not to use the same name for id's as I do for
                            classes.

                            --

                            ~Malcolm~*...
                            ~*
                            • 11. What's the simplest way of getting my web-site in the middle
                              virtutour Level 1
                              OK. Kind of got this to work in netscape 7..Doesnt work in IE6? It's also not in the middle but over to one side.
                              • 12. Re: What's the simplest way of getting my web-site in the middle
                                Level 7
                                .oO(virtutour)

                                >OK. Got this to work in netscape 7.. Doesnt work in IE6?

                                The DOCTYPE is missing, which will kick IE and most other browsers into
                                quirks mode.

                                > <body bgcolor="00053F">

                                Use CSS for background colors.

                                Micha
                                • 13. Re: What's the simplest way of getting my web-site in the middle
                                  virtutour Level 1
                                  Hi Michaal
                                  Sorry havent got a clue what DOCTYPE is, and where does it go in the code?
                                  Thanks
                                  Masten
                                  • 14. Re: What's the simplest way of getting my web-site in the middle
                                    Level 7
                                    On Sat, 9 Aug 2008 09:45:24 +0000 (UTC), "virtutour"
                                    <webforumsuser@macromedia.com> wrote:

                                    >Hi Michaal
                                    >Sorry havent got a clue what DOCTYPE is, and where does it go in the code?
                                    >Thanks
                                    >Masten


                                    As Murry said " Be prepared for a long and tedious learning curve,
                                    then." :-)

                                    I would throughly recommend that before you do any more you beg,
                                    borrow or otherswise aquire a copy of this book.

                                    HTML,XHTML & CSS by Elizabeth Castro –
                                    very comprehensive, readable and attractive book explains all - ( or
                                    most at least )
                                    http://www.cookwood.com/html6ed/contents/index.html


                                    But OK - what is a DOCTYPE - well if you create a website from scratch
                                    it would bt default set up a page with a complete DOCTYPE.

                                    Dw8 and Dw CS3 set up a default XHTML 1.0 Transitional doctype like
                                    this.


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


                                    so it would seem the websites you have aquired cam from another html
                                    editor - or were produced in a nonstandard way.

                                    It is recommended that all websites have a doctype - as this amongst
                                    other things ensures the browsers render the page in the way that you
                                    would expect.

                                    But no matter - Dw can convert an existing page to give you a DOCTYPE
                                    and convert all code to the correct format.

                                    Just use File | Convert - and select the type yopu want. Most of us
                                    here would seem to use XHTML 1.0 - but beware some people still
                                    believe we should use HTML 4 - :-)


                                    Doctypes are described here.
                                    http://en.wikipedia.org/wiki/Doctype
                                    --

                                    ~Malcolm~*...
                                    ~*
                                    • 15. Re: What's the simplest way of getting my web-site in the middle
                                      Level 7
                                      On Sat, 9 Aug 2008 09:45:24 +0000 (UTC), "virtutour"
                                      <webforumsuser@macromedia.com> wrote:

                                      >Hi Michaal
                                      >Sorry havent got a clue what DOCTYPE is, and where does it go in the code?
                                      >Thanks
                                      >Masten


                                      sorry meant to add this link as well:


                                      http://www.w3.org/QA/2002/04/valid-dtd-list.html
                                      --

                                      ~Malcolm~*...
                                      ~*
                                      • 16. Re: What's the simplest way of getting my web-site in the middle
                                        virtutour Level 1
                                        Hi Malcom

                                        It works! Thanks for that.

                                        Well, getting elements centered anyway.

                                        How do I now get the java applet to sit on top of the image in the box.

                                        Here's what it looks like so far

                                        www.virtutour.com/new_web_site

                                        Thanks

                                        Masten
                                        • 17. Re: What's the simplest way of getting my web-site in the middle
                                          Level 7
                                          On Sat, 9 Aug 2008 15:03:32 +0000 (UTC), "virtutour"
                                          <webforumsuser@macromedia.com> wrote:

                                          >Hi Malcom
                                          >
                                          > It works! Thanks for that.
                                          >
                                          > Well, getting elements centered anyway.
                                          >
                                          > How do I now get the java applet to sit on top of the image in the box.
                                          >
                                          > Here's what it looks like so far
                                          >
                                          > http://www.virtutour.com/new_web_site
                                          >
                                          > Thanks

                                          You've lost me now !!!

                                          --

                                          ~Malcolm~*...
                                          ~*
                                          • 18. Re: What's the simplest way of getting my web-site in the middle
                                            virtutour Level 1
                                            Dont know how else to explain it.

                                            How do you get the applet on top of the graphic rather than it being underneath. Ive got a feeling, though, this is impossible using css, and I have to use centered tables and cut the graphic up and place it around tha applet.

                                            Its funny, from a non-coders perspective, you would've thought that the seemingly simple desire to just centre a web-site would be an easy thing. How wrong could I have been!