Okay, i made a few changes according to your suggestions. I got rid of all the "center" tags and replaced them for 0 auto. I also moved the headercontent inside the header div,( not sure why i did that). But i'm sure there are still a few more problems with my code, and letting me know would be great.
@Jarolin, a couple things I noticed is it's not really responsive..at all, I mean, the only reason you don't have a horizontal scroll bar on this site is because you're using overflow-x: hidden; if I have my browser at 500px, the entire right side of your site is missing from my browser window, nowhere to be found, what should happen, and would happen if you had percentage based widths, is your site would move with the browser window to accommodate the smaller viewport.
There's no viewport meta, no media query breaks, and with everything set to px widths, there's no fluidity to it at all.
If I were you, I'd ditch the iframe too, and go with an AJAX solution, but that's just me.
Your site may look fine now on smaller devices, but without much text, you can't see how hard it will be for a mobile user to read what will be the smaller text that will show up because you don't have the viewport meta..
@ChrisP When you say " use percentage based width", on what exactly do i use percentage as the width? do i use it for everything like images/CSS graphics or what?
I know iframes aren't good. They cant be crawled by spiders and can't use links to navigate through them on the main page. Which is why i'm not including any important content that wont be found by SEO'S. Thanks for the feedback.
@Jarolin, the only thing I wouldn't give a percentage based width to on your site is your picture, and only because keeping those css banners flush with the div underneath is (as far as I know) impossible with percentage based widths.
you have min-width set alot, it should be max-width..for example..your body is setting the width for the site (personally, I'd use a wrapper instead, but that's me) but I'd get rid of the min-width, set a max-width to px or em based, but around 1100px, then set the width to 100%
@ChrisP I actually worked on a website with everything set as "%" before, and it didnt turn out so great. When the window is minimized on one side only, the website because stretched and the images distorted. I'm not sure if its worth setting everything with percentage.
@Jarolin, images need height: auto; to prevent that..
If you don't want the fluid design, that's fine, but you should be utilizing media queries to adjust elements for smaller viewports..like I said earlier, the only thing preventing a horizontal scrollbar is overflow-x: hidden; which, like I said earlier, is cutting off half your site when my browser window is 500px wide
Which is the best way to make my website fit on 1024x768 screen resolution without effecting the layout and positioning as much?
We need to see a link.
Unless we know what is involved how can we possibly reply?
The simplest answer is DON'T. Don't aim for a specific resolution, aim for viewport sizes using percentages and device-widths.
@Paulie_D Here's the link of the website LINK
To start with there seems to be 'center' elements...what the heck are they, I'm not aware of an HTML element of 'center'?
The center tag is used to position everything in the middle of the screen. It exists. so whats the best way of making it fit for the resolution?
Deprecated
http://www.w3schools.com/tags/tag_center.asp
@Jarolin, it's deprecated though..because it defines the presentation of content, which is a job for css
OK...Frankly the structure leaves a lot to be desired but I guess the real question is ...
If that is the maximum width that you want your centered content to be then it's relatively simple. You set the wrapper element to have:
What you WILL have to do is adjust all of the fixed pixel widths of any sub-elements to percentages of 1024px.
That's the quick and dirty answer. I'm not going to get into responsive images / iframes etc.
You also might want to think about moving the headercontent div actually into the header div.
@jarolin - Didn't we already do this thread once?
http://css-tricks.com/forums/discussion/comment/90121
Regarding centering, don't use the center tag it's deprecated.
Instead use:
margin: 0 auto;Okay, i made a few changes according to your suggestions. I got rid of all the "center" tags and replaced them for 0 auto. I also moved the headercontent inside the header div,( not sure why i did that). But i'm sure there are still a few more problems with my code, and letting me know would be great.
@Jarolin, a couple things I noticed is it's not really responsive..at all, I mean, the only reason you don't have a horizontal scroll bar on this site is because you're using
overflow-x: hidden;if I have my browser at 500px, the entire right side of your site is missing from my browser window, nowhere to be found, what should happen, and would happen if you had percentage based widths, is your site would move with the browser window to accommodate the smaller viewport.There's no viewport meta, no media query breaks, and with everything set to px widths, there's no fluidity to it at all.
If I were you, I'd ditch the iframe too, and go with an AJAX solution, but that's just me.
Your site may look fine now on smaller devices, but without much text, you can't see how hard it will be for a mobile user to read what will be the smaller text that will show up because you don't have the viewport meta..
@ChrisP When you say " use percentage based width", on what exactly do i use percentage as the width? do i use it for everything like images/CSS graphics or what?
I know iframes aren't good. They cant be crawled by spiders and can't use links to navigate through them on the main page. Which is why i'm not including any important content that wont be found by SEO'S. Thanks for the feedback.
@Jarolin, the only thing I wouldn't give a percentage based width to on your site is your picture, and only because keeping those css banners flush with the div underneath is (as far as I know) impossible with percentage based widths.
you have min-width set alot, it should be max-width..for example..your body is setting the width for the site (personally, I'd use a wrapper instead, but that's me) but I'd get rid of the min-width, set a max-width to px or em based, but around 1100px, then set the width to 100%
@ChrisP I actually worked on a website with everything set as "%" before, and it didnt turn out so great. When the window is minimized on one side only, the website because stretched and the images distorted. I'm not sure if its worth setting everything with percentage.
@Jarolin, images need
height: auto;to prevent that..If you don't want the fluid design, that's fine, but you should be utilizing media queries to adjust elements for smaller viewports..like I said earlier, the only thing preventing a horizontal scrollbar is
overflow-x: hidden;which, like I said earlier, is cutting off half your site when my browser window is 500px wide@ChrisP Thanks for the help, I appreciate it. Any way you can help me out HERE too?