473,698 Members | 2,005 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 2244
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
32053
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, these images do not move (obviously). However, the rest of my content is auto centered as...
36
4104
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 being told our policies were contradictory. If we're going to
3
6726
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 horizontal scrollbar. I spent a couple of hours looking at the past few months of posts to
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
5449
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 they were doing with all of the CSS code. There was only one part that I did not quite understand...
11
2632
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
2395
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Home</title> <meta...
2
2469
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 on the right - all on the same line. This all seems to work fine until the text on the right...
1
1268
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 compensate for these five pixels, then the object is correctly positioned on the widescreen monitor but...
3
2079
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
8671
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 usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8598
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 synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9152
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. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9016
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 captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
8856
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 choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6515
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 instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4360
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
2
2321
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
1997
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.