473,560 Members | 2,805 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

div+css+positio ning

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="toptable 727">
<div class="logo"><i mg width="259" height="61" src="logo.gif"
alt="Logo"></div>
<div class="timer">
<!-- Timer -->
<script language="javas cript" type="text/JavaScript">
if (FlashInstalled ())
FlashWrite('tim er.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>
Jul 20 '05 #1
10 2220
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.
Jul 20 '05 #2
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.
Jul 20 '05 #3
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
Jul 20 '05 #4
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
Jul 20 '05 #5
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.
Jul 20 '05 #6
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.
Jul 20 '05 #7
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:absolu te; <---- [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
Jul 20 '05 #8
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:absolu te; <---- [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
Jul 20 '05 #9
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.
Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
32032
by: Bryan R. Meyer | last post by:
Hello Everyone, The problem of browser resizing has become an issue for me. While redesigning my webpage, I set the left and right margins to be auto so that my content would be centered. However, there are images that I used absolute positioning in order to place them in the appropriate location on my page. When I do a browser resize,...
36
4086
by: Jack Hughes | last post by:
This argument has come up two or three times lately. We have a web standards document at our company that say "Use valid HTML 4; We don't recommend switching to DIV-based CSS-P for layout just yet though, tables are a lot easier." That's because we have a lot of developers who aren't ready to move to CSS-P and DIVs just yet. But I'm...
3
6723
by: Mike Anderson | last post by:
I'm having a problem with the positioning of a div block in IE6. http://www.uah.edu/Athletics/index.shtml When the window is resized to a width smaller than the width of the "body" div (that is, the main content of the page), that content jumps downward. The content displays properly in Mozilla Firebird 0.6, creating the necessary...
0
850
by: Cezary | last post by:
Hi Folks! I wrote this below code and I want to get this effect: 727px] ] but, there must be some errors. Please give me some advices. Regards,
4
5444
by: DKode | last post by:
Ok, I signed up for a blogger.com account today and when I went to edit the template design I noticed it is written in pure CSS. At the sight of this I danced for joy, as I am currently writing a dotnet asp application that will use css positioning for the content. I picked apart all of the templates at blogger.com and understand what...
11
2625
by: NS | last post by:
I am relativly new to css positioning and have a question regarding the display of a DHTML pop-up Here is the basic HTML I am using: <html> <head> <script language="JavaScript"> <!--
3
2392
by: gstick | last post by:
I am missing something about css positioning if Firefox is always right. I have simplifed some code that I've tested in both browers. Firefox responds to the left position code but not the top. IE responds to both. Would someone point out where I have gone wrong? The Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...
2
2465
by: Slick50 | last post by:
I am about ready to finally give up on CSS and fall back to tables. Positioning is becoming too frustrating for the novice with CSS alone... I have a simple form. Conceptually I divide up each input of user information into rows. On one particular row I want a label to be displayed on the left, a <textareainput in the middle, and some text...
1
1261
by: mohammadtaha | last post by:
Hi, I am using CSS to position objects (<SPAN> and <DIV> tags) on my webpage, which is working great on regular computer monitors, when I view the same page on a wide screen laptop monitor, one of my objects (<span id="logo">) changes position and is placed about 5 pixels below where it suppose to be. If I adjust the position to...
3
2077
by: DevInCode | last post by:
I have 3 divs. I want one on the left side of the body, one in the middle and one on the right. I can accomplish this easily with absolute positioning. However when I try to use floats the right div ends up being pushed down. Suggestions? Here is my code:
0
7631
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7551
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7840
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8063
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
7916
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6187
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5458
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3584
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1168
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.