div+css+positioning

[Cezary]

Hi Folks!

I wrote this below code and I want to get this effect:

[div width=100% [div727px [div1 left][div2 centered][div3 right]
727px] ]

but, there must be some errors. Please give me some advices.

Regards,
Cezary.

[CSS]
..logo{
width:269px;
background-repeat:no-repeat;
background-image:url('logo_ramka.gif');
text-align:center;
height:73px;
vertical-align:middle
}
..timer{
width: 130px;
}
..toptable{
width:100%;
height:90px;
background-image: url('bar1.gif');
}
..toptable727{
width:727px;
height:90px;
text-align:left;
padding: 8px 0px 0px 0px;
background-image: url('bar1.gif');
}
[HTML]

<div class="toptable">
<div class="toptable727">
<div class="logo"><img width="259" height="61" src="logo.gif"
alt="Logo"></div>
<div class="timer">
<!-- Timer -->
<script language="javascript" type="text/JavaScript">
if (FlashInstalled())
FlashWrite('timer.swf',60,60);
else
document.write('<img src="blank.gif" width="1" height="1"
alt="&nbsp;">');
</script>
<noscript>
<img src="blank.gif" width="1" height="1" alt="timer" border="0">
</noscript>
</div>

</div>
</div>

[Cezary]

Here is my code:
http://www.intertek.com.pl/test/index.htm

I want to get: block A from left, block B center of red block, block C
right.

How can I do it ? Please give me some advices.
Regards,
Cezary.

[Cezary]

Here is my code:
http://www.intertek.com.pl/test/index.htm

I want to get: block A from left, block B center of red block, block C
right.

How can I do it ? Please give me some advices.
Regards,
Cezary.

[Mikko Rantalainen]

Cezary / 2004-04-14 18:57:

Here is my code:
http://www.intertek.com.pl/test/index.htm

I want to get: block A from left, block B center of red block, block C
right.

How can I do it ? Please give me some advices.

Just add some rules (some of these just undo your rules):

..toptable727
{
position: relative;
}

..logo
{
position: absolute;
left: 8px;
}
..timer
{
text-align: left;
margin-left: auto;
margin-right: auto;
float: none;
left: auto;
position: static;
width: 10em;
}
..loginout
{
position: absolute;
right: 4px;
top: 3px;
}

(That is, use absolute positioning for .logo and .loginout and just
let the .timer to flow where it should go. Older versions of MSIE
have a bug that prevents them from centering the .timer element with
the margin only. Workaround is to specify text-align: center for the
..toptable727 element. Surely you have a *really* good reason to use
the pixel unit?)

I'd suggest you to read the specification and understand how
absolute positioning works before trying to use it.

http://www.w3.org/TR/CSS21/
http://www.w3.org/TR/CSS21/visuren.h...tioning-scheme
http://www.w3.org/TR/CSS21/visudet.h...hs_and_margins

And in case you want to make the results compatible with different
versions of MSIE, continue here:
http://msdn.microsoft.com/library/en...hancements.asp

--
Mikko

[Mikko Rantalainen]

Cezary / 2004-04-14 18:57:

Here is my code:
http://www.intertek.com.pl/test/index.htm

I want to get: block A from left, block B center of red block, block C
right.

How can I do it ? Please give me some advices.

Just add some rules (some of these just undo your rules):

..toptable727
{
position: relative;
}

..logo
{
position: absolute;
left: 8px;
}
..timer
{
text-align: left;
margin-left: auto;
margin-right: auto;
float: none;
left: auto;
position: static;
width: 10em;
}
..loginout
{
position: absolute;
right: 4px;
top: 3px;
}

(That is, use absolute positioning for .logo and .loginout and just
let the .timer to flow where it should go. Older versions of MSIE
have a bug that prevents them from centering the .timer element with
the margin only. Workaround is to specify text-align: center for the
..toptable727 element. Surely you have a *really* good reason to use
the pixel unit?)

I'd suggest you to read the specification and understand how
absolute positioning works before trying to use it.

http://www.w3.org/TR/CSS21/
http://www.w3.org/TR/CSS21/visuren.h...tioning-scheme
http://www.w3.org/TR/CSS21/visudet.h...hs_and_margins

And in case you want to make the results compatible with different
versions of MSIE, continue here:
http://msdn.microsoft.com/library/en...hancements.asp

--
Mikko

[Cezary]

I was corrected my code: http://www.intertek.com.pl/test/index.htm before I
was read Your message. So, now it's working, but in IE 4.0 doesn't working.

I will try to use Your idea, but could You check my corrected code now ?
Thanks.

Regards,
Cezary.

[Cezary]

I was corrected my code: http://www.intertek.com.pl/test/index.htm before I
was read Your message. So, now it's working, but in IE 4.0 doesn't working.

I will try to use Your idea, but could You check my corrected code now ?
Thanks.

Regards,
Cezary.

[Mikko Rantalainen]

Cezary / 2004-04-15 01:14:

I was corrected my code: http://www.intertek.com.pl/test/index.htm before I
was read Your message. So, now it's working, but in IE 4.0 doesn't working.

I will try to use Your idea, but could You check my corrected code now ?
Thanks.

I don't have IE 4.0 to test with. I guess the problem is with the
..timer element which uses position: absolute. Just center it with
"margin: auto" or put "text-align: center" in the parent element.
The latter shouldn't center the block level elements (such as DIV)
but older MSIE versions had a bug that did just that. You can undo
the "text-align: center" in the child elements (just put ".logo,
..timer, .loginout { text-align: center; }".

Try to get rid of these properties in .timer:

width: auto; <---- [1]
height:90px;
left:60%; <---- [2]
margin-left:-100px; <---- [3]
text-align: center;
position:absolute; <---- [4]
border: 1px solid black;

[1] (it's the default value anyway and) because this will make the
element fill the .toptable727 after you remove position: absolute.
If you want to center the .timer block, it's width must be less than
that of the .toptable727 (which is obviously 727px).

[2] This just doesn't make sense after you remove position: absolute

[3] Don't use negative margin if you want to be compatible with
older browsers.

[4] Don't use position: absolute (or position: anything-but-static)
if you want to be compatible with older browsers.
Or you could just ignore the whole MSIE 4.0 problem. If somebody
still uses MSIE 4.0 he must be out of his mind because all of the
*known* security problems that it has. MSIE 6.0 SP1 with all the
hotfixes applied is the only MSIE version that is even relatively
safe to use. So if the user doesn't want to update because your site
looks bad in his browser, perhaps he will upgrade not to have
malicious software run in his computer without his consent.

--
Mikko

[Mikko Rantalainen]

Cezary / 2004-04-15 01:14:

I was corrected my code: http://www.intertek.com.pl/test/index.htm before I
was read Your message. So, now it's working, but in IE 4.0 doesn't working.

I will try to use Your idea, but could You check my corrected code now ?
Thanks.

I don't have IE 4.0 to test with. I guess the problem is with the
..timer element which uses position: absolute. Just center it with
"margin: auto" or put "text-align: center" in the parent element.
The latter shouldn't center the block level elements (such as DIV)
but older MSIE versions had a bug that did just that. You can undo
the "text-align: center" in the child elements (just put ".logo,
..timer, .loginout { text-align: center; }".

Try to get rid of these properties in .timer:

width: auto; <---- [1]
height:90px;
left:60%; <---- [2]
margin-left:-100px; <---- [3]
text-align: center;
position:absolute; <---- [4]
border: 1px solid black;

[1] (it's the default value anyway and) because this will make the
element fill the .toptable727 after you remove position: absolute.
If you want to center the .timer block, it's width must be less than
that of the .toptable727 (which is obviously 727px).

[2] This just doesn't make sense after you remove position: absolute

[3] Don't use negative margin if you want to be compatible with
older browsers.

[4] Don't use position: absolute (or position: anything-but-static)
if you want to be compatible with older browsers.
Or you could just ignore the whole MSIE 4.0 problem. If somebody
still uses MSIE 4.0 he must be out of his mind because all of the
*known* security problems that it has. MSIE 6.0 SP1 with all the
hotfixes applied is the only MSIE version that is even relatively
safe to use. So if the user doesn't want to update because your site
looks bad in his browser, perhaps he will upgrade not to have
malicious software run in his computer without his consent.

--
Mikko

[Cezary]

I was corrected my last code:

http://www.intertek.com.pl/test/index.htm . In Opera 7.23, Mozilla 1.6 and
IE6.0 this example is view correct, but in IE5.0 is aligned to left. Why ?

Regards,
Cezary.

[Cezary]

I was corrected my last code:

http://www.intertek.com.pl/test/index.htm . In Opera 7.23, Mozilla 1.6 and
IE6.0 this example is view correct, but in IE5.0 is aligned to left. Why ?

Regards,
Cezary.