align the whole page to the center.

M

Mr. X.

Thanks a lot !

One problem has been solved.
(Maybe as I use IE7, thing work bit differently,
and my code work only with first line : <!DOCTYPE ...>
It may not be necessary for IE6, so I persume it look good for Jonathan.
I want a global solution, fits for IE 5.5 and more)

The other one :
==========
When I want an element to be at relative position to its owner, I usually
used <div>.

He following code doesn't do as expected (the inner <div> should be relative
to it's owner).

Here is my code (only without the bitmaps, related in advanced to other
thread I have openned) :

html code :
index1.html
========
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
</head>
<body>
<div id = "wrap">
<div id = "picture1">
</div>
</div>
</body>
</html>

css code (styles.css)
==============
#wrap
{
top:0;
height:850px;
width:760px;
margin:auto;
visibility:visible;
background-image:url('bk_img.gif');
background-repeat:no-repeat;
}

#picture1 {
position: absolute;
top:0px;
left:20px;
height:100%;
width:150px;
background:url('img1.gif');
background-repeat:no-repeat;
background-size:auto;
}

The above doesn't work properly.
Picture1's position is relative to the viewport, and not to the outer div
"wrap".

Maybe the whole problem is just a comma ...

Why the above dosen't work properly ?

Thanks :)
 
M

Mr. X.

Sorry.
I just in the code wrote positon instead of position,
and the reference is relative, and not absolute.

Thanks anyway :)
 
D

dorayme

"Mr. X. said:
Thanks a lot !

One problem has been solved.
(Maybe as I use IE7, thing work bit differently,
and my code work only with first line : <!DOCTYPE ...>
It may not be necessary for IE6, so I persume it look good for Jonathan.
I want a global solution, fits for IE 5.5 and more)

The other one :
==========
When I want an element to be at relative position to its owner, I usually
used <div>.

He following code doesn't do as expected (the inner <div> should be relative
to it's owner).

Here is my code (only without the bitmaps, related in advanced to other
thread I have openned) :
Click to expand...
<div id = "wrap">
<div id = "picture1">
</div>
</div>
</body>
</html>

css code (styles.css)
==============
#wrap
{
top:0;
height:850px;
width:760px;
Click to expand...



Try

#wrap {
position: relative;

and do put a border on things so you can see what is happening.
 
R

rf

Oops, sorry, pressed send by mistake. This is in addition to my prior post.
The other one :
==========
Click to expand...
He following code doesn't do as expected (the inner <div> should be
relative to it's owner).
Click to expand...

No such thing as owner. You probably mean parent element.
<div id = "wrap">
<div id = "picture1">
</div>
</div>
</body>
</html>

css code (styles.css)
==============
#wrap
{
top:0;
height:850px;
width:760px;
margin:auto;
visibility:visible;
background-image:url('bk_img.gif');
background-repeat:no-repeat;
}

#picture1 {
position: absolute;
top:0px;
left:20px;
height:100%;
width:150px;
background:url('img1.gif');
background-repeat:no-repeat;
background-size:auto;
}

The above doesn't work properly.
Picture1's position is relative to the viewport, and not to the outer div
"wrap".
Click to expand...

Absolutely positioned elements are not positioned within their parent. They
are positioned within their containing ancestor. The containing ancestor is
the most recent ancestor that has position other than the default of static,
or the body if no such ancestor exist, as in your case.
Maybe the whole problem is just a comma ...
Nope.

Why the above dosen't work properly ?
Click to expand...

To make this work you can give the "wrap" element a position other than
static. The most suitable one is relative as this does not affect the "wrap"
element much at all.

#wrap
{
position: relative;
....
}

However, with just snippits of code this is only a guess. Where is the URL
to this page you are working on?
 
J

Jonathan N. Little

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

Don't believe you! Either you have a hardware problem or you do not
define "centered" in the same way as the rest of the world.

"center" mean equal on the *left* and *right* which the previous example
does work in IE7. I suspect you mean vertically aligned to the center,
where there you have a problem with IE because regular block elements do
not support "vertical-align: middle". For modern browsers you can set
the containing block to "display: table-cell" but *no* MS browser will
support this.
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
}
Click to expand...

Is "myid" and image? If so, setting margins to "auto" on an image will
*not* work. Images are *inline* by default and margins are not
applicable on inline elements. You must also add "display: block"
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...

If you would stop twitting around with these useless code snippets and
post a URL to an actual attempt at what you are trying we could give you
an answer.
 
M

Mr. X.

I have already answered,
that when I put the line :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

(as the site els said it is a good check,
http://locusmeus.com/temp/centered.html
)

while your example did not have <!DOCTYPE ... >
Maybe it's because I have IE7.
Maybe for something else.
I did sent my code several times (not all the site, but the whole relevant
elements, which I did copy & paste from tested code, that didn't work.
It doesn't metter, whether the image is an apple, or an airplane, to decide
if my code was wrong).

No offense, please.
I appreciate anyone who answer this thread.
Thank you.

For me it's a closed thread, since the problem has been solved, and I have
thanked all.
Main several things I have learned.
1. I should use <!DOCTYPE ... >
2. How to center my elements.
3. Whether is it so so importent to center elements (for compitabilies of
some resolutions, generaly 800x600 used with much less scrolling - it is
good thing to make the needs to scrolling horizontal, uneccessary on
design - If it's an interesting issue, maybe I should open another thread
for that).
4. Concept of <DIV>

Thanks :)
 
D

dorayme

"rf said:
#wrap
{
position: relative;
...
Click to expand...

Oy! I said that to Mr. X at 9.50 PM and you come along (after a nice
post earlier about latency btw) and say this at 10.02 PM.

<g>
 
J

Jonathan N. Little

Mr. X. said:
I have already answered,
Click to expand...

Answered what? Please learn to quote properly in Usenet!
that when I put the line :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Click to expand...

Also realize that all new servers to not update at the exact same time,
sometimes there can be a significant delay from when your post and when
nTelos, my news server update to show your post.
(as the site els said it is a good check,
http://locusmeus.com/temp/centered.html
)

while your example did not have <!DOCTYPE ... >
Click to expand...

It certainly did! I shall requote:

See Doctype
||||||||||||
vvvvvvvvvvvvv

<!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>
Maybe it's because I have IE7.
Click to expand...

I also have IE7, (and IE6 & 5.5 & 5.0 and 4.0 and 3.0)
Maybe for something else.
Click to expand...

Yes, you copied it incorrectly
I did sent my code several times (not all the site, but the whole relevant
elements, which I did copy & paste from tested code, that didn't work.
It doesn't metter, whether the image is an apple, or an airplane, to decide
if my code was wrong).
Click to expand...

No, you sent snippets. Since you do not know what your problem was, else
why would you be asking, then how could you be so sure that you included
*all* the relevant buts in your snippets? The answer is you cannot, and
you did not as the missing doctype demonstrated.
No offense, please.
Click to expand...

None really taken, but I will give you a tip, next time if you want
help, don't make us play 20 questions guessing at what your code is.
Post a URL to a live page that exhibits the problem and and describe in
your post what you see and what you wish to see...all will go much smoother.
I appreciate anyone who answer this thread.
Thank you.

For me it's a closed thread, since the problem has been solved, and I have
thanked all.
Click to expand...

Maybe for you, but others may wish further discussion. Usenet dicussion
group not a help desk forum.
Main several things I have learned.
1. I should use <!DOCTYPE ... >
2. How to center my elements.
3. Whether is it so so importent to center elements (for compitabilies of
some resolutions, generaly 800x600 used with much less scrolling - it is
good thing to make the needs to scrolling horizontal, uneccessary on
design - If it's an interesting issue, maybe I should open another thread
for that).
Click to expand...

Not sure what you are saying with #3, But vertical scrolling: OK,
horizontal scrolling: not so OK for websites...

4. Concept of <DIV>
Click to expand...

add:
5. I should post a URL next time.
 
D

dorayme

"Jonathan N. Little said:
Answered what? Please learn to quote properly in Usenet!
....

add:
5. I should post a URL next time.
Click to expand...

I think one reason that Mr X does not not do this is because he is a bit
lost and anything he did post might not help matters. I would say it is
time for Mr X to carefully go through as much of:

<http://htmldog.com/guides/htmlbeginner/>

as he can.
 

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? 1

Members online

No members online now.
Total: 532 (members: 0, guests: 532)
Robots: 124

Forum statistics

Threads
474,091
Messages
2,570,605
Members
47,225
Latest member
DarrinWhit

Latest Threads

Top