January 15th, 2014, 02:44 PM
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?
January 19th, 2014, 10:35 AM
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.
January 19th, 2014, 04:31 PM
The new page that opens shifts to the right.
Here is the CSS
January 19th, 2014, 04:44 PM
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.
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.
January 19th, 2014, 06:28 PM
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.
Originally Posted by slime