align the whole page to the center.

M

Mr. X.

Hello.

How can I align the whole page to the center (horizontal) ?
(This is good for sites, that are seen on 800x600 screen and 1024x768.
... Also is 800x600 common resolution that I should consider it).

Generaly I did something ugly like this :
==========================

<html>
<frameset cols = "*,790,*" FRAMEBORDER=0 BORDER=0 FRAMESPACING=0
FRAMEPADDING=0>
<frame/>
<frame src = "main_page.html"/>
<frame />
</frameset>
</html>

Thanks :)
 
C

Chris F.A. Johnson

Hello.

How can I align the whole page to the center (horizontal) ?
(This is good for sites, that are seen on 800x600 screen and 1024x768.
... Also is 800x600 common resolution that I should consider it).
Click to expand...

Why set it to any width?

Left to itself, a page will fit the window no matter what size it
is.
 
K

Kiran Makam

   Left to itself, a page will fit the window no matter what size it is.

This will be best solution. But for some reason if you want to fix the
width of the page and center the contents, set margin to auto:

--------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>

<div style="width: 800px; border:1px solid gray; margin:auto">
my page contents
</div>

</body>
</html>
 
C

Chris F.A. Johnson

This will be best solution. But for some reason if you want to fix the
width of the page and center the contents, set margin to auto:
Click to expand...

Why would you use a transitional doctype when you are not
transitioning from anything?
<html>
<head>
</head>
<body>

<div style="width: 800px; border:1px solid gray; margin:auto">
Click to expand...

That is not the way to do it. This would be better:
 
M

Mr. X.

I have tried :

<div style="width: 80%; border:1px solid gray; margin:auto">
but the page is not centered to the viewport.

Besides I don't know if it should be metter to consider 800x600, or 1024x768
(Or 800x600 is not popular, so I shouldn't take care of that resolution, and
always design my sites to 1024x768).

Thanks :)
 
E

Els

Mr. X. said:
I have tried :

<div style="width: 80%; border:1px solid gray; margin:auto">
but the page is not centered to the viewport.
Click to expand...

What's your doctype?
What other HTML and CSS have you added?
The above code should work in any browser newer than IE5. If using the
proper doctype. And if nothing else on the page interferes with it.

A URL might be handy.
 
S

Sherm Pendley

Mr. X. said:
<div style="width: 80%; border:1px solid gray; margin:auto">
but the page is not centered to the viewport.
Click to expand...

There's something else wrong with your markup then, because that's the
correct way to center a div.
Besides I don't know if it should be metter to consider 800x600
Click to expand...

No, it shouldn't matter to consider resolution at all. You can't
control it, and you can't predict it - so don't worry about it.

sherm--
 
M

Mr. X.

...
So you think that those who access your site on cellphones or
PDAs with resolutions far lower than 800x600 are not worth
designing for?
Click to expand...

You can see at any resolution you like,
but what should I consider that in 800x600 and 1024x768 you should scroll
only vertically.
(I am trying to avoid scrolling horizontal in most common resolutions).

That's what I am wondering :
If my page is shown in any resolution, should I consider about less
scrolling (only vertically) in 800x600 page ?
It was modern thing to do several years ago, but web-site is like fashion,
and now, because most people like the 1024x768 (even higer resolution),
then I shlouldn't consider about avoiding scrolling horizontal on 800x600
(which was bad thing to do several years ago, because most of the people
like the 800x600 resolution).

Thanks :)
 
C

Chris F.A. Johnson

:

You can see at any resolution you like,
but what should I consider that in 800x600 and 1024x768 you should scroll
only vertically.
Click to expand...

You should only have to scroll vertically no matter what the width
of the browser window. To do that, do NOT specify width in pixels;
use percentages if anything.
 
M

Mr. X.

I did something like this (in css)

#wrap
{
position: absolute;
top:0;
left:0;
height:850;
width:100%;
margin:auto;
visibility:visible;
background-image:url('images/myimage);
background-repeat:no-repeat;
background-size:auto;
background-attachment:fixed;
}

(in main html :
....
<body>
<div id = "wrap" align = "center">
...

1.
100% is 100% of the image (otherwise, as 75% : the image is cut and there is
no percents ratio).

I have tried many variant of the CSS (like putting 75% instead of 100%,
with no position : absolute, etc ...
but margin:auto is not doing the right spaces from left & right, so the
image is not in the center) - What am I wrong ?

2.
Isn't there a problem of distortion of the web-site images, like stretch,
and unclear bitmaps, etc, because they are smaller ?

Thanks :)
 
E

Els

Mr. X. said:
I did something like this (in css)

#wrap
{
position: absolute;
top:0;
left:0;
Click to expand...

Take that all out, it will not help centering anything, as it places
the div in a fixed spot. (relative to whatever element is its parent,
probably body)
height:850;
Click to expand...

850 what?
If there is any text at all inside that div, don't set a height. It
will make the text spill over the bottom border in situations beyond
your control.
width:100%;
Click to expand...

This means 100% of the width of its parent. If that is the body
element, it will be very wide. No room for margins.
margin:auto;
Click to expand...

Only has effect is the width is less than 100%.
visibility:visible;
Click to expand...

Why did you add that?
background-image:url('images/myimage);
Click to expand...

You have a superfluous apostrophe there. Or a missing one, depending
on your choice :)
background-repeat:no-repeat;
background-size:auto;
Click to expand...

I've never heard of background-size. Where did you find that one?
background-attachment:fixed;
Click to expand...

This can be useful, depending on the desired result.
}

(in main html :
...
<body>
<div id = "wrap" align = "center">
Click to expand...

Why align="center" ?
Are you trying to horizontally center the div, or its contents?
If the div: use CSS to set a width (smaller than 100%), and
margin:auto.
If the contents: use CCS - text-align:center;
...

1.
100% is 100% of the image (otherwise, as 75% : the image is cut and there is
no percents ratio).
Click to expand...

100% of what image - the background image? Nope, that won't work. You
can't stretch a background image. The 100% you set for div#wrap, is
100% of the width of its parent element.
I have tried many variant of the CSS (like putting 75% instead of 100%,
with no position : absolute, etc ...
but margin:auto is not doing the right spaces from left & right, so the
image is not in the center) - What am I wrong ?
Click to expand...

You can only have spaces left and right if the width is less than all
of it.
2.
Isn't there a problem of distortion of the web-site images, like stretch,
and unclear bitmaps, etc, because they are smaller ?
Click to expand...

Depends - there is no such problem with background-images, as they
simply don't stretch.
Thanks :)
Click to expand...

You're welcome.
 
M

Mr. X.

I did as you advised me :

#wrap
{
width:75%;
margin:auto;
background-image:url('images/my_image.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

My html :
<body>
<div id = "wrap">
....

Still the div isn't at center !
(I have IE7).

Thanks :)
 
J

Jonathan N. Little

Mr. X. said:
I did as you advised me :

#wrap
{
width:75%;
margin:auto;
background-image:url('images/my_image.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

My html :
<body>
<div id = "wrap">
...

Still the div isn't at center !
(I have IE7).

Thanks :)
Click to expand...

1) Your doing something wrong.
2) Your background image is < 75% of the DIV's parent

BTW background images can only repeat to fill the element's available
background. There is no "stretch" feature for background images yet.
 
J

Jonathan N. Little

Mr. X. said:
Can you advise me what should I change in CSS & html, please ?

Thanks :)
Click to expand...
Pray tell how? What html, what css? You have never given a URL to an
example page that exhibits your problem


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>Centered</title>

<style type="text/css">
div.example { margin: auto; padding: 1em; color: white; background:
black; width: 75%; }
</style>

</head>
<body>
<h1>A Centered DIV</h1>
<div class="example">I am centered, even in IE!, The block not the
text.</div>
</body>
</html>
 
M

Mr. X.

I ran the example you gave.
It is not centered .
(I have IE7).

I have sent my code on my prior posts, I just want the concept -
We can start from tinny dummy example that works with some bitmaps.

I saw an example on the web :
in css :
#myid
{
position: absolute;
top:0;
left:50%;
height:850px;
width:760px;
margin-left:-380px; // this is half of the image size
}

it is a good example for centering the div, but has one little problem,
that in very small screens , if there are some images, they are cut, and no
way to see the whole images.

Thanks :)
 
E

Els

Mr. X. said:
I ran the example you gave.
It is not centered .
(I have IE7).
Click to expand...

Proof that Jonathan's code is correct and does what you want:
http://locusmeus.com/temp/centered.html

Now you proof that it doesn't, show a url.
I have sent my code on my prior posts, I just want the concept -
We can start from tinny dummy example that works with some bitmaps.
Click to expand...

We did that. So far, you have not shown a url that can convince us
you can copy code from a post :)
I saw an example on the web :
Click to expand...

A bad example on the web.
it is a good example for centering the div, but has one little problem,
that in very small screens , if there are some images, they are cut, and no
way to see the whole images.
Click to expand...

That's why it is *not* a good example, but in fact a bad example.
Use Jonathan's code. Be precise when copying it. Show us the result
online somewhere.
Thanks :)
Click to expand...

Welcome.
 
M

Mr. X.

Thanks a lot.
That's should solve the problem ...

The first line make the whole difference (why ?)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

(even :
<!DOCTYPE html>
is enough).

Why does that line make the whole difference ?

Thanks :)
 
R

rf

Els said:
Not in IE6 I think. Please use the complete line!


Because it tells the browser what type of code to expect in the
document, so it can do the right thing with it :)
Click to expand...

Most importantly the full doctype *with* the URL will put browsers into
standards mode. In non-standards or quirks mode browsers, particularly IE,
reproduce the bugs present back to version 5.0, including the totally broken
box model.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to use PDF-lib and how to center each line of texts on the page? 1
Image shifts to the right when export the page to pdf 4
Scrolling whole page when using frameset. 2
Having difficulty with the layout of these images / video for this web page 2
Help with my responsive home page 2
How to have two html audio players on one page? 0
How to position the *tooltip* comment on these buttons? 9
How to properly insert a landing page within same container beneath an image element? 0

Members online

Total: 82 (members: 1, guests: 81)
Robots: 304

Forum statistics

Threads
473,995
Messages
2,570,235
Members
46,821
Latest member
AleidaSchi

Latest Threads

Top