Positioning of DIV tag in center of the screen

[Fokke Nauta]

Hi all,

I am redesigning my website. It was built with tables and cells but I
learned that that's not done anymore. So now I use the <DIV> tags.
An example of this is in www.pc3.nl/test. In the example page test.htm I use
<div class="container"></div> and in my style sheet I use:

..container {
background-image: url(main.jpg);
position: relative;
height: 525px;
width: 980px;
}

This works and I get the picture in my screen. This is only an example, on
the real page there are links and a text window.
But how do I get this picture in the center of the screen? With a table and
a cell it was piece of cake, but how can I achieve this with a DIV tag and a
style sheet?
Is it possible anyway?

Thanks in advance,
With regards,
Fokke Nauta

 

[123Jim]

Hi all,

I am redesigning my website. It was built with tables and cells but I
learned that that's not done anymore. So now I use the <DIV> tags.
An example of this is in www.pc3.nl/test. In the example page test.htm I
use <div class="container"></div> and in my style sheet I use:

.container {
background-image: url(main.jpg);
position: relative;
height: 525px;
width: 980px;
}

This works and I get the picture in my screen. This is only an example, on
the real page there are links and a text window.
But how do I get this picture in the center of the screen? With a table
and a cell it was piece of cake, but how can I achieve this with a DIV tag
and a style sheet?
Is it possible anyway?

..container {
background-image: url(main.jpg);
position: relative;
height: 525px;
margin-left: auto;
margin-right: auto;
width: 980px;
}

^^ centered horizontally

 

[Fokke Nauta]

.container {
background-image: url(main.jpg);
position: relative;
height: 525px;
margin-left: auto;
margin-right: auto;
width: 980px;
}

^^ centered horizontally

Well,
This didn't work:

..container {
background-image: url(img/main.jpg);
position: relative;
height: 525px;
width: 980px;
centered: horizontally;
}

Fokke

 

[123Jim]

Well,
This didn't work:

.container {
background-image: url(img/main.jpg);
position: relative;
height: 525px;
width: 980px;
centered: horizontally;
}

You missed the edit I added to your container:

margin-left: auto;
margin-right: auto;

 

[Jonathan N. Little]

centered: horizontally;

There is not CSS property "centered". For list of valid properties
supported my most browsers currently:

http://www.w3.org/TR/CSS2/propidx.html

 

[Beauregard T. Shagnasty]

You missed the edit I added to your container:

margin-left: auto;
margin-right: auto;

And, Fokke added "centered: horizontally;" which was your description
of what you added! [ ^^ centered horizontally ]

 

[Fokke Nauta]

You missed the edit I added to your container:

margin-left: auto;
margin-right: auto;

So, now it looks like:

..container {
background-image: url(main.jpg);
position: relative;
height: 525px;
width: 980px;
margin-left: auto;
margin-right: auto;
centered: horizontally;
centered: vertically;
}

And it centers horizontally allright! Thanks.
But now vertically?

Fokke

 

[Fokke Nauta]

There is not CSS property "centered". For list of valid properties
supported my most browsers currently:

http://www.w3.org/TR/CSS2/propidx.html

OK, so it may be undocumented but it works in all browsers I tested.
Thanks for the link BTW, I bookmarked it.

But what's wrong with it as long as it works?

Fokke

 

[Fokke Nauta]

You missed the edit I added to your container:

margin-left: auto;
margin-right: auto;

And, Fokke added "centered: horizontally;" which was your description
of what you added! [ ^^ centered horizontally ]

Thanks
I check a CSS tutorial site like
http://www.w3schools.com/css/css_reference.asp which is very interesting,
but there are always things one wouldn't find there.
And I'm always keen to follow suggestions.

Fokke

 

[richard]

There is not CSS property "centered". For list of valid properties
supported my most browsers currently:

http://www.w3.org/TR/CSS2/propidx.html

It's probably another one of those IE exclusive experiments.

 

[dorayme]

OK, so it may be undocumented but it works in all browsers I tested.
Thanks for the link BTW, I bookmarked it.

But what's wrong with it as long as it works?

It works in the way that any proposition of the form 'p or q',
where p and q take propositions as values, cannot be false if
either p or q are true. Or, something more ordinary, if I say you
will recognise me at the meeting because I will wear a red hat,
it is the red hat that will help you, not my white handkerchief.

It is the margin-left: auto; margin-right: auto; along with the
width: 980px; that does the work of centring. All the rest is one
of the best misunderstandings on usenet today! <g>

 

[Samuël van Laere]

Op 25-1-2011 21:34, richard schreef:

It's probably another one of those IE exclusive experiments.

IE is a experiment by itself.
It was described as a browser-like object by someone in this group.
Then again just over half my visitors use it, so I need to support it.


cheers,
Samuel

 

[Beauregard T. Shagnasty]

So, now it looks like:

.container {
background-image: url(main.jpg);
position: relative;
height: 525px;
width: 980px;
margin-left: auto;
margin-right: auto;
centered: horizontally; <--------- remove these two lines
centered: vertically; <--------- "
}

There is no property of: centered
(not even in IE, richard)

And it centers horizontally allright! Thanks.
But now vertically?

Try margin: auto; instead of the separate left and right.

But it's already at the top of the page, isn't it? This is a container
for "content" I guess. Why do you want such a large darkish image in the
first place? And as a background, which indicates there is going to be a
foreground. What? White text?

 

[Jonathan N. Little]

OK, so it may be undocumented but it works in all browsers I tested.
Thanks for the link BTW, I bookmarked it.

But what's wrong with it as long as it works?

But it does *not* work. There is no such property. Invalid css rules are
ignored.

..container {
background-image: url(main.jpg);
position: relative;
height: 525px;
width: 980px;

margin-left: auto; <-- These two rules are actually doing
margin-right: auto; <-- the horizonal centering of container

centered: horizontally; <-- These two rules are actually doing
centered: vertically; <-- nothing because they are ignored.
}

I can prove it:

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

<title>Proof</title>

<style type="text/css">

.valid { background: #efe; margin: auto; }
.invalid { background: #fee; centered: horizontally; centered:
vertically; }
div { padding: .5em; width: 10em; height: 5em; }

</style>

</head>
<body>

<div class="valid">I am centered horizontally</div>

<div class="invalid">I am not centered!</div>

</body>
</html>

 

[Jonathan N. Little]

It's probably another one of those IE exclusive experiments.

No, not even IE supports it any more than the css "minty" property

 

[dorayme]

Is "centered" [defined]?

I notice that the thread is about centring tags. Almost
definitively, the best way to centre tags is to use text-align on
the element in which the tags display:

<div style="text-align:center">&lt;p&gt;&lt;/p&gt;</div>

Now there are some important caveats here. Centring, whether of
elements or of content, is almost always wanted in contexts where
the margins, paddings and borders are equal on both sides, equal
nothing being acceptable.

 

[Fokke Nauta]

Despite its misleading name, it has nothing to do with the W3C, and is
well-known here for its very poor-quality tutorials.

OK, I was not aware of that.

Is that where you
found the nonexistent "centered" CSS property? It wouldn't surprise me.

No, somebody else in this NG came up with that suggestion.

W3Schools wouldn't know correct markup if it bit them in the rear end.


Accurate information being one of those things.


<http://htmldog.com> has a much better reputation for accurate, high-
quality tutorials.

OK, I'll check there the next time.

sherm--

Thanks,
Fokke

 

[Fokke Nauta]

There is no property of: centered
(not even in IE, richard)


Try margin: auto; instead of the separate left and right.

Well, margin: auto; works OK. Left the "centered" properties out.
But it still is in the top of the screen. Not a problem, though.

But it's already at the top of the page, isn't it? This is a container
for "content" I guess.

Yes, indeed

Why do you want such a large darkish image in the
first place? And as a background, which indicates there is going to be a
foreground. What? White text?

There are links and a text window. White font colour, indeed.
Have a look at my "old" website, www.fokkenauta.nl.

Thanks,
Fokke

 

[Fokke Nauta]

But it does *not* work. There is no such property. Invalid css rules are
ignored.

.container {
background-image: url(main.jpg);
position: relative;
height: 525px;
width: 980px;

margin-left: auto; <-- These two rules are actually doing
margin-right: auto; <-- the horizonal centering of container

centered: horizontally; <-- These two rules are actually doing
centered: vertically; <-- nothing because they are ignored.
}

I can prove it:

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

<title>Proof</title>

<style type="text/css">

.valid { background: #efe; margin: auto; }
.invalid { background: #fee; centered: horizontally; centered:
vertically; }
div { padding: .5em; width: 10em; height: 5em; }

</style>

</head>
<body>

<div class="valid">I am centered horizontally</div>

<div class="invalid">I am not centered!</div>

</body>
</html>

Thanks, I have seen it.
I have left out the invalid "centered" properties and now use margin: auto;.
That does the trick.

I assume it is not possible to center it vertically as well?

Fokke

 

[123Jim]

OK, I was not aware of that.


No, somebody else in this NG came up with that suggestion.

I wrote it but that was not what I was suggesting as I later pointed out,
and you already acknowledged .. However, this misunderstanding has run and
run in this thread .. you have to laugh ))