14 Replies Latest reply on Nov 3, 2008 9:25 AM by PaulBill

    CSS question

    HamptonCaught
      OK, I know, but I'm doing my best. I'm just making the transition from GoLive to Dreamweaver (because I think I ought to) and as if that wasn't enough, I'm also determined to produce the first page I do using CSS rather than tables (which is how I used to work).

      Actually, the first page is incredibly simple. It consists of an image in the middle of the page - no text or anything else to be added. All the other pages in the site will follow the same style, although some will have text and images added (but the basic central design area will always be the same pixel size). I am absolutely swimming in treacle at the moment. Can anyone out there give me a basic idea of what I need to do to fix this first image to a central position on the page. I've tried wrapping it in a <div> tag and allocating a style to that but nothing I do has worked so far.

      I'm a beginner in Dreamweaver (though I'm finding my way around it pretty quickly) and an absolute beginner in CSS, so please go easy on me.

      Thank you for any help.
        • 1. Re: CSS question
          Level 7
          A suggestion.

          Try making a site with DW templates. They all use template and CSS. And
          start from there.

          Otherwise look at this post for centering page.
          http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=12&catid=189&threadid =1347622&highlight_key=y&keyword1=Centering%20page


          "HamptonCaught" <webforumsuser@macromedia.com> wrote in message
          news:ge7ckk$joj$1@forums.macromedia.com...
          > OK, I know, but I'm doing my best. I'm just making the transition from
          > GoLive
          > to Dreamweaver (because I think I ought to) and as if that wasn't enough,
          > I'm
          > also determined to produce the first page I do using CSS rather than
          > tables
          > (which is how I used to work).
          >
          > Actually, the first page is incredibly simple. It consists of an image in
          > the
          > middle of the page - no text or anything else to be added. All the other
          > pages
          > in the site will follow the same style, although some will have text and
          > images
          > added (but the basic central design area will always be the same pixel
          > size). I
          > am absolutely swimming in treacle at the moment. Can anyone out there give
          > me a
          > basic idea of what I need to do to fix this first image to a central
          > position
          > on the page. I've tried wrapping it in a <div> tag and allocating a style
          > to
          > that but nothing I do has worked so far.
          >
          > I'm a beginner in Dreamweaver (though I'm finding my way around it pretty
          > quickly) and an absolute beginner in CSS, so please go easy on me.
          >
          > Thank you for any help.
          >


          • 2. Re: CSS question
            HamptonCaught Level 1
            Many thanks for the quick reply Alain. I'll do as you suggest and post if I have further problems.

            Thanks again.
            • 3. Re: CSS question
              Level 7
              > Actually, the first page is incredibly simple. It consists of an image in
              > the
              > middle of the page - no text or anything else to be added.

              You know that this is a bad design decision, right?

              For the rest, try this -

              Taking a Fireworks comp to a CSS-based layout in Dreamweaver
              http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
              http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html


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


              "HamptonCaught" <webforumsuser@macromedia.com> wrote in message
              news:ge7ckk$joj$1@forums.macromedia.com...
              > OK, I know, but I'm doing my best. I'm just making the transition from
              > GoLive
              > to Dreamweaver (because I think I ought to) and as if that wasn't enough,
              > I'm
              > also determined to produce the first page I do using CSS rather than
              > tables
              > (which is how I used to work).
              >
              > Actually, the first page is incredibly simple. It consists of an image in
              > the
              > middle of the page - no text or anything else to be added. All the other
              > pages
              > in the site will follow the same style, although some will have text and
              > images
              > added (but the basic central design area will always be the same pixel
              > size). I
              > am absolutely swimming in treacle at the moment. Can anyone out there give
              > me a
              > basic idea of what I need to do to fix this first image to a central
              > position
              > on the page. I've tried wrapping it in a <div> tag and allocating a style
              > to
              > that but nothing I do has worked so far.
              >
              > I'm a beginner in Dreamweaver (though I'm finding my way around it pretty
              > quickly) and an absolute beginner in CSS, so please go easy on me.
              >
              > Thank you for any help.
              >

              • 4. CSS question
                cripaustin Level 1
                Hi. I'm not sure if it's possible to centre a div vertically on the page. But to make your basic div tag, centered in the Horizontal middle of your page, and a certain distance from the top of the screen (to get your started) do the following:

                1) make a .css file. e.g test.css
                2) make the formatting for the div tag:

                #test_centre {margin: auto; margin-top: 300px; width: 100px; height: 100px}

                3)on your html page you have to attach the style sheet (click the STYLE drop down list at the bottom of the page, in the properties window, and click ATTACH STYLE SHEET..and then its self explanatory .
                4)insert div > (from the layout part of the INSERT toolbar) then simply go to the drop down list called ID. then select the #test_centre div. And your done. To add background and change various settings, you do the editing in the CSS page.

                I'm still learning, so don't hold me to anything I've just said....If I need correcting, fair play.

                Chris
                • 5. Re: CSS question
                  Level 7
                  This would be the CSS for what you are trying to accomplish...

                  body {
                  background-image: (insert namd and location of background image);
                  position: fixed;
                  background-repeat: no-repeat;
                  background-position: center center;
                  }


                  "HamptonCaught" <webforumsuser@macromedia.com> wrote in message
                  news:ge7ckk$joj$1@forums.macromedia.com...
                  > OK, I know, but I'm doing my best. I'm just making the transition from
                  > GoLive
                  > to Dreamweaver (because I think I ought to) and as if that wasn't enough,
                  > I'm
                  > also determined to produce the first page I do using CSS rather than
                  > tables
                  > (which is how I used to work).
                  >
                  > Actually, the first page is incredibly simple. It consists of an image in
                  > the
                  > middle of the page - no text or anything else to be added. All the other
                  > pages
                  > in the site will follow the same style, although some will have text and
                  > images
                  > added (but the basic central design area will always be the same pixel
                  > size). I
                  > am absolutely swimming in treacle at the moment. Can anyone out there give
                  > me a
                  > basic idea of what I need to do to fix this first image to a central
                  > position
                  > on the page. I've tried wrapping it in a <div> tag and allocating a style
                  > to
                  > that but nothing I do has worked so far.
                  >
                  > I'm a beginner in Dreamweaver (though I'm finding my way around it pretty
                  > quickly) and an absolute beginner in CSS, so please go easy on me.
                  >
                  > Thank you for any help.
                  >


                  • 6. Re: CSS question
                    HamptonCaught Level 1
                    Thanks guys - I really appreciate all the help. That should keep me quiet for the next couple of hours, if nothing else.
                    • 7. Re: CSS question
                      Level 7
                      Not me... I like to scream while Im pulling my hair out...


                      "HamptonCaught" <webforumsuser@macromedia.com> wrote in message
                      news:ge7f7g$n7c$1@forums.macromedia.com...
                      > Thanks guys - I really appreciate all the help. That should keep me quiet
                      > for the next couple of hours, if nothing else.


                      • 8. Re: CSS question
                        Level 7
                        > #test_centre {margin: auto; margin-top:auto; width: 100px; height: 100px}

                        'margin:auto;' would set all four margins to auto, so there would be no need
                        to reiterate the 'margin-top' style. However, margin-top:auto (whether
                        stated explicitly or implicitly) would only work for the height of the PAGE,
                        not of the viewport in the browser.

                        Take a look at this page in CS4 -

                        <!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>Untitled Document</title>
                        <meta http-equiv="imagetoolbar" content="no" />
                        <meta name="MSSmartTagsPreventParsing" content="TRUE" />
                        <meta name="robots" content="index,follow" />
                        <style type="text/css">
                        #foo { margin:auto; border:1px solid red; width:100px; height:100px; }
                        </style></head>

                        <body>
                        <div id="foo"></div>
                        </body>
                        </html>

                        and you will see that the div is sitting right at the top margin because
                        it's the only markup on the page.

                        If you MUST have vertical centering (I think it's a wasted effort), read
                        this -

                        http://www.apptools.com/examples/tableheight.php


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


                        "cripaustin" <webforumsuser@macromedia.com> wrote in message
                        news:ge7erb$mp0$1@forums.macromedia.com...
                        > Hi. I'm not sure if it's possible to centre a div vertically on the page.
                        > But
                        > to make your basic div tag, centered in the Horizontal middle of your
                        > page, and
                        > a certain distance from the top of the screen (to get your started) do the
                        > following:
                        >
                        > 1) make a .css file. e.g test.css
                        > 2) make the formatting for the div tag:
                        >
                        > #test_centre {margin: auto; margin-top:auto; width: 100px; height: 100px}
                        >
                        > 3)on your html page you have to attach the style sheet (click the STYLE
                        > drop
                        > down list at the bottom of the page, in the properties window, and click
                        > ATTACH
                        > STYLE SHEET..and then its self explanatory .
                        > 4)insert div > (from the layout part of the INSERT toolbar) then simply go
                        > to
                        > the drop down list called ID. then select the #test_centre div. And your
                        > done.
                        > To add background and change various settings, you do the editing in the
                        > CSS
                        > page.
                        >
                        > I'm still learning, so don't hold me to anything I've just said....If I
                        > need
                        > correcting, fair play.
                        >
                        > Chris
                        >

                        • 9. Re: CSS question
                          Level 7
                          Huh? Once again, that will only find the center of the *page*, not the
                          center of the viewport. And the position:fixed is unnecessary completely.
                          Try that CSS on a page with no content, and you may be completely surprised
                          to not see any image.

                          (your background-image syntax is wrong)

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


                          "GPaul" <gwpaul@ptd.net> wrote in message
                          news:ge7esb$mpo$1@forums.macromedia.com...
                          > This would be the CSS for what you are trying to accomplish...
                          >
                          > body {
                          > background-image: (insert namd and location of background image);
                          > position: fixed;
                          > background-repeat: no-repeat;
                          > background-position: center center;
                          > }
                          >
                          >
                          > "HamptonCaught" <webforumsuser@macromedia.com> wrote in message
                          > news:ge7ckk$joj$1@forums.macromedia.com...
                          >> OK, I know, but I'm doing my best. I'm just making the transition from
                          >> GoLive
                          >> to Dreamweaver (because I think I ought to) and as if that wasn't enough,
                          >> I'm
                          >> also determined to produce the first page I do using CSS rather than
                          >> tables
                          >> (which is how I used to work).
                          >>
                          >> Actually, the first page is incredibly simple. It consists of an image in
                          >> the
                          >> middle of the page - no text or anything else to be added. All the other
                          >> pages
                          >> in the site will follow the same style, although some will have text and
                          >> images
                          >> added (but the basic central design area will always be the same pixel
                          >> size). I
                          >> am absolutely swimming in treacle at the moment. Can anyone out there
                          >> give me a
                          >> basic idea of what I need to do to fix this first image to a central
                          >> position
                          >> on the page. I've tried wrapping it in a <div> tag and allocating a style
                          >> to
                          >> that but nothing I do has worked so far.
                          >>
                          >> I'm a beginner in Dreamweaver (though I'm finding my way around it pretty
                          >> quickly) and an absolute beginner in CSS, so please go easy on me.
                          >>
                          >> Thank you for any help.
                          >>
                          >
                          >

                          • 10. Re: CSS question
                            Level 7
                            It showed up...what were you refering to?


                            "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                            news:ge7fg4$nme$1@forums.macromedia.com...
                            > Huh? Once again, that will only find the center of the *page*, not the
                            > center of the viewport. And the position:fixed is unnecessary completely.
                            > Try that CSS on a page with no content, and you may be completely
                            > surprised to not see any image.
                            >
                            > (your background-image syntax is wrong)
                            >
                            > --
                            > 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
                            > ==================
                            >
                            >
                            > "GPaul" <gwpaul@ptd.net> wrote in message
                            > news:ge7esb$mpo$1@forums.macromedia.com...
                            >> This would be the CSS for what you are trying to accomplish...
                            >>
                            >> body {
                            >> background-image: (insert namd and location of background image);
                            >> position: fixed;
                            >> background-repeat: no-repeat;
                            >> background-position: center center;
                            >> }
                            >>
                            >>
                            >> "HamptonCaught" <webforumsuser@macromedia.com> wrote in message
                            >> news:ge7ckk$joj$1@forums.macromedia.com...
                            >>> OK, I know, but I'm doing my best. I'm just making the transition from
                            >>> GoLive
                            >>> to Dreamweaver (because I think I ought to) and as if that wasn't
                            >>> enough, I'm
                            >>> also determined to produce the first page I do using CSS rather than
                            >>> tables
                            >>> (which is how I used to work).
                            >>>
                            >>> Actually, the first page is incredibly simple. It consists of an image
                            >>> in the
                            >>> middle of the page - no text or anything else to be added. All the other
                            >>> pages
                            >>> in the site will follow the same style, although some will have text and
                            >>> images
                            >>> added (but the basic central design area will always be the same pixel
                            >>> size). I
                            >>> am absolutely swimming in treacle at the moment. Can anyone out there
                            >>> give me a
                            >>> basic idea of what I need to do to fix this first image to a central
                            >>> position
                            >>> on the page. I've tried wrapping it in a <div> tag and allocating a
                            >>> style to
                            >>> that but nothing I do has worked so far.
                            >>>
                            >>> I'm a beginner in Dreamweaver (though I'm finding my way around it
                            >>> pretty
                            >>> quickly) and an absolute beginner in CSS, so please go easy on me.
                            >>>
                            >>> Thank you for any help.
                            >>>
                            >>
                            >>
                            >


                            • 11. Re: CSS question
                              Level 7
                              If there is no content, the page height would be tiny. Since a background
                              image doesn't affect the height of its container, you would likely not see
                              the background.

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


                              "GPaul" <gwpaul@ptd.net> wrote in message
                              news:ge7g6p$oln$1@forums.macromedia.com...
                              > It showed up...what were you refering to?
                              >
                              >
                              > "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                              > news:ge7fg4$nme$1@forums.macromedia.com...
                              >> Huh? Once again, that will only find the center of the *page*, not the
                              >> center of the viewport. And the position:fixed is unnecessary
                              >> completely. Try that CSS on a page with no content, and you may be
                              >> completely surprised to not see any image.
                              >>
                              >> (your background-image syntax is wrong)
                              >>
                              >> --
                              >> 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
                              >> ==================
                              >>
                              >>
                              >> "GPaul" <gwpaul@ptd.net> wrote in message
                              >> news:ge7esb$mpo$1@forums.macromedia.com...
                              >>> This would be the CSS for what you are trying to accomplish...
                              >>>
                              >>> body {
                              >>> background-image: (insert namd and location of background image);
                              >>> position: fixed;
                              >>> background-repeat: no-repeat;
                              >>> background-position: center center;
                              >>> }
                              >>>
                              >>>
                              >>> "HamptonCaught" <webforumsuser@macromedia.com> wrote in message
                              >>> news:ge7ckk$joj$1@forums.macromedia.com...
                              >>>> OK, I know, but I'm doing my best. I'm just making the transition from
                              >>>> GoLive
                              >>>> to Dreamweaver (because I think I ought to) and as if that wasn't
                              >>>> enough, I'm
                              >>>> also determined to produce the first page I do using CSS rather than
                              >>>> tables
                              >>>> (which is how I used to work).
                              >>>>
                              >>>> Actually, the first page is incredibly simple. It consists of an image
                              >>>> in the
                              >>>> middle of the page - no text or anything else to be added. All the
                              >>>> other pages
                              >>>> in the site will follow the same style, although some will have text
                              >>>> and images
                              >>>> added (but the basic central design area will always be the same pixel
                              >>>> size). I
                              >>>> am absolutely swimming in treacle at the moment. Can anyone out there
                              >>>> give me a
                              >>>> basic idea of what I need to do to fix this first image to a central
                              >>>> position
                              >>>> on the page. I've tried wrapping it in a <div> tag and allocating a
                              >>>> style to
                              >>>> that but nothing I do has worked so far.
                              >>>>
                              >>>> I'm a beginner in Dreamweaver (though I'm finding my way around it
                              >>>> pretty
                              >>>> quickly) and an absolute beginner in CSS, so please go easy on me.
                              >>>>
                              >>>> Thank you for any help.
                              >>>>
                              >>>
                              >>>
                              >>
                              >
                              >

                              • 12. Re: CSS question
                                Level 7
                                Try this:
                                Horizontal and Vertical centering
                                http://alt-web.com/vertical-center.html

                                View the source code to see how it's done.

                                Nancy O.
                                Alt-Web Design & Publishing
                                www.alt-web.com


                                • 13. Re: CSS question
                                  PaulBill
                                  Hi

                                  Still not having a great deal of luck with this, although Nancy's link helped a lot. I'm to the point where I'm centering the movie horizontally, but not vertically - it's stuck at the top of the window in all browsers.

                                  I'd be really grateful if someone could help with this last little 'push'.

                                  Here's my css;

                                  quote:

                                  @charset "UTF-8";
                                  html,body {margin:0; padding:0;font-size:90%;} /**non-IE browsers**/

                                  * html body{margin:0; padding:0; font-size:70%;} /**IE only**/
                                  body {
                                  width:100%;
                                  height:100%;
                                  text-align:center;
                                  background:#999966;
                                  }

                                  #centered {
                                  width: 50%;
                                  height: 50%;
                                  text-align: center;
                                  color: #999966;
                                  position: absolute;
                                  left: 285px; /*half the width of your container*/
                                  top: 210px; /*half the height of your container*/
                                  margin-left: -25px;
                                  margin-top: -25px;
                                  overflow:auto;/*scrollbars appear when needed*/
                                  }


                                  Her's my html;

                                  quote:

                                  <!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>Cream Ink :: Design and advertising for business</title>
                                  <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
                                  <link href="centered.css" rel="stylesheet" type="text/css" />
                                  </head>

                                  <body>
                                  <script type="text/javascript">
                                  AC_FL_RunContent( 'codebase',' http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','570','height','420','title','flash','src','Cream_Ink_web_home_3','quality','high','pl uginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=Shockwave Flash','movie','Cream_Ink_web_home_3' ); //end AC code
                                  </script><noscript>
                                  <div id="centered"> <!--begin centered -->
                                  <script type="text/javascript">
                                  AC_FL_RunContent( 'codebase',' http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','570','height','420','title','flash','src','Cream_Ink_web_home_3','quality','high','pl uginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=Shockwave Flash','movie','Cream_Ink_web_home_3' ); //end AC code
                                  </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="570" height="420" title="flash">
                                  <param name="movie" value="Cream_Ink_web_home_3.swf" />
                                  <param name="quality" value="high" />
                                  <embed src="Cream_Ink_web_home_3.swf" quality="high" pluginspage=" http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="570" height="420"></embed>
                                  </object></noscript>
                                  </div>
                                  <!--end left -->
                                  </div> <!--end centered -->
                                  </noscript>
                                  </body>
                                  </html>


                                  Many thanks for any help.
                                  • 14. Re: CSS question
                                    PaulBill Level 1
                                    Sorry - I should probably have said that the size of the movie that I'm trying to centre, is 420 pixels high x 570 pixels wide.