Hey guy's, i'm trying to make this scroll line up on everyone's screen, but on my 4 computers I have at home each one of them view differently with text all on the side and off the scroll, can someone show me how to make this responsive? I did it the only way I knew I could and that was to make the scroll image a <div> and then align it with how many pixels necessary, something tells me making it responsive takes a different route.. http://www.torchmod.com .. i'm sure it will view differently on your PC too

It's not difficult, but it's a hell of a job.

All widths have to be in %.
Images have to be put into containing divs with a width of 100%.
All font sizes have to be in % or in em's.
Columns have to be floated.
When making the compact design for a small device (smart phone e.g.), you need to remove some of the effects as they will take up bunches of loading time.

You need to read up on this, or else someone here will end up rewriting your code for you.

*coughs* Been saying that for months now that he needs to go read this stuff

Other than that, the other way to do this is to create a class for the diff and use the image as the background of the div container. That way your text won't end up outside of it, but inside of it. That as well as the things Inger already mentioned.

W3C school's doesn't have this on there page or not that I could find, i'm going to google it right now, but Jo Ann there is a way to make it a backround and then the text would be centered on it? I've seen this done on numerous websites, but for some reason I wanted this done, so i'll go google it right now, responsive themes or something like that. I have been reading up on HTML and CSS but I haven't got to CSS3 or HTML5 yet, I can scribble a page out np now, but when it comes to responsive themes , i'm not too sharp. I guess it's time to go into the unkown !! Wish me luck!

It doesn't have anytthing to do with Responsive Matt, it's about how you setup the code for the div tag and the css to go with it. Responsive is good if you're doing that site in responsive yes, but if that isn't the case then that's not what you're after.

The books I mentioned a couple months ago already to read that would help you learn are:

CSS3: The Missing Manual

The Book of CSS3

Those 2 alone are very good books, the first being the better one in my opinion. You can get them at
http://oreilly.com
or
http://amazon.com
or
http://barnesandnoble.com

and a myriad of other places. If you do ebooks then they are usually cheaper. If you do ebooks and have a few books you need to get then O'Reilly gives you a good discount for buy one get one 50% off and buy 3 get one free setups.

Either way, it's not the W3schools thing you need, you need real information, W3 is just basic tutorials. The Missing Manual book gives you hands on experience all the way through and I think you would benefit from something like that much more.

Good luck no matter which way you go.

Got it because all the responsive websites that i've read have to do with Ethan Marcotte or something like that, I didn't understand it to begin with, i'm going to switch my html back to the way it was and then give it a try, I would buy those books but I don't have the funds right now, i'm going to have to wing it until I can get them, i'll check out youtube.. but what would you call this type of problem, or there isn't a label for it? A type of design that centers on all computers?

I think you had it centered with margin:auto;

Since you removed the scroll, I can't see exactly what was the matter, but as I said, you need to remove all those pixel widths and use % instead.

As for responsive and suitable for mobile phones, you need to scetch up a design where you remove a lot of the graphics, for the reasons I mentioned, and then with css move the various bits an pieces to resemble that design. Make the scetched thingy kind of linear, so that you don't have to squash a lot of wide stuff into one column - unless you float it, of course. In order to make your site responsive, you don't actually need to use css3. There are a lot of people with older machines, including older browsers, that won't understand it anyway.

It deleted my scroll when I went with margin: auto; , I'm not too sure how many %'s to go with so I went with 25% each just to see, however i'm not too sure what happened to my scroll lol.

I'm currently working the image but I can't seem to get the text to fall on top of the image, it seems like the text just won't cover the scroll.. it moves when I move %'s