...

View Full Version : Page in middle of screen



sherlockturtle
05-12-2011, 11:42 PM
How do you make a html page show up in the middle of the screen.

teedoff
05-13-2011, 12:27 AM
Valid doctype then

html:

<body>
<div id="wrapper">
All your page content between this div
</div>
</body>


CSS:


#wrapper {
width: 960px;
margin: 0 auto;
}

sherlockturtle
05-13-2011, 12:34 AM
Valid doctype then

html:

<body>
<div id="wrapper">
All your page content between this div
</div>
</body>


CSS:


#wrapper {
width: 960px;
margin: 0 auto;
}
*ohh wait it works never mind

THat does not work.

*edit

bullant
05-13-2011, 03:44 AM
one option.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#wrapper {
width: 80%;
margin: 20px auto 20px auto;
border: 1px solid red;
}
#gutter {
margin: 0px 0px 0px 0px;
padding: 20px 20px 20px 20px;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="gutter">
<p>
Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut,
ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc.
</p>
<p>
Tortor sit voluptatem pede sodales turpis hac, vel velit suscipit, luctus bibendum molestie lacinia neque. Porttitor ante
turpis in voluptate vivamus autem, gravida magna amet porta praesent tincidunt at, nam enim sodales ante non, sit nunc
posuere odio libero nibh ac. Amet id dignissim vehicula tempor et eros. Est hendrerit est quis, et viverra est class pede
voluptas libero, sed mauris tincidunt, ultrices praesent.
</p>
</div>
</div>
</body>
</html>

alykins
05-13-2011, 03:56 AM
Bullant:
I seem to have a lot of issues with %'s... Do you find that 80% works for you? *I tried setting up using 100% and it would not work correctly?*

Teed:
This is similar to what I do now, only I use 1024px... Is there a "set value" for screen px sizes? I have been told multiple size resolutions for both height and width.

Sherlock:
Sorry to hijack your thread :)

bullant
05-13-2011, 04:09 AM
Bullant:
I seem to have a lot of issues with %'s... Do you find that 80% works for you? *I tried setting up using 100% and it would not work correctly?*


100% or less works fine in my IE9 and FF4. But note, most, if not all, browsers have a default margin/padding on the <body> and so the left and right borders will not quite reach the left and right side of the browser window. You can set margins and paddings to 0px for the <body> in the css to remove any default values.

Also, note that the % width will set the width of the element to that % width of its parent element.

Say a parent div is set to 50% of the width of the <body> and the parent div has a child div whose width is also set to 50%. In this case, the child div's width will be 25% of the width of the <body> (0.5 x 0.5 = 0.25).

If you would like to discuss further, maybe start a new thread with your code and browser name and version causing you problems before we get spanked by the moderators for hijacking the op's thread.

sherlockturtle
05-13-2011, 04:41 AM
Im trying to put a border on one of the objects but it goes across the string "the border" how can i fix that?

alykins
05-13-2011, 05:46 AM
Im trying to put a border on one of the objects but it goes across the string "the border" how can i fix that?

i dont know exactly what the question is pertaining too.. can you post code?
in CSS you can set up border properties... these can be as simple as border: 2px ridge gray; or you can go deeper border-top: 3px solid red; border-bottom: 5px solid green;

hope that helps... if not post code and i can offer what i can :) also u might need " s around colors... i always use hex code so i cant remember

sherlockturtle
05-13-2011, 07:38 PM
i dont know exactly what the question is pertaining too.. can you post code?
in CSS you can set up border properties... these can be as simple as border: 2px ridge gray; or you can go deeper border-top: 3px solid red; border-bottom: 5px solid green;

hope that helps... if not post code and i can offer what i can :) also u might need " s around colors... i always use hex code so i cant remember

So i have the width thing but theres a div i have in the middle of the page that the "border" extence all the way to the right side of the screen and i just want a box.

teedoff
05-13-2011, 07:42 PM
So i have the width thing but theres a div i have in the middle of the page that the "border" extence all the way to the right side of the screen and i just want a box.

Probably going to need all your code or better a link to your live testing site.

But as a guess, is it a border attribute added with CSS on an element? Or did you insert a horizontal rule(<hr />)?

sherlockturtle
05-13-2011, 07:50 PM
Here is the CSS see it mazuring the border from the left to the right so it drage teh border across the whole screen


width: 780px;
margin: 0 auto;


And i dont have a testing site. I can run it wiht xampp though

teedoff
05-13-2011, 07:57 PM
Two small lines of CSS is not enough. Post ALL your html and CSS please. Also when you do use the # button to wrap your code in code tags.

sherlockturtle
05-13-2011, 08:08 PM
Two small lines of CSS is not enough. Post ALL your html and CSS please. Also when you do use the # button to wrap your code in code tags.

OHhh i know i only posted a snippet i will post the code in a little while



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum