#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    4
    Rep Power
    0

    Help with Web Page Shifting (CSS Content)


    Hello all. I am having an issue with a free HTML template that I downloaded from freehtml5templates called RedRoofTops . Basically, I am using this as an intranet IT support site for some users of the company I work for. It isn't anything official, or commercial, or anything like that, so I'm not trying to rip someone off. Just going to link printer drivers and stuff like that.

    Anyways, I downloaded the template, and I'm able to make several changes to the index.html. I copy the page, and then reuse it for a printers page. The way the index file was set up is that it has three columns. On the printers page, I didn't want it to be in columns, so I just used the "content" ID listed in the CSS. Well, that put everything on the left of the page. I figured out how to center it, which is good, but it only covers a small portion of the screen, and I wanted it wider.

    Instead of messing with the "content" ID in the .css file, I created a "page" ID and copied all the code from the "content" ID. Did a test, and showed the same results, which is good. I edited the width line to make it wider, and success.

    The issue with everything is that if I'm on the Index Page and click the Printers link, I can see that the page shifts to the right a few pixels. That happens when I change the width in the css for the "page" ID greater than 450. Its the same no matter what. If I go above 450, the page shifts right.

    What I am going to do temporarily is basically remove the three columns from the index and use the same format as I did with the printers, but I would like to get it all working.

    I have my work uploaded to a zip file, but can't link it. Can someone help with this?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    36
    Rep Power
    1
    When you say that the page shifts right once you click on the printer link....are you talking about the index page, or the new page that opens is shifted to the right?

    Also, would you mind posting the CSS...sounds like something was written/copied incorrectly or that you may be missing something.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    4
    Rep Power
    0
    The new page that opens shifts to the right.

    Here is the CSS

    /* reset */
    * {
    margin: 0;
    padding: 0;
    }

    /* render html5 elements as block */
    header, footer, section, aside, nav, article {
    display: block;
    }

    body {
    line-height: 1;
    background: #ddd url(images/64bg.jpg) repeat;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #333;
    font-size: 14px;
    line-height: 18px;
    }

    /* layout */

    #wrapper {
    width: 940px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 3px solid #888;
    background: #fff;
    /* curved border radius */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

    nav {
    width: 940px;
    height: 50px;
    margin: 0 auto;
    background: #570f04;
    margin-top: -5px;
    }

    #main {
    width: 940px;
    margin: 0 auto;
    padding-top: 30px;
    background: #FFF url(images/colbg.png) repeat-y;
    overflow: hidden;
    }

    #content {
    float: left;
    width: 450px;
    margin-left: 40px;
    }

    #page {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    }

    #sidebar1 {
    float: left;
    padding-left: 20px;
    width: 180px;
    }

    #sidebar2 {
    float: right;
    padding-right: 30px;
    width: 180px;
    }

    footer {
    width: 940px;
    margin: 0 auto;
    clear: both;
    }

    /* basics */

    h1,h2,h3,h4,h5,h6 {
    font-weight: bold;
    clear: both;
    color: #333;
    }

    a:link, a:visited {
    color:#861B0B;
    }

    a:hover, a:active {
    color: #333;
    }

    p {
    margin-bottom: 18px;
    }

    li {
    padding-left: 5px;
    }

    /* nav */

    nav .menu {
    font-size: 16px;
    font-weight: bold;
    }

    nav .menu ul {
    margin: 0;
    padding: 17px 0 0 20px;
    list-style: none;
    line-height: normal;
    }

    nav .menu li {
    display: block;
    float: left;
    }

    nav .menu a {
    display: block;
    float: left;
    margin-right: 5px;
    padding: 0px 15px;
    text-decoration: none;
    color: #F2E0DF;
    }

    nav .menu a:hover {
    text-decoration: underline;
    }

    /** HEADER */

    header {
    padding: 20px 0 0 0;
    }

    header>h1 {
    float: left;
    margin: 0 0 18px 10px;
    width: 675px;
    font-size: 30px;
    line-height: 90px;
    }

    header>h1 a {
    color: #333;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0px 2px 3px #555;
    }

    header>h2 {
    color: #777;
    clear: right;
    float: right;
    font-style: italic;
    font-size: 14px;
    margin: 14px 10px 18px 0;
    }

    /** ARTICLES **/
    article img {
    border: none;
    -webkit-box-shadow: 3px 3px 7px #777;
    -moz-box-shadow: 3px 3px 7px #777;
    }

    #content p, ul, ol, hr {
    margin-bottom: 24px;
    }

    #content ul ul, ol ol, ul ol, ol ul {
    margin-bottom: 0;
    }

    #content h1, h2, h3, h4, h5, h6 {
    color: #333;
    margin: 0 0 20px 0;
    line-height: 1.5em;
    }

    #page p, ul, ol, hr {
    margin-bottom: 24px;
    }

    #page ul ul, ol ol, ul ol, ol ul {
    margin-bottom: 0;
    }

    #page h1, h2, h3, h4, h5, h6 {
    color: #333;
    margin: 0 0 20px 0;
    line-height: 1.5em;
    }
    .alignleft, img.alignleft {
    display: inline;
    float: left;
    margin-right: 10px;
    }

    .alignright, img.alignright {
    display: inline;
    float: right;
    margin-left: 10px;
    }

    .aligncenter, img.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    img.alignleft, img.alignright, img.aligncenter {
    margin-bottom: 12px;
    }

    /* sidebar and footer widget blocks */

    aside h3 {
    font-size: 18px;
    text-shadow: 0px 2px 3px #ddd;
    }

    aside ul {
    list-style: square;
    color: #bbb;
    margin: -15px 0 15px 25px;
    }

    #footer-area {
    background: #570f04;
    color: #f2e0df;
    font-size: 90%;
    padding: 18px 0;
    overflow: hidden;
    /* curved border radius */
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-bottomleft: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    }

    .footer-segment {
    float: left;
    margin-right: 20px;
    margin-left: 20px;
    width: 190px;
    }

    footer aside h4 {
    color: #faf0e6;
    font-size: 16px;
    line-height: 1.5em;
    }

    footer ul {
    list-style: none;
    margin: -15px 0;
    }

    footer a:link, footer a:visited {
    color: #ccc;
    }

    footer a:hover {
    text-decoration: underline;
    }

    footer p {
    margin-top: -15px;
    color: #faf0e6;
    }
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    36
    Rep Power
    1
    Without knowing the HTML it's hard to say how these things are nested, but when I look at the things you copied, they are not exactly the same even though you say you only adjusted the width.

    Code:
    #content {
    float: left;
    width: 450px;
    margin-left: 40px;}
    
    #page {
    width: 700px;
    margin-left: auto;
    margin-right: auto;}
    You do you realize you lost your float and margin-left? Also, I'm gonna take a stab and say that you're trying to make the #page wider than its containers which would result in it acting kinda funny. You would have to adjust the #wrapper and #main it's probably inside of to accommodate the bigger width. And what kind of shift are we talking here...5 pixels, or 100?

    But I think once you make sure the containers can hold the new size, everything is nested the same way in the HTML, have the same properties as before, then there shouldn't be any shifts going on.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    4
    Rep Power
    0
    Originally Posted by slime
    Without knowing the HTML it's hard to say how these things are nested, but when I look at the things you copied, they are not exactly the same even though you say you only adjusted the width.

    Code:
    #content {
    float: left;
    width: 450px;
    margin-left: 40px;}
    
    #page {
    width: 700px;
    margin-left: auto;
    margin-right: auto;}
    You do you realize you lost your float and margin-left? Also, I'm gonna take a stab and say that you're trying to make the #page wider than its containers which would result in it acting kinda funny. You would have to adjust the #wrapper and #main it's probably inside of to accommodate the bigger width. And what kind of shift are we talking here...5 pixels, or 100?

    But I think once you make sure the containers can hold the new size, everything is nested the same way in the HTML, have the same properties as before, then there shouldn't be any shifts going on.
    The "page" is the field that I created mysefl and was tinkering with. I think within the HTML code I was using the "content" and was still getting the shift. And it really is just a few pixels to the right. Not much, but I notice it.

IMN logo majestic logo threadwatch logo seochat tools logo