www.webdeveloper.com
Results 1 to 10 of 10

Thread: Need Help Centering Website for All Resolutions

Hybrid View

  1. #1
    Join Date
    May 2008
    Posts
    4

    Need Help Centering Website for All Resolutions

    I built a website thats 1024 pixels wide, i want to center it so if someone with a 22 inc monitor at 1680 pixels wide will see it in the center of the browser.

    I have tried to use tables but i just can't get everything in the place i want it. what i would like to do is copy and paste my entire site within a table and be able to freely move things within the table. I have used layers so idk if that changes something with tables b/c it (Microsoft FrontPage 2003) wont let me paste layers within table

    any sugestions would be great thnks

  2. #2
    Join Date
    May 2007
    Posts
    15

    Auto Margins in CSS

    Create a css file that has parameters setting the margins of the body of the page to auto. Then create a layer inside your body tags that "floats" i call mine container. All your page content should then be nested within that Container layer. Hope this helps.


    Code:
    body {
    	font: 12px Arial;
    	background: #444444;
    	margin: 0; 
    	padding: 0;
    	color: #333333;
    }
    
    #container {
    	width: 1024px;
    	background-color: #FFFFFF;
            margin: 0 auto; 
    	text-align: left; 
    	Siheight: auto;
    	border: 1px solid #707070;
    	position: inherit;
    	top: auto;
    }

  3. #3
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by abeam
    body {
    font: 12px Arial;
    background: #444444;
    margin: 0;
    padding: 0;
    color: #333333;
    }

    #container {
    width: 1024px;
    background-color: #FFFFFF;
    margin: 0 auto;
    text-align: left;
    Siheight: auto;
    border: 1px solid #707070;
    position: inherit;
    top: auto;
    }
    ?? You mean "height" I take it.

    A valid !doctype (any will do) is required, then "width" with "margin: 0 auto;" centers this "#container".
    Keep in mind that a 1024px width container guarantees a minimal scrollbar for 1024px displays, as it does not take into account the width of the scrollbar. Would be better to use a "percent" width, like 90 or 95% and "margin:0 auto;", and make it 'fluid'..
    Last edited by WebJoel; 05-30-2008 at 07:40 PM.

  4. #4
    Join Date
    May 2007
    Posts
    15
    lol, yes that would be height. I just copied over some of the css from one of my pages and was deleting some of the extra stuff I had in there and didn't get all that line.

  5. #5
    Join Date
    May 2008
    Posts
    4
    I dont know much programing when it comes to HTML i was mostly using the designers view when making this. i assume that a doctype states what the type is of the "#container" is right? and i dont really knnow how to incorperate the css files to align my stuff so its hard to use that code but I thank u both

    i'm pretty much a noob when it comes to websites so sorry if u have to dumb down ur talk alittle
    Last edited by Dissolution; 05-30-2008 at 08:28 PM.

  6. #6
    Join Date
    May 2007
    Posts
    15
    Sure no problem. I've never played with Frontpage, so I'm not sure exactly how to tell you to do this, I just have general steps.


    Go to the Code View of your pages, and Copy then paste this within the Head tags. The background parameter in the body tag makes the background of the page grey, change it to whatever Hex color you wish, you can even use an image by changing it to "background: url("http://www.domain.com/imagelocation.jpg");.


    Code:
    < style type="text/css">
    body {
    	font: 12px Arial;
    	background: #444444;
    	margin: 0; 
    	padding: 0;
    }
    
    #container {
    	width: 1024px;
    	background: #FFFFFF;
            margin: 0 auto; 
    	text-align: left; 
    	height: auto;
    	border: 1px solid #707070;
    	position: inherit;
    	top: auto;
    }
    
    < /style>

    If you don't know CSS yet, I would strongly urge you looking up some tutorials. CSS makes life so much easier. I'm showing you an inline version, I use external ones, but I'm not sure how to get it into FP for you. Google CSS tutorials, and dive in. This should get you started out of the right foot.

  7. #7
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by Dissolution
    I dont know much programing when it comes to HTML i was mostly using the designers view when making this. i assume that a doctype states what the type is of the "#container" is right? ....
    I don't know what you're saying here, but a valid !doctype keeps IE from using it's dreaded Quirks Mode rendering.
    A fave !doctype that I use is:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">....
    Note the URI (the "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd". This is also required to make this work right).

    This is the FIRST part of the page, nothing can appear before the first line, and the rest of the document comes after the " .... " .

  8. #8
    Join Date
    May 2008
    Posts
    4
    Ok, im really frustrated right now, but there is nothing else i can do but ask for help.

    Basically what i want to do is be able to freely move pictures around within my website AND have things aligned in the center.now what i think i might be confusing u with is what i mean by centering it, its not so much about centering in the workspace but when its opend in a browser. now i know on Frontpage 2003, the workspace can be set to w/e resolution and u can work around that but once u save and preview the website it comforms to ur browser size anyway. Dreamweaver doesn't have the resolution option as far as i know. i have already built most of the website in layers, and unless there is something i dont know, you can't put layers in anysort of component that can be centered, such as a table.now if i could make 1 big table and cut and paste all my layers into that i would have no problems.

    let me know if any of that didn't make sense so i can try to clear it up.

    if u know how to do it with dreamweaver i can use that too.

  9. #9
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    ....be set to w/e resolution and u can work around that but once u save....
    I don't mean to be a tool here, -but can you use proper English and proper grammar or some reasonable approximation thereof? 'Shorthand texting' not spoken here... Casually misspelled words: would be acceptable. cell-phone text-messaging shorthand: uber-annoying.

    Now, stepping down from my podium, -YES, by all means, DO ask your questions here! People will be tripping over each other to help you. If they understand you.

    Are you asking:

    for a 'centered' container, a container that is 'centered' in browsers exceeding 1024-width? -Do-able.

    for images (or other elements) that on-load, are in a specified place in said-container BUT also, using your mouse-pointer tool, you could click-hold & drag them around the screen and drop in-place elsewhere? -Again, do-able.

    As for Frontpage and Dreamweaver, -not a fan of either. They belch spoiled code. But my not using either of these in no way would hinder the creation of compliant code that does what (I think) you're asking for...

  10. #10
    Join Date
    May 2008
    Posts
    4
    OK, I understand the annoying part of text-slang, its a very bad habbit when ever I use keyboards.

    Quote Originally Posted by WebJoel
    [I] for a 'centered' container, a container that is 'centered' in browsers exceeding 1024-width? -Do-able.

    for images (or other elements) that on-load, are in a specified place in said-container BUT also, using your mouse-pointer tool, you could click-hold & drag them around the screen and drop in-place elsewhere? -Again, do-able.
    Yes this is exactly what I 'm asking, and if it has been explained previously I appologize but i couldn't get it to work. Specific and detailed instructions are welcome

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles