20 Replies Latest reply on Jan 16, 2014 6:08 AM by MurraySummers

    Please help centering website!!

    riccioscrode5 Level 1

      Hello,

       

      After researching and getting lost with so many different responses, I figured I'd ask myself to get the response I needed. I use Dreamweaver CS 5.5 and I am having a ton of trouble figuring out how to make it so my website is centered on all monitors and devices. Here is the current website: http://www.kyledake.com/

       

      However, I am removing and adding a lot of stuff, so I thought now would be a good time to fix things. Here is the code of the homepage I am fixing up; after removing a lot fo the content. I apologize for posting all of it, I don't know specifially where to look. I use a lot of DIVs too, so if anyone has an alternate solution to get things on the site where I want them, please let me know:

       

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

      <meta name="viewport" content="width=device-width" />

      <title>Kyle Dake Official Website</title>

      <style type="text/css">

      #apDiv1 {

          position:absolute;

          left:247px;

          top:16px;

          width:1041px;

          height:1336px;

          z-index:1;

          background-color: #FFFFFF;

      }

      #Menu {

          font-family: arial;

      }

      </style>

       

      <style type="text/css">

       

      }

      body,td,th {

          font-family: Arial, Helvetica, sans-serif;

      }

      a:link {

          color: #8A0404;

          text-decoration: none;

      }

      a:visited {

          text-decoration: none;

          color: #8A0404;

      }

      a:hover {

          text-decoration: none;

          color: #000;

      }

      a:active {

          text-decoration: none;

          color: #000000;

          text-align: center;

      }

      #apDiv5 strong {

          font-size: 15px;

      }

      #apDiv16 {

          position:absolute;

          left:436px;

          top:398px;

          width:633px;

          height:939px;

          z-index:16;

          background-image: url(background_content.png);

          text-align: justify;

          font-family: Arial, Helvetica, sans-serif;

      }

      #apDiv17 {

          position:absolute;

          left:1290px;

          top:-5px;

          width:2392px;

          height:1350px;

          z-index:17;

          background-color: #000000;

          background-image: url(background.png);

      }

      #apDiv18 {

          position:absolute;

          left:-5px;

          top:-5px;

          width:251px;

          height:1350px;

          z-index:18;

          background-color: #000000;

          background-image: url(Background_1.png);

      }

      #apDiv19 {

          position:absolute;

          left:763px;

          top:597px;

          width:397px;

          height:166px;

          z-index:19;

      }

      body {

          background-repeat: no-repeat;

          background-color: #000;

      }

      </style>

         

      <style type="text/css">

      #apDiv4 {

          position:absolute;

          left:430px;

          top:125px;

          width:633px;

          height:257px;

          z-index:20;

      }

      </style>

                      <!-- Start VideoLightBox.com HEAD section -->

              <link rel="stylesheet" href="dakevid_videolb/videolightbox.css" type="text/css" />

             

                  <link rel="stylesheet" type="text/css" href="dakevid_videolb/overlay-minimal.css"/>

                  <script src="dakevid_videolb/jquery.js" type="text/javascript"></script>

                  <script src="dakevid_videolb/swfobject.js" type="text/javascript"></script>

              <!-- End VideoLightBox.com HEAD section -->

      <style type="text/css">

      }

      </style>

      <link rel="stylesheet" type="text/css" href="banner_files/banner-rotator.css" />

      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

      <script type="text/javascript" src="banner_files/jquery.banner-rotator.min.js"></script>

      <script type="text/javascript">

      $(window).load(function() {

              $("#JQBannerRotator1").fdBannerRotator({keyboardEnabled:true,frameShadowEnabled:true,slid eWidth:615,slideHeight:250,slideScaleMode:"none",slideTransition:{type:"fade",duration:300 ,easing:"easeOutQuad"},slideDuration:5000,slideAutoplay:true,slidePauseOnHover:true,timerP osition:"top",timerVisible:true,captionAnimationSpeed:500,captionAnimationEasing:"easeOutQ uad",controlDirectionEnbled:false,controlDirectionHide:true,controlPlayEnabled:false,navig ationEnabled:true,navigationPositionTop:235,navigationPositionMargin:15,navigationAlign:"r ight",navigationThumbEnabled:false,navigationThumbServerScipt:"",navigationThumbSearch:".j pg",navigationThumbReplace:"_thumb.jpg",navigationThumbWidth:150,navigationThumbHeight:65, navigationThumbAnimationSpeed:200,navigationThumbAnimationEasing:"easeOutQuad"});

          });

      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>

      <style type="text/css">

      #apDiv24 {

          position:absolute;

          left:441px;

          top:406px;

          width:627px;

          height:91px;

          z-index:25;

          text-align: center;

      }

      #apDiv16 p .twitter-timeline {

          text-align: center;

      }

      #apDiv25 {

          position:absolute;

          left:435px;

          top:1294px;

          width:636px;

          height:29px;

          z-index:26;

          font-size: 13px;

          text-align: center;

          font-family: Arial, Helvetica, sans-serif;

      }

      #apDiv26 {

          position:absolute;

          left:438px;

          top:1276px;

          width:633px;

          height:23px;

          z-index:27;

          font-size: 13px;

          text-align: center;

      }

      #apDiv26 a {

          color: #000;

          font-weight: bold;

      }

      #apDiv25 a {

          color: #000;

      }

      #apDiv35 {

          position:absolute;

          left:437px;

          top:1250px;

          width:202px;

          height:39px;

          z-index:36;

      }

      a {

          font-family: Arial, Helvetica, sans-serif;

      }

      #apDiv7 {

          font-weight: normal;

          font-size: 30px;

      }

      #apDiv8 {

          position:absolute;

          left:592px;

          top:516px;

          width:327px;

          height:334px;

          z-index:39;

          text-align: justify;

          font-family: Arial, Helvetica, sans-serif;

      }

      #apDiv10 {

          position:absolute;

          left:599px;

          top:806px;

          width:107px;

          height:36px;

          z-index:41;

      }

      #apDiv11 {

          position:absolute;

          left:806px;

          top:804px;

          width:95px;

          height:35px;

          z-index:42;

       

      }

      </style>

      </head><body onload="MM_preloadImages('facebook-button-1hover.png','twitter_1hover.png')">

      <div id="apDiv1"><a href="index.html"><img src="Header.png" width="1041" height="92" vspace="15" border="0" /></a></div>

      <div id="apDiv16">

        <p> </p>

            <p> </p>

        <p> </p>

            <p> </p>

      </div>

      <div class="JQBannerRotator" id="apDiv4">

        <div id="JQBannerRotator1" class="JQBannerRotator">

          <div class="overlay"></div>

          <ul class="data">

            <li><a href="eiwahof.html"><img class="slide" src="banner_files/slides/eiwa.jpg" alt=" "/></a></li>

            <li><a href="grandprix.html"><img class="slide" src="banner_files/slides/grandprix.jpg" alt=" "/></a></li>

            <li><a href="USAvRussia.html"><img class="slide" src="banner_files/slides/RUSSIAMATCH.jpg" alt=" "/></a></li>

            <li><a href="dakejoinscornell.html"><img class="slide" src="banner_files/slides/coaching.jpg" alt=" "/></a></li>

          </ul>

        </div>

      </div>

      <div id="apDiv24"><img src="Header2.png" width="338" height="93" align="middle" /></div>

      <div id="apDiv25">All Rights Reserved <a href="http://x-celworldwide.com/index.html">X-Cel Worldwide 2013</a> | © Kyle Dake 2013 | This is the official Kyle Dake Website </div>

      <div id="apDiv26">Site Design <a href="http://www.riccioproductions.com/" target="_new">Riccio Productions LLC</a></div>

      <div id="apDiv35"><a href="http://www.ai-sport.com/" target="_new"><img src="ai_wrestling.png" width="205" height="43" border="0" /></a></div>

      <div id="apDiv8"> Welcome to KyleDake.com, the official home to wrestling's most   prominent young super-star, Kyle Dake. Here you will find everything   related to Kyle, from news, photos, videos, merchandise, and more.Browse the site, and check out the new videos, photos, and   merchandise. Also, stay updated on Kyle Dake wrestling events, news, and   developments from speaking occasions, award receptions, and all other   public appearances.  Be sure to follow Kyle on Twitter and Like the Official Fan Page on Facebook!  </div>

      <div id="apDiv10"><a href="https://www.facebook.com/KyleDakeOfficial" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image19','','facebook-button-1hover.png',1)"><img src="facebook-button-1.png" name="Image19" width="81" height="33" border="0" id="Image19" /></a></div>

      <div id="apDiv11"><a href="https://twitter.com/kyledake444" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','twitter_1hover.png',1)"><img src="twitter_1.png" name="Image22" width="81" height="33" border="0" id="Image22" /></a></div></div>

      </body>

       

      </html>

        • 1. Re: Please help centering website!!
          BenPleysier Adobe Community Professional & MVP

          Sorry, I counted 30 times position:absolute;

           

          That is asking for trouble unless you know what you are doing.

           

          If you give me some time, I'll have a go at giving you a proper solution. Just don't do anything your your current site untill I come back to you.

          • 2. Re: Please help centering website!!
            riccioscrode5 Level 1

            Ok thanks, I really appreciate it. I'm not doing anything to the current site until I have all of the new content anyway, so there's no worries there.

            • 3. Re: Please help centering website!!
              BenPleysier Adobe Community Professional & MVP

              Sorry for the wait, had unexpected visitors.

               

              Have a look at the following. It will give you an idea of a layout without the nasty AP-divs.

              <!doctype html>

              <html>

              <head>

              <meta charset="utf-8">

              <title>Untitled Document</title>

              <style>

              html {

                  background: #000000; /* place background image here */

              }

              body {

                  width: 1041px;

                  margin: auto; /* keeps the page centered */

                  font-family: Arial, Helvetica, sans-serif;

              }

              a {

                  color: #8A0404;

                  text-decoration: none;

              }

              a:hover {

                  color: #000;

              }

              .header {

                  height: 92px;

                  background: url(Header.png);

              }

              .header .nav {

                  width: 450px;

                  float: right;

                  margin-top: 55px;

              }

              .header .nav span {

                  font-size: 12px;

                  font-weight: bold;

                  color: #8a0404;

                  margin-left: 25px;

              }

              .navbar {

                  background: #FFFFFF;

                  line-height: 35px;

                  padding: 10px;

              }

              .navbar .nav {

                  width: 50%;

                  float: left;

              }

              .navbar .hashtag {

                  text-align: right;

                  font-size: 30px;

                  color: #8a0404;

                font-weight: bold;

              }

              .content {

                  background: #FFFFFF;

              }

              .aside {

                  width: 395px;

                  float: right;

                  color: #8a0404;

                  background: #FFFFFF;

              }

              .section.main {

                  background: #FFFFFF;

                  width: 646px;

                  float: left;

              }

              .article {

                  background: #FFFFFF url(background_content.png) repeat-y;

                  min-height: 889px;

                  padding: 15px;

              }

              .centertxt {

                  text-align: center;

              }

              .righttxt {

                  text-align: right;

                  padding-right: 15px;

              }

              img.center {

                  display: block;

                  margin: auto;

              }

              </style>

               

              <link rel="stylesheet" href="dakevid_videolb/videolightbox.css" />

              <link rel="stylesheet" href="dakevid_videolb/overlay-minimal.css"/>

              <link rel="stylesheet" href="banner_files/banner-rotator.css" />

               

              <body>

              <div class="header">

                <div class="nav">

                  <img src="twitter_birdhover.png" alt=""/>

                  <img src="fbhov.png" alt=""/>

                  <span>

                  <a href="index.html">Home</a> | <a href="about.html">About</a> | <a href="http://www.xcelonlinestore.com/collections/kyle-dake-official-merchandise" target="_new">Merchandise</a> | <a href="media.html">Media </a>| <a href="sponsors.html">Sponsors </a> | <a href="contact.php">Contact</a><span>

                </div>

              </div>

              <div class="navbar">

                  <div class="nav">

                  <a href="index.html">Home</a> | <a href="news.html">News</a> |<a href="representation.html"> Representation</a> | <a href="events.html">Events</a>

                </div>

                <div class="hashtag">

                    <span>#Dakecountry</span>

                </div>

              </div>

              <div class="content">

                  <div class="section main">

                  <div id="JQBannerRotator1" class="JQBannerRotator">

                    <div class="overlay"></div>

                    <ul class="data">

                      <li><a href="eiwahof.html"><img class="slide" src="banner_files/slides/eiwa.jpg" alt=" "/></a></li>

                      <li><a href="grandprix.html"><img class="slide" src="banner_files/slides/grandprix.jpg" alt=" "/></a></li>

                      <li><a href="USAvRussia.html"><img class="slide" src="banner_files/slides/RUSSIAMATCH.jpg" alt=" "/></a></li>

                      <li><a href="dakejoinscornell.html"><img class="slide" src="banner_files/slides/coaching.jpg" alt=" "/></a></li>

                    </ul>

                  </div>

                  <div class="article">

                      <h3>Article</h3>

                    <p>It is the star to every wand'ring bark, oh, no, it is an ever fixed mark within his bending sickle's compass come. But bears it out even to the edge of doom. Love's not time's fool, though rosy lips and cheeks I never writ, nor no man ever loved. That looks on tempests and is never shaken; or bends with the remover to remove. Within his bending sickle's compass come; admit impediments; love is not love let me not to the marriage of true minds.</p>

                    <p>But bears it out even to the edge of doom. If this be error and upon me proved, that looks on tempests and is never shaken. Admit impediments; love is not love or bends with the remover to remove.</p>

                    <p>Which alters when it alteration finds, love's not time's fool, though rosy lips and cheeks whose worth's unknown, although his height be taken. If this be error and upon me proved, oh, no, it is an ever fixed mark let me not to the marriage of true minds. Or bends with the remover to remove. But bears it out even to the edge of doom. That looks on tempests and is never shaken; love's not time's fool, though rosy lips and cheeks whose worth's unknown, although his height be taken.</p>

                  </div>

                </div>

                <div class="aside">

                  <img src="gear.jpg" alt=""/>

                  <img src="signed.png">

                  <img src="dakevid_videolb/thumbnails/0.png" alt=""/>

                  <div class="centertxt"><small>Kyle Dake Career Highlight - Official</small></div>

                  <p class="righttxt">View Full Video Gallery</p>

                  <img src="photostring.png" alt=""/>

                  <p class="righttxt">View Full Video Gallery</p>

                  <img src="cf2.png" alt="" class="center"/>

                  <img src="mil_tools.png" alt="" class="center" style="margin-top: -60px;"/>

                </div>

              </div>

              </body>

              </html>

              As said, it is only the layout, I ran out of time. You will have to apply the finishing touches.

              • 4. Re: Please help centering website!!
                riccioscrode5 Level 1

                Thanks so much for taking the time to do this. I will try it out once I get home from work today!

                • 5. Re: Please help centering website!!
                  riccioscrode5 Level 1

                  Just using it quickly, a few things so up. First, the site looks fine when previewing in firefox, but in design modein dreamweaver the right column is all the way at the bottom kind of out of place. Also the buttons and banner rotator aren't funtional. Quick questions: How do I get these items to work now that the site is centered, and how do I move things were I want them without using the divs I was using? Thanks again!

                  • 6. Re: Please help centering website!!
                    BenPleysier Adobe Community Professional & MVP

                    the site looks fine when previewing in firefox, but in design modein dreamweaver the right column is all the way at the bottom kind of out of place.

                    Please have a look here for an understanding of the design view.

                     

                     

                    the buttons and banner rotator aren't funtional.

                    As said, I concentrated on getting the layout corrected. To get the buttons working, have a look here.

                    • 7. Re: Please help centering website!!
                      riccioscrode5 Level 1

                      Ok thanks again, I will look into these and get back to you!

                      • 8. Re: Please help centering website!!
                        riccioscrode5 Level 1

                        So I'm playing around with the code you got me. What is it that you did that I couldn't figure out, as far as keeping things out of AP divs?

                        • 9. Re: Please help centering website!!
                          BenPleysier Adobe Community Professional & MVP

                          Your CSS was not usable to center the page, that is why I started all over.

                           

                          Basically, what you have got is a full width header and a two column content section.

                           

                          CSS consists of, as the name suggests, cascading style rules, i.e. any rule that you place on a container will cascade through to its siblings.

                           

                          In an HTML document, the primary container is html, secondary is body so any rules placed onto these containers will cascade. The html container is a special container with limited style rules that can be applied to it. The body element can be used like any other block element like div, h1 and p elements. The body element can be centered. Anything that is placed within the body element will be contained within it.

                           

                          To center the body element (container), all we need to do is give it a width (this is so that the CSS can do a calculation) and set the margin to auto as per

                          body {

                               width: 1020px;

                               margin: auto;

                          }

                          When an element has a style rule using position:absolute (AP divs), the element will no longer follow the normal flow of content. In other words, it is given its own identity, oblivious of its surroundings and the surroundings are oblivious to the AP. An AP is answerable only to a container that has position:relative attached to it. If there is no such container, then it will adhere to the html container

                           

                          As an illustration, the following has an AP div. See what happens to it

                          <!doctype html>

                          <html>

                          <head>

                          <meta charset="utf-8">

                          <title>Untitled Document</title>

                          <style>

                          body {

                              width: 60em;

                              margin: auto;

                              border: thin solid #666;

                              min-height: 450px;

                          }

                          .test {

                              top: 0;

                              left: 0;

                              position: absolute;

                          }

                          </style>

                          </head>

                           

                          <body>

                          <div class="test">

                            <p>Eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, excepteur sint occaecat ut labore et dolore magna aliqua. Velit esse cillum dolore sed do eiusmod tempor incididunt qui officia deserunt.</p>

                            <p>Quis nostrud exercitation sunt in culpa ut enim ad minim veniam. Duis aute irure dolor ut aliquip ex ea commodo consequat. Qui officia deserunt lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupidatat non proident, sunt in culpa.</p>

                            <p>Velit esse cillum dolore ut enim ad minim veniam, excepteur sint occaecat. Duis aute irure dolor sed do eiusmod tempor incididunt mollit anim id est laborum. Qui officia deserunt velit esse cillum dolore ut labore et dolore magna aliqua. Excepteur sint occaecat consectetur adipisicing elit, eu fugiat nulla pariatur.</p>

                          </div>

                          </body>

                          </html>

                          Now we do the same exercise, but we a a position:relative to a container, in this case the body element.

                          <!doctype html>

                          <html>

                          <head>

                          <meta charset="utf-8">

                          <title>Untitled Document</title>

                          <style>

                          body {

                              width: 60em;

                              margin: auto;

                              border: thin solid #666;

                              min-height: 450px;

                              position:relative;

                          }

                          .test {

                              top: 0;

                              left: 0;

                              position: absolute;

                          }

                          </style>

                          </head>

                           

                          <body>

                          <div class="test">

                            <p>Eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, excepteur sint occaecat ut labore et dolore magna aliqua. Velit esse cillum dolore sed do eiusmod tempor incididunt qui officia deserunt.</p>

                            <p>Quis nostrud exercitation sunt in culpa ut enim ad minim veniam. Duis aute irure dolor ut aliquip ex ea commodo consequat. Qui officia deserunt lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupidatat non proident, sunt in culpa.</p>

                            <p>Velit esse cillum dolore ut enim ad minim veniam, excepteur sint occaecat. Duis aute irure dolor sed do eiusmod tempor incididunt mollit anim id est laborum. Qui officia deserunt velit esse cillum dolore ut labore et dolore magna aliqua. Excepteur sint occaecat consectetur adipisicing elit, eu fugiat nulla pariatur.</p>

                          </div>

                          </body>

                          </html>

                          I hope that you can see the difference.

                           

                          In using AP divs, you need to know what you are doing. That is why the wise men and women in this forum always say: AP divs are not necessary for a normal layout.

                          • 10. Re: Please help centering website!!
                            riccioscrode5 Level 1

                            Ok cool, thanks again for all of your help!!

                            • 11. Re: Please help centering website!!
                              riccioscrode5 Level 1

                              Hey Ben,

                               

                              I am doing better now with everything with the code, just having a run-in with the footer. I am using CSS:

                               

                              .footer {

                                  font-size: 14px;

                                  text-align: center;

                                  width: 100%;

                                  background-color: #FFF;

                                  border-top-width: 1px;

                                  border-top-style: solid;

                                  border-top-color: #000;

                                  border-right-color: #000;

                                  border-bottom-color: #000;

                                  border-left-color: #000;

                                  position: fixed;

                                  left: 0px;

                                  bottom: 0px;

                               

                              <div id>"footer"= my content here</div>

                               

                              However it is not showing up in the right spot, if even at all sometimes. I am using the code you gave me, where should I place the footer code within the code you sent me?

                               

                              Thanks again!

                              • 12. Re: Please help centering website!!
                                BenPleysier Adobe Community Professional & MVP

                                Just above the </body> tag place

                                <div class="footer">Footer content</div>

                                • 13. Re: Please help centering website!!
                                  riccioscrode5 Level 1

                                  Cool, go the footer, but is there any way to make it so it just stays at the bottom of the pages?

                                  • 14. Re: Please help centering website!!
                                    BenPleysier Adobe Community Professional & MVP

                                    You already had the CSS for that as in

                                    .footer {

                                        font-size: 14px;

                                        text-align: center;

                                        width: 100%;

                                        background-color: #FFF;

                                        border-top-width: 1px;

                                        border-top-style: solid;

                                        border-top-color: #000;

                                        border-right-color: #000;

                                        border-bottom-color: #000;

                                        border-left-color: #000;

                                        position: fixed;

                                        left: 0px;

                                        bottom: 0px;

                                    }

                                    just add the clear: both bit.

                                     

                                    If you want the footer to be the same width as the rest, the add/modify left: auto and right: auto

                                    • 15. Re: Please help centering website!!
                                      riccioscrode5 Level 1

                                      I want it to just stay on the bottom and not constantly follow the page, here's my code:

                                       

                                        .footer {

                                          font-size: 11px;

                                          text-align: center;

                                          width: 100%;

                                          background-color: #000;

                                          border-top-width: 5px;

                                          border-top-style: solid;

                                          border-top-color: #000;

                                          border-right-color: #000;

                                          border-bottom-color: #000;

                                          border-left-color: #000;

                                          position: fixed;

                                          left: 0px;

                                          bottom: 0px;

                                          clear: both;

                                          color: #CCC;

                                          border-bottom-width: 2px;

                                          border-bottom-style: solid;

                                          margin-right: auto;

                                          margin-left: auto;

                                      • 16. Re: Please help centering website!!
                                        riccioscrode5 Level 1

                                        I fixed it actually, just had to make the position relative, not fixed

                                        • 17. Re: Please help centering website!!
                                          BenPleysier Adobe Community Professional & MVP

                                          That's the best way to learn, well done.

                                          • 18. Re: Please help centering website!!
                                            MurraySummers Level 8

                                            CSS consists of, as the name suggests, cascading style rules, i.e. any rule that you place on a container will cascade through to its siblings.

                                             

                                            Gramps, not to nit-pick but a rule you place on a container will cascade through to the descendents of the container not to the siblings of the container.

                                             

                                            riccioscrode5, that confusing description is best seen illustrated by the following HTML/CSS:

                                             

                                            <body style="color:green">

                                            <div style="color:red">

                                            <p>This paragraph is a descendent of the <div> and so its text is red</p>

                                            <p>So is this text</p>

                                            </div>

                                            <div>

                                            <p>This paragraph's ancestor container (the <div>) is a sibling of the previous <div> but its text color will be green, not red</p>

                                            </div>

                                            • 19. Re: Please help centering website!!
                                              BenPleysier Adobe Community Professional & MVP

                                              Hi Muz,

                                               

                                              Great to see that you're back!

                                               

                                              As usual you are right, not that I did not try to convey that exact same message, but with all of this heat around me it's hard to think straight.

                                               

                                              This has to be the worst day of my life, 105 degrees (40.5C) and our A/C kicked the bucket. Try sleeping when its 86 degrees (30C) and only a fan to cool down to.

                                              • 20. Re: Please help centering website!!
                                                MurraySummers Level 8

                                                Have been following the heat wave down there. I don't know how the tennis players do it!

                                                 

                                                Hope your AC is back online soon.

                                                 

                                                Clearly the swelter has affected your typing ability!