28 Replies Latest reply on Mar 8, 2012 10:32 AM by Nancy OShea

    Centering a completed web page and moving divs

    Monochrome24 Level 1

      Ok patience please as I'm still tiptoing around Dreamweaver... though I'm picking things up quickly in the 8 days of using it!

       

      Two parts to my problems :

      1) I have completed a basic set of web pages (keeping it simple) with a few graphical images inserted, header, rollover nav buttons etc; minimal CSS needed.

       

      I check it's appearance on Safari, Chrome etc and it is aligned left. HOW do I convince each page to centre when viewed on a browser?

      CAN I retro create and use some kind of CSS that will 'tell' the whole page to align centre? If so how please? Remembering code is still hieroglyphics to me....

       

      2) My pages are the same layout apart from differing divs/apdivs in the bottom half. When I check the look in a browser and narrow the page width to less than my layout the nav buttons one by one move 'down' to the next line!

      How can I lock or retain their relative position whatever the brower width?

       

      If you need to see my code promise not to laugh too loud. We all had to start somewhere!

        • 1. Re: Centering a completed web page and moving divs
          le_mac_man Level 1

          you need to have a wrapper DIV to wrap around all your other divs, then set the left and right margin of the wrapper div to "auto". That will centre everything.

           

          Try wrapping your navigation button in a wrapper div to wrap around them all so they don't "fall out" when you resize the browser page.

           

          APdivs can cause problems.

          1 person found this helpful
          • 2. Re: Centering a completed web page and moving divs
            Nancy OShea Adobe Community Professional & MVP

            you need to have a wrapper DIV to wrap around all your other divs, then set the left and right margin of the wrapper div to "auto". That will centre everything.

             

            That's only partly correct.  You don't need an outer division to center a page.  You can center the body.  But whichever way you do it, the container must have a width.   And your HTML page must have a valid document type.

             

            CSS

             

            body {

            width: 970px;  /**adjust width as req'd**/

            margin:0 auto; /**with width, this is centered**/

            }

             

             

            <body>

             

            your page content here

             

            </body>

             

             

            Nancy O.

            Alt-Web Design & Publishing

            Web | Graphics | Print | Media  Specialists 

            http://alt-web.com/

            http://twitter.com/altweb

            1 person found this helpful
            • 3. Re: Centering a completed web page and moving divs
              Monochrome24 Level 1

              Thanks from both of you!

               

              Being a newbie I was totally lost so I started again from scratch (luckily there are minimal things on my web pages!)

               

              I created a new html/css and worked them in tandem so now the page is centered and nothing 'drops off' when the browser view is compressed laterally!

               

              The Nav bar is comprised of a graduated image either end with four 'roll over' divs set in between (nothing new I guess!).

              But before I get another headache is it possible to create a 'drop down' menu (spry?) for just one of these rollovers for a certain page I need a list for?

               

              Thanks my peers....

              • 4. Re: Centering a completed web page and moving divs
                le_mac_man Level 1

                Nancy O. wrote:

                 

                That's only partly correct.  You don't need an outer division to center a page.  You can center the body.  But whichever way you do it, the container must have a width.   And your HTML page must have a valid document type.

                 

                Yes very true, I was just trying to keep things simple :-)

                • 5. Re: Centering a completed web page and moving divs
                  le_mac_man Level 1

                  Monochrome24 wrote:

                   

                  The Nav bar is comprised of a graduated image either end with four 'roll over' divs set in between (nothing new I guess!).

                  But before I get another headache is it possible to create a 'drop down' menu (spry?) for just one of these rollovers for a certain page I need a list for?

                   

                  Thanks my peers....

                   

                  Without actually seeing how your navigation looks it's hard to give accurate advice. Although if you were wanting to have a spry menu, you can use the spry menu feature for your entire navigation and only have sub categories (drop down) list for one of the menu items. You don't need to do a spry menu consisting of one button and it being a drop down.

                   

                  make sense?

                  • 6. Re: Centering a completed web page and moving divs
                    Monochrome24 Level 1

                    thanks le_mac_man

                     

                    here's a quick diagram to show what I have at the moment :

                     

                    web_sample.jpg

                    there are 6 divs; 4 have rollovers that will link to ohter pages.

                     

                    I am looking to get the orange one somehow have a drop down when that page is opened?

                     

                    if I have to create an entire navigation bar can I insert rollovers in the 3 ones that WON'T be used as a drop down spry thingy?

                    • 7. Re: Centering a completed web page and moving divs
                      Nancy OShea Adobe Community Professional & MVP

                      Image based rollover menus are not web friendly.

                       

                      1. Visually impaired people can't see them. 
                      2. Images won't be seen by search engines, screen readers or language translators. 
                      3. They're a colossal pain in the neck to edit later.

                       

                      CSS styled menus are much more efficient and a snap to edit in Dreamweaver.

                      http://alt-web.com/DEMOS/CSS-Horiz-menu-3.shtml

                       

                      If you don't want to code it yourself, use the Spry Menu widget

                      http://alt-web.com/DEMOS/Spry-test.html

                       

                       

                       

                      Nancy O.

                      Alt-Web Design & Publishing

                      Web | Graphics | Print | Media  Specialists 

                      http://alt-web.com/

                      http://twitter.com/altweb

                      1 person found this helpful
                      • 8. Re: Centering a completed web page and moving divs
                        Monochrome24 Level 1

                        Thanks for your immeasureable insight Nancy!

                         

                        I (wrongly) assumed that the provision of rollovers by DM was to make things simpler to design? Mine are inserted graduated black graphics to very vibrant orange as I took poor eyesight into account and each is name tagged.

                         

                        I just viewed your very helpful website and your CSS sample appears to have a very similar top navigation bar that 'rolls over' to what I am trying to achieve!!

                         

                        Being not that knowledgeable about coding and CSS (yet!) I can see from your sample that graduations can be achieved in CSS?

                         

                        I'm going to give this a try using my own Nav html/design then try applying your CSS with the relevant changes to suit my page.

                         

                        I'll keep you updated!

                         

                        *My next scream for help will probably be soon...

                        • 9. Re: Centering a completed web page and moving divs
                          Monochrome24 Level 1

                          Hi again Nancy....

                           

                          I have come on leaps and bounds in ALMOST completing my menu bar and how I wanted it to look.

                          I'm also understand (almost!) how to amend the satck of CSS commands to achieve my goals.

                           

                          However a couple of niggles are beyond me as you can see in the image attached :

                           

                          menu_latest.jpg

                           

                          1) I'm sort of happy with the gap shown left since I have idea HOW to insert the graduation there since the menu starts with 'Profile'

                          2) When the drop down opens there is a white line appearing, the width of the box

                          3) I simply can't make the drop down cildren the width of the menu boxes!

                          4) When the curser swipes the page it makes the drop down appear (should it?)

                           

                          here's the CSS if this helps!

                           

                          @charset "UTF-8";

                           

                           

                          /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

                           

                           

                          /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

                           

                           

                          /*******************************************************************************

                           

                           

                          LAYOUT INFORMATION: describes box model, positioning, z-order

                           

                           

                          *******************************************************************************/

                           

                           

                          /* The outermost container of the Menu Bar, an auto width box with no margin or padding */

                          ul.MenuBarHorizontal

                          {

                                    margin: 0;

                                    padding: 0;

                                    list-style-type: none;

                                    font-size: 100%;

                                    cursor: default;

                                    width: auto;

                          }

                          /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */

                          ul.MenuBarActive

                          {

                                    z-index: 1000;

                          }

                          /* Menu item containers, position children relative to this container and are a fixed width */

                          ul.MenuBarHorizontal li

                          {

                                    margin: 0;

                                    padding: 0;

                                    list-style-type: none;

                                    font-size: 100%;

                                    position: relative;

                                    text-align: center;

                                    width: 11.59em;

                                    float: right;

                                    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                    cursor: auto;

                          }

                          /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */

                          ul.MenuBarHorizontal ul

                          {

                                    margin: 0;

                                    padding: 0;

                                    list-style-type: none;

                                    font-size: 100%;

                                    z-index: 1020;

                                    cursor: default;

                                    width: 11.59em;

                                    position: relative;

                                    left: -1000em;

                                    top: 0.5em;

                          }

                          /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */

                          ul.MenuBarHorizontal ul.MenuBarSubmenuVisible

                          {

                                    left: auto;

                                    background-color: #000;

                          }

                          /* Menu item containers are same fixed width as parent */

                          ul.MenuBarHorizontal ul li

                          {

                                    width: 11.59em;

                                    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                    font-size: 14px;

                                    color: #FFF;

                                    text-align: center;

                                    border-top-style: none;

                                    border-right-style: none;

                                    border-bottom-style: none;

                                    border-left-style: none;

                                    float: right;

                          }

                          /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */

                          ul.MenuBarHorizontal ul ul

                          {

                                    position: absolute;

                                    margin-top: 0%;

                                    margin-left: 100%;

                          }

                          /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */

                          ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible

                          {

                                    left: auto;

                                    width: 11.59em;

                          }

                           

                           

                          /*******************************************************************************

                           

                           

                          DESIGN INFORMATION: describes color scheme, borders, fonts

                           

                           

                          *******************************************************************************/

                           

                           

                          /* Submenu containers have borders on all sides */

                          ul.MenuBarHorizontal ul

                          {

                                    border: 1px solid #CCC;

                          }

                          /* Menu items are a light gray block with padding and no text decoration */

                          ul.MenuBarHorizontal a

                          {

                                    display: block;

                                    cursor: pointer;

                                    background-color: #000000;

                                    text-decoration: none;

                                    background: #8c3c00; /* Old browsers */

                                    background: -moz-linear-gradient(top, #8c3c00 0%, #000000 25%, #010101 50%, #0a0a0a 53%, #4e4e4e 81%, #383838 93%, #1b1b1b 100%); /* FF3.6+ */

                                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8c3c00), color-stop(25%,#000000), color-stop(50%,#010101), color-stop(53%,#0a0a0a), color-stop(81%,#4e4e4e), color-stop(93%,#383838), color-stop(100%,#1b1b1b)); /* Chrome,Safari4+ */

                                    background: -webkit-linear-gradient(top, #8c3c00 0%,#000000 25%,#010101 50%,#0a0a0a 53%,#4e4e4e 81%,#383838 93%,#1b1b1b 100%); /* Chrome10+,Safari5.1+ */

                                    background: -o-linear-gradient(top, #8c3c00 0%,#000000 25%,#010101 50%,#0a0a0a 53%,#4e4e4e 81%,#383838 93%,#1b1b1b 100%); /* Opera 11.10+ */

                                    background: -ms-linear-gradient(top, #8c3c00 0%,#000000 25%,#010101 50%,#0a0a0a 53%,#4e4e4e 81%,#383838 93%,#1b1b1b 100%); /* IE10+ */

                                    background: linear-gradient(top, #8c3c00 0%,#000000 25%,#010101 50%,#0a0a0a 53%,#4e4e4e 81%,#383838 93%,#1b1b1b 100%); /* W3C */

                          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c3c00', endColorstr='#1b1b1b',GradientType=0 );

                                    border-left-width: 1px;

                                    border-left-style: solid;

                                    border-left-color: #000000;

                                    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                    font-size: 16px;

                                    color: #7C7C7E;

                                    padding-top: 0.5em;

                                    padding-right: 0.35em;

                                    padding-bottom: 0.5em;

                                    padding-left: 0.35em;

                                    border-right-style: solid;

                                    border-right-color: #000000;

                          }

                          /* Menu items that have mouse over or focus have a blue background and white text */

                          ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus

                          {

                                    background-color: #999;

                                    color: #FFF;

                                    background: #ff8b2a; /* Old browsers */

                                    background: -moz-linear-gradient(top, #ff8b2a 0%, #ef501a 25%, #ef501a 50%, #ef501a 53%, #aa3b12 85%, #aa3b12 93%, #7a140d 100%); /* FF3.6+ */

                                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8b2a), color-stop(25%,#ef501a), color-stop(50%,#ef501a), color-stop(53%,#ef501a), color-stop(85%,#aa3b12), color-stop(93%,#aa3b12), color-stop(100%,#7a140d)); /* Chrome,Safari4+ */

                                    background: -webkit-linear-gradient(top, #ff8b2a 0%,#ef501a 25%,#ef501a 50%,#ef501a 53%,#aa3b12 85%,#aa3b12 93%,#7a140d 100%); /* Chrome10+,Safari5.1+ */

                                    background: -o-linear-gradient(top, #ff8b2a 0%,#ef501a 25%,#ef501a 50%,#ef501a 53%,#aa3b12 85%,#aa3b12 93%,#7a140d 100%); /* Opera 11.10+ */

                                    background: -ms-linear-gradient(top, #ff8b2a 0%,#ef501a 25%,#ef501a 50%,#ef501a 53%,#aa3b12 85%,#aa3b12 93%,#7a140d 100%); /* IE10+ */

                                    background: linear-gradient(top, #ff8b2a 0%,#ef501a 25%,#ef501a 50%,#ef501a 53%,#aa3b12 85%,#aa3b12 93%,#7a140d 100%); /* W3C */

                          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8b2a', endColorstr='#7a140d',GradientType=0 );

                          }

                           

                           

                          /*******************************************************************************

                           

                           

                          BROWSER HACKS: the hacks below should not be changed unless you are an expert

                           

                           

                          *******************************************************************************/

                           

                           

                          /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */

                          ul.MenuBarHorizontal iframe

                          {

                                    position: absolute;

                                    z-index: 1010;

                                    filter:alpha(opacity:0.1);

                          }

                          /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */

                          @media screen, projection

                          {

                                    ul.MenuBarHorizontal li.MenuBarItemIE

                                    {

                                              display: inline;

                                              f\loat: left;

                                              background: #FFF;

                                    }

                          }

                           

                           

                          Many thanks in advance!

                          • 10. Re: Centering a completed web page and moving divs
                            Nancy OShea Adobe Community Professional & MVP

                            Please show us a link to your page.  We need to look at your HTML, CSS and scripts all working together.

                             

                             

                            Nancy O.

                            Alt-Web Design & Publishing

                            Web | Graphics | Print | Media  Specialists 

                            http://alt-web.com/

                            http://twitter.com/altweb

                            • 11. Re: Centering a completed web page and moving divs
                              Monochrome24 Level 1

                              Is there anywhere I can 'upload' my page so you can see it all Nancy?

                               

                              If not I've copy/pasted all html/css below :

                               

                              (HTML)

                               

                              <!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>Handprint Design</title>

                              <style type="text/css">

                              body {

                                        background-color: #000;

                                        background-image: url(Images/background_grad.jpg);

                                        background-repeat: repeat-x;

                              }

                              </style>

                              <link href="CSS/layout.css" rel="stylesheet" type="text/css" />

                              <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

                              <script type="text/javascript">

                              function MM_preloadImages() { //v3.0

                                var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

                                  var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

                                  if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

                              }

                              </script>

                              <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

                              </head>

                               

                               

                              <body>

                              <div id="wrapper">

                                <div id="header panel"><img src="Images/handprint_panel.jpg" alt="header" width="960" height="190" border="0" usemap="#Map" />

                                  <ul id="MenuBar1" class="MenuBarHorizontal">

                              <li><a href="#">CONTACT</a></li>

                              <li><a class="MenuBarItemSubmenu" href="#">SERVICES</a>

                                <ul>

                                  <li><a href="#">web design</a></li>

                                  <li><a href="#">design to print</a></li>

                                  <li><a href="#">retouching</a></li>

                                  <li><a href="#">advertising</a></li>

                                  <li><a href="#">brochures</a></li>

                                  <li><a href="#">catalogues</a></li>

                                  <li><a href="#">reports</a></li>

                                  <li><a href="#">logos and branding</a></li>

                                  <li><a href="#">illustration</a></li>

                                  <li><a href="#">packaging</a></li>

                                  <li><a href="#">manuals</a></li>

                                  <li><a href="#">cartography</a></li>

                                </ul>

                              </li>

                              <li><a href="#">HISTORY</a></li>

                              <li><a href="#">PROFILE</a></li>

                                  </ul>

                                  <map name="Map" id="Map">

                                    <area shape="poly" coords="128,167,71,128,31,103,47,41,94,11,134,66,152,77,174,41,185,41,185,114,178,141,144 ,169,128,166" href="index.html" />

                                  </map>

                                </div>

                              <div id="background"></div>

                              </div>

                              <script type="text/javascript">

                              var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                              </script>

                              </body>

                              </html>

                               

                              (LAYOUT CSS)

                               

                              @charset "UTF-8";

                              * {

                                        margin: 0px;

                                        padding: 0px;

                              }

                               

                               

                              a:active,

                              a:focus {outline:none}

                               

                               

                               

                               

                              #wrapper {

                                        background-color: #000;

                                        width: 960px;

                                        margin-right: auto;

                                        margin-left: auto;

                                        border-right-width: 1px;

                                        border-left-width: 1px;

                                        border-right-style: solid;

                                        border-left-style: solid;

                                        border-right-color: #FF8B23;

                                        border-left-color: #FF8B23;

                              }

                               

                               

                              #wrapper #header panel {

                                        height: 160px;

                                        background-color: #000;

                              }

                              panel #MenuBar1 {

                                        position: absolute;

                                        top: 50px;

                                        right: 0px;

                                        bottom: 0px;

                              }

                              a img {

                                        border-top-style: none;

                                        border-right-style: none;

                                        border-bottom-style: none;

                                        border-left-style: none;

                                        border-top-width: 0px;

                                        border-right-width: 0px;

                                        border-bottom-width: 0px;

                                        border-left-width: 0px;

                              }

                              /**end Horizontal drop-menus**/

                              #wrapper #background {

                                        background-color: #000;

                                        background-image: url(../Images/main_graduation.jpg);

                                        background-repeat: repeat-x;

                                        height: 582px;

                              }

                               

                              (SPRY MENU CSS)

                               

                              /* The outermost container of the Menu Bar, an auto width box with no margin or padding */

                              ul.MenuBarHorizontal

                              {

                                        margin: 0;

                                        padding: 0;

                                        list-style-type: none;

                                        font-size: 100%;

                                        cursor: default;

                                        width: auto;

                              }

                              /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */

                              ul.MenuBarActive

                              {

                                        z-index: 1000;

                              }

                              /* Menu item containers, position children relative to this container and are a fixed width */

                              ul.MenuBarHorizontal li

                              {

                                        margin: 0;

                                        padding: 0;

                                        list-style-type: none;

                                        font-size: 100%;

                                        position: relative;

                                        text-align: center;

                                        width: 11.59em;

                                        float: right;

                                        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                        cursor: auto;

                              }

                              /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */

                              ul.MenuBarHorizontal ul

                              {

                                        margin: 0;

                                        padding: 0;

                                        list-style-type: none;

                                        font-size: 100%;

                                        z-index: 1020;

                                        cursor: default;

                                        width: 11.59em;

                                        position: relative;

                                        left: -1000em;

                                        top: 0.5em;

                              }

                              /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */

                              ul.MenuBarHorizontal ul.MenuBarSubmenuVisible

                              {

                                        left: auto;

                                        background-color: #000;

                              }

                              /* Menu item containers are same fixed width as parent */

                              ul.MenuBarHorizontal ul li

                              {

                                        width: 11.59em;

                                        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                        font-size: 14px;

                                        color: #FFF;

                                        text-align: center;

                                        border-top-style: none;

                                        border-right-style: none;

                                        border-bottom-style: none;

                                        border-left-style: none;

                                        float: right;

                              }

                              /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */

                              ul.MenuBarHorizontal ul ul

                              {

                                        position: absolute;

                                        margin-top: 0%;

                                        margin-left: 100%;

                              }

                              /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */

                              ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible

                              {

                                        left: auto;

                                        width: 11.59em;

                              }

                               

                               

                              /*******************************************************************************

                               

                               

                              DESIGN INFORMATION: describes color scheme, borders, fonts

                               

                               

                              *******************************************************************************/

                               

                               

                              /* Submenu containers have borders on all sides */

                              ul.MenuBarHorizontal ul

                              {

                                        border: 1px solid #CCC;

                              }

                              /* Menu items are a light gray block with padding and no text decoration */

                              ul.MenuBarHorizontal a

                              {

                                        display: block;

                                        cursor: pointer;

                                        background-color: #000000;

                                        text-decoration: none;

                                        background: #8c3c00; /* Old browsers */

                                        background: -moz-linear-gradient(top, #8c3c00 0%, #000000 25%, #010101 50%, #0a0a0a 53%, #4e4e4e 81%, #383838 93%, #1b1b1b 100%); /* FF3.6+ */

                                        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8c3c00), color-stop(25%,#000000), color-stop(50%,#010101), color-stop(53%,#0a0a0a), color-stop(81%,#4e4e4e), color-stop(93%,#383838), color-stop(100%,#1b1b1b)); /* Chrome,Safari4+ */

                                        background: -webkit-linear-gradient(top, #8c3c00 0%,#000000 25%,#010101 50%,#0a0a0a 53%,#4e4e4e 81%,#383838 93%,#1b1b1b 100%); /* Chrome10+,Safari5.1+ */

                                        background: -o-linear-gradient(top, #8c3c00 0%,#000000 25%,#010101 50%,#0a0a0a 53%,#4e4e4e 81%,#383838 93%,#1b1b1b 100%); /* Opera 11.10+ */

                                        background: -ms-linear-gradient(top, #8c3c00 0%,#000000 25%,#010101 50%,#0a0a0a 53%,#4e4e4e 81%,#383838 93%,#1b1b1b 100%); /* IE10+ */

                                        background: linear-gradient(top, #8c3c00 0%,#000000 25%,#010101 50%,#0a0a0a 53%,#4e4e4e 81%,#383838 93%,#1b1b1b 100%); /* W3C */

                              filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c3c00', endColorstr='#1b1b1b',GradientType=0 );

                                        border-left-width: 1px;

                                        border-left-style: solid;

                                        border-left-color: #000000;

                                        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                        font-size: 16px;

                                        color: #7C7C7E;

                                        padding-top: 0.5em;

                                        padding-right: 0.35em;

                                        padding-bottom: 0.5em;

                                        padding-left: 0.35em;

                                        border-right-style: solid;

                                        border-right-color: #000000;

                              }

                              /* Menu items that have mouse over or focus have a blue background and white text */

                              ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus

                              {

                                        background-color: #999;

                                        color: #FFF;

                                        background: #ff8b2a; /* Old browsers */

                                        background: -moz-linear-gradient(top, #ff8b2a 0%, #ef501a 25%, #ef501a 50%, #ef501a 53%, #aa3b12 85%, #aa3b12 93%, #7a140d 100%); /* FF3.6+ */

                                        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8b2a), color-stop(25%,#ef501a), color-stop(50%,#ef501a), color-stop(53%,#ef501a), color-stop(85%,#aa3b12), color-stop(93%,#aa3b12), color-stop(100%,#7a140d)); /* Chrome,Safari4+ */

                                        background: -webkit-linear-gradient(top, #ff8b2a 0%,#ef501a 25%,#ef501a 50%,#ef501a 53%,#aa3b12 85%,#aa3b12 93%,#7a140d 100%); /* Chrome10+,Safari5.1+ */

                                        background: -o-linear-gradient(top, #ff8b2a 0%,#ef501a 25%,#ef501a 50%,#ef501a 53%,#aa3b12 85%,#aa3b12 93%,#7a140d 100%); /* Opera 11.10+ */

                                        background: -ms-linear-gradient(top, #ff8b2a 0%,#ef501a 25%,#ef501a 50%,#ef501a 53%,#aa3b12 85%,#aa3b12 93%,#7a140d 100%); /* IE10+ */

                                        background: linear-gradient(top, #ff8b2a 0%,#ef501a 25%,#ef501a 50%,#ef501a 53%,#aa3b12 85%,#aa3b12 93%,#7a140d 100%); /* W3C */

                              filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8b2a', endColorstr='#7a140d',GradientType=0 );

                              }

                               

                               

                              /*******************************************************************************

                               

                               

                              BROWSER HACKS: the hacks below should not be changed unless you are an expert

                               

                               

                              *******************************************************************************/

                               

                               

                              /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */

                              ul.MenuBarHorizontal iframe

                              {

                                        position: absolute;

                                        z-index: 1010;

                                        filter:alpha(opacity:0.1);

                              }

                              /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */

                              @media screen, projection

                              {

                                        ul.MenuBarHorizontal li.MenuBarItemIE

                                        {

                                                  display: inline;

                                                  f\loat: left;

                                                  background: #FFF;

                                        }

                              }

                              • 12. Re: Centering a completed web page and moving divs
                                osgood_ Level 8

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

                                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                                <title>Handprint Design</title>

                                <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

                                 

                                <style type="text/css">

                                body {

                                background-color: #000;

                                background-image: url(Images/background_grad.jpg);

                                background-repeat: repeat-x;

                                 

                                }

                                * {

                                margin: 0px;

                                padding: 0px;

                                }

                                 

                                a:active, a:focus {outline:none}

                                 

                                #wrapper {

                                background-color: #000;

                                width: 960px;

                                margin: 0 auto;

                                border-right-width: 1px;

                                border-left-width: 1px;

                                border-right-style: solid;

                                border-left-style: solid;

                                border-right-color: #FF8B23;

                                border-left-color: #FF8B23;

                                overflow: hidden;

                                }

                                 

                                #wrapper #header panel {

                                height: 160px;

                                background-color: #000;

                                }

                                 

                                panel #MenuBar1 {

                                position: absolute;

                                top: 50px;

                                right: 0px;

                                bottom: 0px;

                                }

                                 

                                a img {

                                border-top-style: none;

                                border-right-style: none;

                                border-bottom-style: none;

                                border-left-style: none;

                                border-top-width: 0px;

                                border-right-width: 0px;

                                border-bottom-width: 0px;

                                border-left-width: 0px;

                                }

                                 

                                /**end Horizontal drop-menus**/

                                 

                                #wrapper #background {

                                background-color: #000;

                                background-image: url(../Images/main_graduation.jpg);

                                background-repeat: repeat-x;

                                height: 582px;

                                float: left;

                                width: 256px;

                                }

                                 

                                 

                                /* The outermost container of the Menu Bar, an auto width box with no margin or padding */

                                 

                                ul.MenuBarHorizontal {

                                margin: 0;

                                padding: 0;

                                list-style-type: none;

                                font-size: 100%;

                                cursor: default;

                                float: left;

                                width: 704px;

                                }

                                 

                                /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */

                                 

                                ul.MenuBarActive {

                                z-index: 1000;

                                }

                                 

                                /* Menu item containers, position children relative to this container and are a fixed width */

                                 

                                ul.MenuBarHorizontal li {

                                margin: 0;

                                padding: 0;

                                list-style-type: none;

                                font-size: 100%;

                                position: relative;

                                text-align: center;

                                width: 176px;

                                float: right;

                                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                cursor: auto;

                                 

                                }

                                 

                                /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */

                                 

                                ul.MenuBarHorizontal ul {

                                width: 176px;

                                margin: 0;

                                padding: 0;

                                list-style-type: none;

                                font-size: 100%;

                                z-index: 1020;

                                cursor: default;

                                position: relative;

                                left: -1000em;

                                }

                                 

                                /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */

                                 

                                ul.MenuBarHorizontal ul.MenuBarSubmenuVisible

                                {

                                left: auto;

                                background-color: #000;

                                }

                                 

                                /* Menu item containers are same fixed width as parent */

                                 

                                ul.MenuBarHorizontal ul li {

                                width: 176px;

                                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                font-size: 14px;

                                color: #FFF;

                                text-align: center;

                                margin: 0;

                                padding: 0;

                                }

                                 

                                /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */

                                 

                                ul.MenuBarHorizontal ul ul {

                                position: absolute;

                                width: 176px;

                                margin: 0;

                                padding: 0;

                                 

                                }

                                 

                                /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */

                                 

                                ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible

                                {

                                width: 176px;

                                margin: 0;

                                padding: 0;

                                }

                                 

                                 

                                 

                                 

                                 

                                /********************************************************************* **********

                                 

                                 

                                 

                                 

                                 

                                DESIGN INFORMATION: describes color scheme, borders, fonts

                                 

                                 

                                 

                                 

                                 

                                ********************************************************************* **********/

                                 

                                 

                                 

                                 

                                 

                                /* Menu items are a light gray block with padding and no text decoration */

                                 

                                ul.MenuBarHorizontal a

                                 

                                {

                                display: block;

                                cursor: pointer;

                                background-color: #000000;

                                text-decoration: none;

                                background: #8c3c00; /* Old browsers */

                                background: -moz-linear-gradient(top, #8c3c00 0%, #000000 25%, #010101 50%, #0a0a0a 53%, #4e4e4e 81%, #383838 93%, #1b1b1b 100%); /* FF3.6+ */

                                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8c3c00), color-stop(25%,#000000), color-stop(50%,#010101), color-stop(53%,#0a0a0a), color-stop(81%,#4e4e4e), color-stop(93%,#383838), color-stop(100%,#1b1b1b)); /* Chrome,Safari4+ */

                                background: -webkit-linear-gradient(top, #8c3c00 0%,#000000 25%,#010101 50%,#0a0a0a 53%,#4e4e4e 81%,#383838 93%,#1b1b1b 100%); /* Chrome10+,Safari5.1+ */

                                background: -o-linear-gradient(top, #8c3c00 0%,#000000 25%,#010101 50%,#0a0a0a 53%,#4e4e4e 81%,#383838 93%,#1b1b1b 100%); /* Opera 11.10+ */

                                background: -ms-linear-gradient(top, #8c3c00 0%,#000000 25%,#010101 50%,#0a0a0a 53%,#4e4e4e 81%,#383838 93%,#1b1b1b 100%); /* IE10+ */

                                background: linear-gradient(top, #8c3c00 0%,#000000 25%,#010101 50%,#0a0a0a 53%,#4e4e4e 81%,#383838 93%,#1b1b1b 100%); /* W3C */

                                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c3c00', endColorstr='#1b1b1b',GradientType=0 );

                                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                font-size: 16px;

                                color: #7C7C7E;

                                padding-top: 0.5em;

                                padding-bottom: 0.5em;

                                }

                                 

                                /* Menu items that have mouse over or focus have a blue background and white text */

                                 

                                ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {

                                background-color: #999;

                                color: #FFF;

                                background: #ff8b2a; /* Old browsers */

                                background: -moz-linear-gradient(top, #ff8b2a 0%, #ef501a 25%, #ef501a 50%, #ef501a 53%, #aa3b12 85%, #aa3b12 93%, #7a140d 100%); /* FF3.6+ */

                                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8b2a), color-stop(25%,#ef501a), color-stop(50%,#ef501a), color-stop(53%,#ef501a), color-stop(85%,#aa3b12), color-stop(93%,#aa3b12), color-stop(100%,#7a140d)); /* Chrome,Safari4+ */

                                background: -webkit-linear-gradient(top, #ff8b2a 0%,#ef501a 25%,#ef501a 50%,#ef501a 53%,#aa3b12 85%,#aa3b12 93%,#7a140d 100%); /* Chrome10+,Safari5.1+ */

                                background: -o-linear-gradient(top, #ff8b2a 0%,#ef501a 25%,#ef501a 50%,#ef501a 53%,#aa3b12 85%,#aa3b12 93%,#7a140d 100%); /* Opera 11.10+ */

                                background: -ms-linear-gradient(top, #ff8b2a 0%,#ef501a 25%,#ef501a 50%,#ef501a 53%,#aa3b12 85%,#aa3b12 93%,#7a140d 100%); /* IE10+ */

                                background: linear-gradient(top, #ff8b2a 0%,#ef501a 25%,#ef501a 50%,#ef501a 53%,#aa3b12 85%,#aa3b12 93%,#7a140d 100%); /* W3C */

                                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8b2a', endColorstr='#7a140d',GradientType=0 );

                                }

                                 

                                /********************************************************************* **********

                                 

                                BROWSER HACKS: the hacks below should not be changed unless you are an expert

                                 

                                ********************************************************************* **********/

                                 

                                /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */

                                 

                                ul.MenuBarHorizontal iframe {

                                position: absolute;

                                z-index: 1010;

                                filter:alpha(opacity:0.1);

                                }

                                 

                                /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */

                                 

                                @media screen, projection

                                 

                                {

                                ul.MenuBarHorizontal li.MenuBarItemIE {

                                display: inline;

                                f\loat: left;

                                background: #FFF;

                                }

                                }

                                 

                                </style>

                                 

                                <link href="CSS/layout.css" rel="stylesheet" type="text/css" />

                                 

                                <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

                                 

                                <script type="text/javascript">

                                 

                                function MM_preloadImages() { //v3.0

                                 

                                  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

                                 

                                    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

                                 

                                    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

                                 

                                }

                                 

                                </script>

                                 

                                <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

                                 

                                </head>

                                 

                                 

                                 

                                 

                                 

                                <body>

                                 

                                <div id="wrapper">

                                <div id="header panel"><img src="Images/handprint_panel.jpg" alt="header" width="960" height="190" border="0" usemap="#Map" />

                                <div id="background"></div>

                                <ul id="MenuBar1" class="MenuBarHorizontal">

                                <li><a href="#">CONTACT</a></li>

                                <li><a class="MenuBarItemSubmenu" href="#">SERVICES</a>

                                <ul>

                                <li><a href="#">web design</a></li>

                                <li><a href="#">design to print</a></li>

                                <li><a href="#">retouching</a></li>

                                <li><a href="#">advertising</a></li>

                                <li><a href="#">brochures</a></li>

                                <li><a href="#">catalogues</a></li>

                                <li><a href="#">reports</a></li>

                                <li><a href="#">logos and branding</a></li>

                                <li><a href="#">illustration</a></li>

                                <li><a href="#">packaging</a></li>

                                <li><a href="#">manuals</a></li>

                                <li><a href="#">cartography</a></li>

                                </ul>

                                </li>

                                <li><a href="#">HISTORY</a></li>

                                <li><a href="#">PROFILE</a></li>

                                </ul>

                                 

                                <map name="Map" id="Map">

                                <area shape="poly" coords="128,167,71,128,31,103,47,41,94,11,134,66,152,77,174,41,185,41 ,185,114,178,141,144,169,128,166" href="index.html" />

                                </map>

                                </div>

                                </div>

                                 

                                <script type="text/javascript">

                                var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                </script>

                                </body>

                                </html>

                                1 person found this helpful
                                • 13. Re: Centering a completed web page and moving divs
                                  Monochrome24 Level 1

                                  many thanks 'osgood'

                                   

                                  I applied the relevant Spry CSS to mine with a few alterations for width and it's now neat and tidy! Still can't prevent the drop down appearing when cursing under the menu bar... I thought these only appeared when cursing ALONG the menu bar not under it?

                                   

                                  Thanks again mate.

                                  • 14. Re: Centering a completed web page and moving divs
                                    osgood_ Level 8

                                    Monochrome24 wrote:

                                     

                                    many thanks 'osgood'

                                     

                                    Still can't prevent the drop down appearing when cursing under the menu bar... I thought these only appeared when cursing ALONG the menu bar not under it?

                                     

                                     

                                     

                                    The drop downs only appear for me when mousing over the menu bar......that's in Firefox/Safari. If you want to upload the amended page somewhere I'll see if I can find out why its happening.

                                     

                                    I've stripped out a lot of css that wasnt required so if you have only 'cherry picked' my css then you could have left in something that shouldn't be there.

                                    • 15. Re: Centering a completed web page and moving divs
                                      Monochrome24 Level 1

                                      hmmm.... I've checked it on Safari, Chrome and Firefox and it does the  on all these browsers?

                                       

                                      I copy/pasted your CSS/html religiously, however I adjusted the menu bar width to where I had it before, aligned float right (not left) and the 4 menus (PROFILE, HISTORY etc) at a quarter total width :

                                       

                                      ul.MenuBarHorizontal {

                                      margin: 0;

                                      padding: 0;

                                      list-style-type: none;

                                      font-size: 100%;

                                      cursor: default;

                                      float: right;

                                      width: 740px;

                                      }

                                       

                                      ul.MenuBarHorizontal li {

                                      margin: 0;

                                      padding: 0;

                                      list-style-type: none;

                                      font-size: 100%;

                                      position: relative;

                                      text-align: center;

                                      width: 185px;

                                      float: right;

                                      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                      cursor: auto;

                                       

                                      It appears fine apart from in the HTML of my background graduation <div id="background"></div>

                                      which you cut from where it had been and pasted it above my menu bar <ul id="MenuBar1" class="MenuBarHorizontal">

                                       

                                      On the browser I now have a huge area of background with the menu bar tacked on the bottom on a very deep page? (not the 820 odd pixels I intended)

                                       

                                      three_samples.jpg

                                       

                                      What I am looking for is the menu bar on top of the background - not sitting below it or above it? I've no idea now where to paste the <div id="background"></div> to achieve what I had before mate :-(

                                       

                                      So where can I upload this pain of a web page?

                                      • 16. Re: Centering a completed web page and moving divs
                                        osgood_ Level 8

                                        Yeah good spot, not sure where 176px came from, my bad maths.

                                        Monochrome24 wrote:

                                         

                                        So where can I upload this pain of a web page?

                                         

                                        Paste your revised code/css here again and I'll look again. The html/css I've got here works ok both in Firefox and Safrai. i.e. no drop downs until you mosue over the menu item itself.

                                        • 17. Re: Centering a completed web page and moving divs
                                          Monochrome24 Level 1

                                          Guess it helped that I could see the result visually!

                                           

                                          Ok I've posted the code below as it stands - it is resulting in the middle image with the red tick and I need it to be the end double tick image osgood?

                                          the <div id="background"></div> is the bootom graduation that doesn't want to go where I want it!

                                           

                                          Thanks for all you guidance so far.

                                           

                                           

                                          HTML Source Code

                                           

                                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                                          <html xmlns="http://www.w3.org/1999/xhtml">

                                          <head>

                                          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                                          <title>Handprint Design</title>

                                          <style type="text/css">

                                          body {

                                                    background-color: #000;

                                                    background-image: url(Images/background_grad.jpg);

                                                    background-repeat: repeat-x;

                                          }

                                          </style>

                                          <link href="CSS/layout.css" rel="stylesheet" type="text/css" />

                                          <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

                                          <script type="text/javascript">

                                          function MM_preloadImages() { //v3.0

                                            var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

                                              var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

                                              if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

                                          }

                                          </script>

                                          <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

                                          </head>

                                           

                                          <body>

                                           

                                          <div id="wrapper">

                                          <div id="header panel"><img src="Images/handprint_panel.jpg" alt="header" width="960" height="190" border="0" usemap="#Map" />

                                           

                                           

                                          <ul id="MenuBar1" class="MenuBarHorizontal">

                                          <li><a href="#">CONTACT</a></li>

                                          <li><a class="MenuBarItemSubmenu" href="#">SERVICES</a>

                                          <ul>

                                          <li><a href="#">web design</a></li>

                                          <li><a href="#">design to print</a></li>

                                          <li><a href="#">retouching</a></li>

                                          <li><a href="#">advertising</a></li>

                                          <li><a href="#">brochures</a></li>

                                          <li><a href="#">catalogues</a></li>

                                          <li><a href="#">reports</a></li>

                                          <li><a href="#">logos and branding</a></li>

                                          <li><a href="#">illustration</a></li>

                                          <li><a href="#">packaging</a></li>

                                          <li><a href="#">manuals</a></li>

                                          <li><a href="#">cartography</a></li>

                                          </ul>

                                          </li>

                                          <li><a href="#">HISTORY</a></li>

                                          <li><a href="#">PROFILE</a></li>

                                          </ul>

                                          <div id="background"></div>

                                          <map name="Map" id="Map">

                                          <area shape="poly" coords="128,167,71,128,31,103,47,41,94,11,134,66,152,77,174,41,185,41 ,185,114,178,141,144,169,128,166" href="index.html" />

                                          </map>

                                          </div>

                                          </div>

                                          <script type="text/javascript">

                                          var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                          </script>

                                          </body>

                                          </html>

                                           

                                           

                                           

                                          LAYOUT CSS

                                           

                                           

                                          @charset "UTF-8";

                                          * {

                                          margin: 0px;

                                          padding: 0px;

                                          }

                                           

                                          a:active, a:focus {outline:none}

                                           

                                          #wrapper {

                                          background-color: #000;

                                          width: 960px;

                                          margin: 0 auto;

                                          border-right-width: 1px;

                                          border-left-width: 1px;

                                          border-right-style: solid;

                                          border-left-style: solid;

                                          border-right-color: #FF8B23;

                                          border-left-color: #FF8B23;

                                          overflow: hidden;

                                          }

                                           

                                          #wrapper #header panel {

                                          height: 160px;

                                          background-color: #000;

                                          }

                                           

                                          panel #MenuBar1 {

                                          position: absolute;

                                          top: 50px;

                                          right: 0px;

                                          bottom: 0px;

                                          }

                                           

                                          a img {

                                          border-top-style: none;

                                          border-right-style: none;

                                          border-bottom-style: none;

                                          border-left-style: none;

                                          border-top-width: 0px;

                                          border-right-width: 0px;

                                          border-bottom-width: 0px;

                                          border-left-width: 0px;

                                          }

                                           

                                          /**end Horizontal drop-menus**/

                                           

                                          #wrapper #background {

                                                    background-color: #000;

                                                    background-image: url(../Images/main_graduation.jpg);

                                                    background-repeat: repeat-x;

                                                    height: 582px;

                                                    float: left;

                                                    width: 960px;

                                          }

                                           

                                           

                                           

                                          SpryMenubarHorizontal.CSS

                                           

                                           

                                          @charset "UTF-8";

                                           

                                           

                                          /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

                                           

                                           

                                          /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

                                           

                                           

                                          /*******************************************************************************

                                           

                                          LAYOUT INFORMATION: describes box model, positioning, z-order

                                           

                                          *******************************************************************************/

                                           

                                          /* The outermost container of the Menu Bar, an auto width box with no margin or padding */

                                          ul.MenuBarHorizontal {

                                          margin: 0;

                                          padding: 0;

                                          list-style-type: none;

                                          font-size: 100%;

                                          cursor: default;

                                          float: right;

                                          width: 740px;

                                          }

                                           

                                          /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */

                                           

                                          ul.MenuBarActive {

                                          z-index: 1000;

                                          }

                                           

                                          /* Menu item containers, position children relative to this container and are a fixed width */

                                           

                                          ul.MenuBarHorizontal li {

                                          margin: 0;

                                          padding: 0;

                                          list-style-type: none;

                                          font-size: 100%;

                                          position: relative;

                                          text-align: center;

                                          width: 185px;

                                          float: right;

                                          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                          cursor: auto;

                                          }

                                           

                                          /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */

                                           

                                          ul.MenuBarHorizontal ul {

                                          width: 185px;

                                          margin: 0;

                                          padding: 0;

                                          list-style-type: none;

                                          font-size: 100%;

                                          z-index: 1020;

                                          cursor: default;

                                          position: relative;

                                          left: -1000em;

                                          }

                                           

                                          /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */

                                           

                                          ul.MenuBarHorizontal ul.MenuBarSubmenuVisible

                                          {

                                          left: auto;

                                          background-color: #000;

                                          }

                                           

                                          /* Menu item containers are same fixed width as parent */

                                           

                                          ul.MenuBarHorizontal ul li {

                                          width: 185px;

                                          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                          font-size: 14px;

                                          color: #FFF;

                                          text-align: center;

                                          margin: 0;

                                          padding: 0;

                                          }

                                           

                                          /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */

                                           

                                          ul.MenuBarHorizontal ul ul {

                                          position: absolute;

                                          width: 185px;

                                          margin: 0;

                                          padding: 0;

                                           

                                          }

                                           

                                          /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */

                                           

                                          ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible

                                          {

                                          width: 176px;

                                          margin: 0;

                                          padding: 0;

                                          }

                                           

                                           

                                           

                                          /********************************************************************* **********

                                           

                                          DESIGN INFORMATION: describes color scheme, borders, fonts

                                           

                                          ********************************************************************* **********/

                                           

                                          /* Menu items are a light gray block with padding and no text decoration */

                                           

                                          ul.MenuBarHorizontal a

                                           

                                          {

                                          display: block;

                                          cursor: pointer;

                                          background-color: #000000;

                                          text-decoration: none;

                                          background: #8c3c00; /* Old browsers */

                                          background: -moz-linear-gradient(top, #8c3c00 0%, #000000 25%, #010101 50%, #0a0a0a 53%, #4e4e4e 81%, #383838 93%, #1b1b1b 100%); /* FF3.6+ */

                                          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8c3c00), color-stop(25%,#000000), color-stop(50%,#010101), color-stop(53%,#0a0a0a), color-stop(81%,#4e4e4e), color-stop(93%,#383838), color-stop(100%,#1b1b1b)); /* Chrome,Safari4+ */

                                          background: -webkit-linear-gradient(top, #8c3c00 0%,#000000 25%,#010101 50%,#0a0a0a 53%,#4e4e4e 81%,#383838 93%,#1b1b1b 100%); /* Chrome10+,Safari5.1+ */

                                          background: -o-linear-gradient(top, #8c3c00 0%,#000000 25%,#010101 50%,#0a0a0a 53%,#4e4e4e 81%,#383838 93%,#1b1b1b 100%); /* Opera 11.10+ */

                                          background: -ms-linear-gradient(top, #8c3c00 0%,#000000 25%,#010101 50%,#0a0a0a 53%,#4e4e4e 81%,#383838 93%,#1b1b1b 100%); /* IE10+ */

                                          background: linear-gradient(top, #8c3c00 0%,#000000 25%,#010101 50%,#0a0a0a 53%,#4e4e4e 81%,#383838 93%,#1b1b1b 100%); /* W3C */

                                          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c3c00', endColorstr='#1b1b1b',GradientType=0 );

                                          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                                          font-size: 16px;

                                          color: #7C7C7E;

                                          padding-top: 0.5em;

                                          padding-bottom: 0.5em;

                                          }

                                           

                                          /* Menu items that have mouse over or focus have a blue background and white text */

                                           

                                          ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {

                                          background-color: #999;

                                          color: #FFF;

                                          background: #ff8b2a; /* Old browsers */

                                          background: -moz-linear-gradient(top, #ff8b2a 0%, #ef501a 25%, #ef501a 50%, #ef501a 53%, #aa3b12 85%, #aa3b12 93%, #7a140d 100%); /* FF3.6+ */

                                          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8b2a), color-stop(25%,#ef501a), color-stop(50%,#ef501a), color-stop(53%,#ef501a), color-stop(85%,#aa3b12), color-stop(93%,#aa3b12), color-stop(100%,#7a140d)); /* Chrome,Safari4+ */

                                          background: -webkit-linear-gradient(top, #ff8b2a 0%,#ef501a 25%,#ef501a 50%,#ef501a 53%,#aa3b12 85%,#aa3b12 93%,#7a140d 100%); /* Chrome10+,Safari5.1+ */

                                          background: -o-linear-gradient(top, #ff8b2a 0%,#ef501a 25%,#ef501a 50%,#ef501a 53%,#aa3b12 85%,#aa3b12 93%,#7a140d 100%); /* Opera 11.10+ */

                                          background: -ms-linear-gradient(top, #ff8b2a 0%,#ef501a 25%,#ef501a 50%,#ef501a 53%,#aa3b12 85%,#aa3b12 93%,#7a140d 100%); /* IE10+ */

                                          background: linear-gradient(top, #ff8b2a 0%,#ef501a 25%,#ef501a 50%,#ef501a 53%,#aa3b12 85%,#aa3b12 93%,#7a140d 100%); /* W3C */

                                          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8b2a', endColorstr='#7a140d',GradientType=0 );

                                          }

                                           

                                          /********************************************************************* **********

                                           

                                          BROWSER HACKS: the hacks below should not be changed unless you are an expert

                                           

                                          ********************************************************************* **********/

                                           

                                          /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */

                                           

                                          ul.MenuBarHorizontal iframe {

                                          position: absolute;

                                          z-index: 1010;

                                          filter:alpha(opacity:0.1);

                                          }

                                           

                                          /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */

                                           

                                          @media screen, projection

                                           

                                          {

                                          ul.MenuBarHorizontal li.MenuBarItemIE {

                                          display: inline;

                                          f\loat: left;

                                          background: #FFF;

                                          }

                                          }

                                          • 18. Re: Centering a completed web page and moving divs
                                            Monochrome24 Level 1

                                            hmmmm just a thought but I was looking at the Layout CSS for the actual background graduation that won't go where I want it :

                                             

                                            #wrapper #background {

                                                      background-color: #000;

                                                      background-image: url(../Images/main_graduation.jpg);

                                                      background-repeat: repeat-x;

                                                      height: 582px;

                                                      float: left;

                                                      width: 960px;

                                            }

                                             

                                            Would this be causing any problems?

                                            • 19. Re: Centering a completed web page and moving divs
                                              osgood_ Level 8

                                              Monochrome24 wrote:

                                               

                                              hmmmm just a thought but I was looking at the Layout CSS for the actual background graduation that won't go where I want it :

                                               

                                              #wrapper #background {

                                                        background-color: #000;

                                                        background-image: url(../Images/main_graduation.jpg);

                                                        background-repeat: repeat-x;

                                                        height: 582px;

                                                        float: left;

                                                        width: 960px;

                                              }

                                               

                                              Would this be causing any problems?

                                               

                                              If you want the background image to appear at the bottom then add to your #wrapper ccs

                                               

                                              background-image: url(../Images/main_graduation.jpg);

                                              background-repeat: repeat-x;

                                              background-position: left bottom;

                                               

                                              I have no idea what this <div> is for. It's just sitting at the bottom of the page.

                                              <div id="background"></div>

                                              • 20. Re: Centering a completed web page and moving divs
                                                Monochrome24 Level 1

                                                well that worked!!!

                                                 

                                                I inserted

                                                background-position: left bottom;   to the #wrapper #background

                                                but then I wondered if I changed the actual height from the original I had used (582px) to a shorter height :

                                                 

                                                #wrapper #background {

                                                          background-color: #000;

                                                          background-image: url(../Images/main_graduation.jpg);

                                                          background-repeat: repeat-x;

                                                          height: 200px;

                                                          float: left;

                                                          width: 960px;

                                                          background-position: left bottom;

                                                }

                                                 

                                                And it's worked! It was the 582px adding to the bottom that made the page too tall....this can now be my template page.

                                                 

                                                Thanks osgood, you've been a great help and patient with a Dreamweaver newbie.

                                                 

                                                Now I go to figure out adding more divs to subsequent pages and to see if I can make images appear when scrolling down each subject in the children menu...

                                                • 21. Re: Centering a completed web page and moving divs
                                                  osgood_ Level 8

                                                  Monochrome24 wrote:

                                                   

                                                  well that worked!!!

                                                   

                                                  I inserted

                                                  background-position: left bottom;   to the #wrapper #background

                                                  but then I wondered if I changed the actual height from the original I had used (582px) to a shorter height :

                                                   

                                                  #wrapper #background {

                                                            background-color: #000;

                                                            background-image: url(../Images/main_graduation.jpg);

                                                            background-repeat: repeat-x;

                                                            height: 200px;

                                                            float: left;

                                                            width: 960px;

                                                            background-position: left bottom;

                                                  }

                                                   

                                                  And it's worked! It was the 582px adding to the bottom that made the page too tall....this can now be my template page.

                                                   

                                                  Thanks osgood, you've been a great help and patient with a Dreamweaver newbie.

                                                   

                                                  Now I go to figure out adding more divs to subsequent pages and to see if I can make images appear when scrolling down each subject in the children menu...

                                                   

                                                  I would not add the height to the <div> because if you do it will stay at that height and that's not what you want to happen when you eventually add some content. Instead add some 'dummy' content into the <div> as text placeholder.

                                                  • 22. Re: Centering a completed web page and moving divs
                                                    Monochrome24 Level 1

                                                    For this website the height will be just what I want as I have made dummies previously and there's only going to be limited content that won't exceed the height? (if that makes sense!)

                                                    However I will keep this format for future use and probably lose the height then.

                                                     

                                                    OK so this is my 'external' style sheet osgood which makes all pages the same.... I know the <head> is where it's defined but HOW do I insert an internal (I'm assuming it's within the <head>) so I can place pics/text that represent individual pages? Even if you can point me to a "How To"....

                                                     

                                                    omg I am a newbie!

                                                    • 23. Re: Centering a completed web page and moving divs
                                                      le_mac_man Level 1

                                                      Monochrome24 wrote:

                                                       

                                                      OK so this is my 'external' style sheet osgood which makes all pages the same.... I know the <head> is where it's defined but HOW do I insert an internal (I'm assuming it's within the <head>) so I can place pics/text that represent individual pages? Even if you can point me to a "How To"....

                                                       

                                                      omg I am a newbie!

                                                       

                                                      Yes, you can define CSS for each individual page by having some css placed within the head of the page concerned.

                                                       

                                                      Just remember to have the below code within the head tag first and then you can type whatever CSS you want to be specific only to that page within the style tag.

                                                       

                                                       

                                                       

                                                      <style type="text/css">

                                                       

                                                      #yourCssIdHere

                                                      .yourCssClassHere

                                                       

                                                      </style>

                                                      • 24. Re: Centering a completed web page and moving divs
                                                        Monochrome24 Level 1

                                                        thanks le_mac_man!

                                                         

                                                        I have no idea what this means or where exactly in the HTML 'HEAD' I need to copy/paste it?

                                                        Do I use multiples of this in the 'HEAD' for each new item?

                                                        Where is the DIV coding placed in HTML that I need this seperate internal CSS for? I tried inserting in the HEAD but it won't have it!

                                                         

                                                        Sorry mate but I'm used (in a limited way) to using the DIV tool to click/insert and then create it's CSS to tell it how, when and where it goes - a logical progression for someone visually inclined.

                                                         

                                                        This looks like working arse about face telling something where to go and how to look before it exists?

                                                         

                                                        or am I being thick still?

                                                         

                                                        Maybe if I send the HTML code you can create what I'm getting at say - with a simple object frame that sits in a centrally fixed "wrapper" template....

                                                        • 25. Re: Centering a completed web page and moving divs
                                                          Monochrome24 Level 1

                                                          ok update le_mac_man!

                                                           

                                                          I now have a new internal CSS created - for a box that I will be inserting a roro (rollon and off) image in.

                                                           

                                                          Here's the code showing my new CSS in the "HEAD" but where would you suggest placing code/inserting a DIV into my HTML that will link to the new CSS .graphic? And what CSS changes are needed to make sure the DIV sits inside as part of the "wrapper"?

                                                           

                                                          <!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>Handprint Design</title>

                                                          <style type="text/css">

                                                          body {

                                                            background-color: #000;

                                                            background-image: url(Images/background_grad.jpg);

                                                            background-repeat: repeat-x;

                                                          }

                                                          .graphic {

                                                            background-color: #F63;

                                                            height: 190px;

                                                            width: 330px;

                                                            left: 90px;

                                                            top: 258px;

                                                          }

                                                          </style>

                                                          <link href="CSS/layout.css" rel="stylesheet" type="text/css" />

                                                          <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

                                                          <script type="text/javascript">

                                                          function MM_preloadImages() { //v3.0

                                                            var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

                                                              var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

                                                              if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

                                                          }

                                                          </script>

                                                          <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

                                                          </head>

                                                           

                                                           

                                                          <body>

                                                           

                                                          <div id="wrapper">

                                                          <div id="header panel"><img src="Images/handprint_panel.jpg" alt="header" width="960" height="190" border="0" />

                                                            <ul id="MenuBar1" class="MenuBarHorizontal">

                                                              <li><a href="services.html">SERVICES</a></li>

                                                              <li><a href="contact.html">CONTACT</a></li>

                                                              <li><a href="history.html">HISTORY</a></li>

                                                              <li><a href="profile.html">PROFILE</a></li>

                                                              <li><a href="#">HOME</a></li>

                                                          </ul>

                                                            <div id="background"></div>

                                                          </div>

                                                          </div>

                                                          <script type="text/javascript">

                                                          var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                                          </script>

                                                          </body>

                                                          </html>

                                                          • 26. Re: Centering a completed web page and moving divs
                                                            Nancy OShea Adobe Community Professional & MVP

                                                            @Monochrome,

                                                            We're all visual learners.  But if you want to get the most out of DW & this forum, take a couple of hours to familiarize yourself with code fundamentals.  Every HTML document is structured the same way.  Knowing where things go within that structure is required learning -- just like your A, B C's. 

                                                             

                                                            HTML & CSS Tutorials - http://w3schools.com/

                                                             

                                                             

                                                            To answer your question,  change this

                                                             

                                                            .graphic {

                                                              background-color: #F63;

                                                              height: 190px;

                                                              width: 330px;

                                                              left: 90px;

                                                              top: 258px;

                                                            }

                                                             

                                                            to this:

                                                             

                                                            .graphic {

                                                              background-color: #F63;

                                                              height: 190px;

                                                              width: 330px;

                                                            }

                                                             

                                                            Add this:

                                                             

                                                            #wrapper {

                                                            width: 1000px;

                                                            margin: 0 auto; /**with width, this is centered**/

                                                            }

                                                             

                                                             

                                                             

                                                            Change this:

                                                             

                                                            <div id="wrapper">

                                                            <div id="header panel"><img src="Images/handprint_panel.jpg" alt="header" width="960" height="190" border="0" />

                                                              <ul id="MenuBar1" class="MenuBarHorizontal">

                                                                <li><a href="services.html">SERVICES</a></li>

                                                                <li><a href="contact.html">CONTACT</a></li>

                                                                <li><a href="history.html">HISTORY</a></li>

                                                                <li><a href="profile.html">PROFILE</a></li>

                                                                <li><a href="#">HOME</a></li>

                                                            </ul>

                                                            <!--what's this???-->

                                                              <div id="background"></div>

                                                             

                                                            </div>

                                                            </div>

                                                            <script type="text/javascript">

                                                            var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                                            </script>

                                                            </body>

                                                            </html>

                                                             

                                                            to this:

                                                             

                                                            <div id="wrapper">

                                                             

                                                            <!--NOTE: id and class names cannot contain spaces-->

                                                            <div id="header">

                                                            <img src="Images/handprint_panel.jpg" alt="header" width="960" height="190" border="0" />

                                                              <ul id="MenuBar1" class="MenuBarHorizontal">

                                                                <li><a href="services.html">SERVICES</a></li>

                                                                <li><a href="contact.html">CONTACT</a></li>

                                                                <li><a href="history.html">HISTORY</a></li>

                                                                <li><a href="profile.html">PROFILE</a></li>

                                                                <li><a href="#">HOME</a></li>

                                                            </ul>

                                                            <!--end header--></div>

                                                             

                                                            <div class="graphic">

                                                            insert image here

                                                            </div>

                                                             

                                                            <!--end wrapper--></div>

                                                            <script type="text/javascript">

                                                            var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                                            </script>

                                                            </body>

                                                            </html>

                                                             

                                                             

                                                            Nancy O.

                                                            Alt-Web Design & Publishing

                                                            Web | Graphics | Print | Media  Specialists 

                                                            http://alt-web.com/

                                                            http://twitter.com/altweb

                                                            • 27. Re: Centering a completed web page and moving divs
                                                              Monochrome24 Level 1

                                                              Thanks again Nancy - I've have found it easier to 'retro' check the actual HTML as I go to see where it fits and how it interacts.

                                                              Using your highlighted red <div I've managed to place four rollover images in the positions I wanted with some float and relative in the CSS!

                                                              NOW I can see how they interact and how to make the accompanying CSS I will probably be able to do a major part of my website.

                                                               

                                                              You mentioned ages ago that including divs with text and not representing text with Photoshopped imagery is better for being noticed in browsers and helpful for the visually impared.... can I have both text AND rollover images occupying the same div box or do I place a relevant div text box below the div image and somehow link them both to "go with the roll"?

                                                               

                                                               

                                                              cheers!

                                                              • 28. Re: Centering a completed web page and moving divs
                                                                Nancy OShea Adobe Community Professional & MVP

                                                                You can do this very effectively with CSS Sprites and text.  The text is styled with CSS indent and moved off screen.  But it is still recognized by search engines and translators.  It's like having your cake and eating too.

                                                                alt-web.com/DEMOS/CSS-Button-Sprite.shtml

                                                                 

                                                                 

                                                                Nancy O.

                                                                Alt-Web Design & Publishing

                                                                Web | Graphics | Print | Media  Specialists 

                                                                http://alt-web.com/

                                                                http://twitter.com/altweb

                                                                http://alt-web.blogspot.com/