Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Location
    Florida United States
    Posts
    106
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Screen Resolution advice

    I am new to making websites. And I can't find a good article or anything explaining the best way to size a page so that it works well in most common resolutions. I am working on a site for my dad so that I can force myself to learn this but when i change the window size it will overlap text or other problems in the body can anyone help me....

    The site is dcstripes.com

    Caleb Smith

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,684
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Hello calebandchels,
    Your #all is set at 1200px wide so anyone with a smaller than 1200pixel viewport will get a horizontal scrollbar.

    Your content in #all is much longer than the height:525px; you have set on it. See how the box model works.

    Your absolute positioned elements take their position from the body of the document right now. That doesn't work because #all move differently than body. To make it so the images move with #all, add position:relative;
    Make the CSS for #all look like this -
    Code:
    	#all{		
    		width:1200px;
    		/*height:525px;*/
    		margin-left:auto;
    		margin-right:auto;
    position: relative;
    	}
    Once you do this, you will have to reposition your ap elements.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Location
    Florida United States
    Posts
    106
    Thanks
    6
    Thanked 2 Times in 2 Posts
    so should i set width to 800 since its a common resolution???

  • #4
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I think that having a width of 800 is starting to fade out these days as I believe most people have larger moniters.

    Here is a link for display stats: http://www.w3schools.com/browsers/browsers_display.asp

    You could make a fluid layout with a min and max width if you want a site that expands and contracts.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •