11 Replies Latest reply on Mar 27, 2015 10:46 AM by Nancy OShea

    Center all content to center of page

    Kanedagallon

      Morning everyone.

       

      Currently I'm drinking from a firehose and trying to center 2 rollover images which are side by side to the exact center of the page. Can anyone help me with that? Admittedly, I am 1000% new here and just dipping my toes in the water. It's cold and I'm afraid and there are wolves after me so any help would be greatly appreciated.

        • 1. Re: Center all content to center of page
          Nancy OShea Adobe Community Professional & MVP

          Answers to layout questions are in your HTML & CSS code.

          Without seeing what you have so far, it's hard to make suggestions.

           

          In general, to horizontally center elements with CSS, give your container a width in pixels or % along with a margin-left and margin-right of auto.  For best results, avoid positioning.

           

          To center text, use the CSS text-align property.

           

          body {

               width: 900px;

               margin:0 auto;

               text-align:center;

               border: 1px solid #CCC;

          }

           

           

          Nancy O.

          1 person found this helpful
          • 2. Re: Center all content to center of page
            Jon Fritz II Adobe Community Professional & MVP

            Wrap the two images in a container, like a <div>.

            In that container's css, set the width to the exact pixel amount that allows the images to sit side by side.

            Set the margin css to 0 auto for the container.

             

            So the images should look something like this in the html...

             

            <div id="img_wrapper">

                 <img src=yourimage.jpg">

                 <img src="yourotherimage.jpg>

            </div>

             

            and the css would look like this...

             

            #img_wrapper {

                 width:400px;

                 margin:0 auto;

            }

             

            For more specific help with your actual page, we'll need to see the code. Posting a link to your page in progress would be best.

            1 person found this helpful
            • 3. Re: Center all content to center of page
              Kanedagallon Level 1

              My apologies. The code looks as follows:

               

              <!doctype html>

              <html>

               

               

              <center>

               

               

                <style type="text/css">

              body {

               

                background-color: #000000;

                margin-left: 0px;

                margin-top: 0px;

                margin-right: 0px;

                margin-bottom: 0px;

                background-image: url(MotionBlur2.jpg);

              }

                </style>

                <meta charset="utf-8">

                <title>Global Election Insights</title>

                <script type="text/javascript">

              function MM_swapImgRestore() { //v3.0

                var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

              }

              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];}}

              }

               

               

              function MM_findObj(n, d) { //v4.01

                var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

                  d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

                if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

                for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

                if(!x && d.getElementById) x=d.getElementById(n); return x;

              }

               

               

              function MM_swapImage() { //v3.0

                var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

                 if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

              }

                </script>

                </head>

                body {

               

                text-align: center;

                min-width: 500px;

              }

              #wrapper {

                text-align: left;

                width: 500px;

                margin-left: auto;

                margin-right: auto;

              }

                <body onLoad="MM_preloadImages('Alberta clear.jpg','Federal Clear.jpg')">

                  <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Federal','','Federal Clear.jpg',1)"><img src="Federal Blur.jpg" width="600" height="686" id="Federal"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Alberta','','Alberta clear.jpg',1)"><img src="Alberta Blur.jpg" width="600" height="686" id="Albert

              </body>

              "></a>

                </body>

              </center>

               

               

              </html>

              • 4. Re: Center all content to center of page
                Jon Fritz II Adobe Community Professional & MVP

                That code has some serious structural errors, probably from a few errant copy/paste operations.

                 

                This should be closer to what you want...

                 

                <!doctype html>

                <html>

                <head>

                  <style type="text/css">

                body {

                    background-color: #000000;

                    margin-left: 0px;

                    margin-top: 0px;

                    margin-right: 0px;

                    margin-bottom: 0px;

                    background-image: url(MotionBlur2.jpg);

                    text-align: center;

                    min-width: 500px;

                }

                  #wrapper {

                  text-align: left;

                  width: 1200px;

                  margin-left: auto;

                  margin-right: auto;

                  }

                </style>

                  <meta charset="utf-8">

                  <title>Global Election Insights</title>

                  <script type="text/javascript">

                 

                function MM_swapImgRestore() { //v3.0

                  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

                }

                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];}}

                }

                function MM_findObj(n, d) { //v4.01

                  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

                    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

                  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

                  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

                  if(!x && d.getElementById) x=d.getElementById(n); return x;

                }

                function MM_swapImage() { //v3.0

                  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

                   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

                }

                  </script>

                </head>

                 

                <body onLoad="MM_preloadImages('Alberta clear.jpg','Federal Clear.jpg')">

                <div id="wrapper"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Federal','','Federal Clear.jpg',1)"><img src="Federal Blur.jpg" width="600" height="686" id="Federal"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Alberta','','Alberta clear.jpg',1)"><img src="Alberta Blur.jpg" width="600" height="686" id="Albert"></a>

                </div>

                </body>

                </html>

                • 5. Re: Center all content to center of page
                  Kanedagallon Level 1

                  thanks for that Jon.

                   

                  You're probably right. I'm not really sure what the heck I'm doing in here so I've been researching and reading and trying things out.

                   

                  Now to learn where I put Nancy's code and what happened to the unblurred image for alberta.

                  • 6. Re: Center all content to center of page
                    Kanedagallon Level 1

                    Fixed the image issue but the images still sit center of the page at the top but not at the absolute center of the page/image in the background.

                    • 7. Re: Center all content to center of page
                      Nancy OShea Adobe Community Professional & MVP

                      Is there any chance you can upload your work to a public web space (remote server) you control and post the URL?

                      That way we can see what you see -- including images.

                       

                       

                      Nancy O.

                      • 8. Re: Center all content to center of page
                        Kanedagallon Level 1

                        Wish I could. I'd just like for the background image and the 2 images with the rollover to all be centered no matter what screen they look at. Is that my problem?

                        • 9. Re: Center all content to center of page
                          Nancy OShea Adobe Community Professional & MVP

                          Vertical centering is a print concept which has almost no relevance in web design.  Owing to browser variability, preference settings, display sizes, text sizes, etc... trying to position elements precisely over a complex background image rarely works as expected.

                           

                           

                          Nancy O.

                          • 10. Re: Center all content to center of page
                            Kanedagallon Level 1

                            Are you saying that by removing the background image, it should work ok?

                            • 11. Re: Center all content to center of page
                              Nancy OShea Adobe Community Professional & MVP

                              It might but without seeing your background-image, I don't know.

                               

                              Below, I used Fluid Grid Layouts in DW to build this responsive web page.  Resize viewport to see it work.

                              View source to see the code.

                              Alt-Web :: Fluid Grid Test #4

                               

                               

                              Nancy O.