26 replies to this topic

[ghergich]

Hi I am new to xhtml and css. I am a student and I am trying to learn these so that when I graduate I will have a better understanding of the two. The sad thing is, that none of my teachers are up to snuff on css or xhtml. So I am making a fictitious design firm site to test xhtml and css. This is my first page and I got the css and xhtml to validate. This was tuff to do because I used dreamweaver and I had to employ some tricks I found to get the embedded flash to validate and work in mozzila and explorer. I am using a wrapper div to center the content and it works nicely, however, I have 3 absolute positioned divs and they look fine at screen resolution of 1024 but they move around in an undesirable way when I view the page and 800x600 or any other size. Could someone help? I need a real step by step solution because I am so inexperienced
here is a link to the site:design yolk
here is a link to the css: css document
I just want the absolute positioned elements to scale with the other elements
ps-links or dead as of now.
and thats latin dummy text if you were wondering.

[webstream]

You might want to checkout some of the things I have experimented with, which include div tags, css inside tables, positioning, etc... I also reference some great web sites to help you explore CSS further and TopStyle which is a great CSS tool.

www.webstreamdynamics.com/css-by-example/

I leave off the "http://" so you need to do a copy and paste into the browser's address bar.

HTH,

webstream

[ghergich]

thanks I have found your page before while searching and have used it. However, could someone provide a specific example for me of what I am doing wrong. Thanks

[webstream]

You need to study the source files and see how absolute positioning works within it's "containing" block. Experiment with relative and fixed positioning to see the differences between the three.

webstream

[domokun]

have a look-see at sites like bluerobot.com and glish.com - they should show your the wonderful world of relative postioning!

good luck

[bkernst]

A major tip for absolute positioning:
NEVER use your absolute positioned div tags inside our page content, have them either right after the starting body tag or before the ending one and never mixed with your content, otherwise you will get some really strange behaviour.

For IE and Mac issues I do suggest that you do not set borders or colours for the div tags (I burned myself on that a while ago). Table inside a div tag should also not have a width using percentages, unless they are inside another table.
Also do not forget to use ids for the divs, as well as setting coordinates, width, height, visibility and the z-index.

Div tags do not go over select boxes (<select></select>) or Flash.

Bernhard

[ghergich]

cool thanks guys, Im learning new stuff everyday and every little bit helps

[ghergich]

Here is a further question though. Could I use an all flash background place it in a container div....then use a separate div to display my html text.
The problem I am having is that when I position the div with the html text over the flash, it disappears. The html text will only display when it is not over the flash. Is there a workaround?

[ghergich]

here is a link that explains the answer to my question. flash link Has anyone ever employed this method? I am going to play around with it but would love some feedback.

[Kev]

To the op- learn as much as you can about relative poitioning. Here's an article written by a friend that might help you down that road


http://www.ddncafe.c...tent.php?aid=52

A major tip for absolute positioning:
NEVER use your absolute positioned div tags inside our page content, have them either right after the starting body tag or before the ending one and never mixed with your content, otherwise you will get some really strange behaviour.

For IE and Mac issues I do suggest that you do not set borders or colours for the div tags (I burned myself on that a while ago).  Table inside a div tag should also not have a width using percentages, unless they are inside another table.
Also do not forget to use ids for the divs, as well as setting coordinates, width, height, visibility and the z-index.

Those are some bizarre tips my friend Can I ask how you reached these conclusions?

[Kev]

Has anyone ever employed this method? I am going to play around with it but would love some feedback.

Its a well documented method- it works fine on Moz/Linux so the vast majority of your audience will see it as intended. If you care about NS4.7/6 users you could give them an alternate page- I can post you some Flash sniffer code if you want it.

[ghergich]

thanks that would be great.

[bkernst]

A major tip for absolute positioning:
NEVER use your absolute positioned div tags inside your page content, have them either right after the starting body tag or before the ending one and never mixed with your content, otherwise you will get some really strange behaviour.

For IE and Mac issues I do suggest that you do not set borders or colours for the div tags (I burned myself on that a while ago).  Table inside a div tag should also not have a width using percentages, unless they are inside another table.
Also do not forget to use ids for the divs, as well as setting coordinates, width, height, visibility and the z-index.

Those are some bizarre tips my friend Can I ask how you reached these conclusions?

Starting with IE version 4 upwards I have had lots of time to experiment with div tags. A colleague of mine also had IE behavign very oddly on some occasions when using absolute positioning somewhere in the content, if you want to always the the div tag showing up on the same spot. Sometimes they do need to be places elsewhere in the HTML, but that is a rae occasion for me.

Another colleague does have a Mac in the office with Safari and IE, and some clients haven't got PCs, try your sites on those browsers, and some really weird effects will show the moment a div tag has borders or colours, and it contains somethign that would stretch its measurements, the browser actually renders it in its original size and not the stretched size, which works fine on the Windows version of IE.

Also from IE 4 up to IE 6, using the following caused weird effects: <div style="position:absolute; z-index:1; left:200px; top: 150px; width:100px; height:100px;"><table width="100%"> ...
What happened was that the table was using 100% of the browser client area (the part where the site shows) width and due to the positioning, it went off on the right side of the page, and caused a horizontal scrollbar. The idea was that the table fills 100% of the width of the div like it would do when being put inside a TD tag. I am not sure if IE still does that, since I now always use the proper width when putting a table immediately inside a div. As far as I remember, my latest test on IE still showed that problem. IE 5.5 cetainly still has it.

Bernhard

[hurricane]

Also from IE 4 up to IE 6, using the following caused weird effects: <div style="position:absolute; z-index:1; left:200px; top: 150px; width:100px; height:100px;"><table width="100%"> ...
What happened was that the table was using 100% of the browser client area (the part where the site shows) width and due to the positioning, it went off on the right side of the page, and caused a horizontal scrollbar.

That's because with those settings it should go off the page and introduce a scroll bar. 100% is 100%, adding a 200px left setting makes it 100% +200px - giving you 200px of scroll - remember, default overflow is visible. http://www.w3.org/TR...ef-table-layout

Edited by hurricane, 27 February 2004 - 03:37 AM.

[bkernst]

That's because with those settings it should go off the page and introduce a scroll bar. 100% is 100%, adding a 200px left setting makes it 100% +200px - giving you 200px of scroll - remember, default overflow is visible.

But that should then apply to tables as well, which doesn't hapen, since the div is behaving differently than a table, tables will only stretch if they have been set to stretch or if their content forces them to stretch. Div tags just simply start stretching as if they cannot limit a table inside them like any TD can do.

Just a quick note about Netscape 4.x (I hope nobody is still using this except for testing), Netscape 4.x had a major flaw, when the id of a Div tag had an underscore in it, and it was references using JavaScript, Netscape could only see up to the point before the underscore.

Bernhard