Forum Moderators: not2easy
For example, to put a square frame of a certain color and size somewhere on a page, I would set up a class with a certain background color, then use four div statements with 'position absolute' to put up the four sides of the frame. Worked just fine. But recently, I decided I wanted to have pages designed this way look full-screen whether the users screen was set to 800X600, 1024X768, or whatever. So I converted all the top,bottom,left and rights of the 'position absolute' statements from pixels to percentages and some of the elements are coming out weird, especially at the bottom of the page.
I've heard 'rumors?' that using too many div elements on a page will screw things up, but these pages were just fine with pixels.
Any thoughts/advice on this will be very much appreciated.
Fleg
using too many divs shouldn't "screw" things up ;)
not sure I understand though there's maybe problems with positioning via percentages?
are your "frame" divs fixed width and you just want them to move? can you post a smaple no specifics required.. just to help us get a picture of what you're trying to do.. I'm thinking you could still use a container to position the images and make the container fluid?
sorry, maybe someone else can offer more
Suzy
Say I want a thin purple line to start my frame down the left side of the screen- I have an ID named 'fred' that sets the background color to purple, then I do this:
<p id="fred" div="" style=
"position: absolute; top:40px; left:5px; width:5px; height:550px">
</div></p>
It draws a nice line. Then I add three more lines to make a 5px wide 'frame' that's 550px tall and 790px wide. To make it look fancier, I add four more lines to make a second 'frame' 5px inside the first. To make it fancier still, I shorten the top two lines on the left and add two of the same size on the right, then stick my logo in the center. It's a very nice effect, and I think it looks very stylish so I use it as a 'frame' for all my pages.
Then I decide to change to percentages so the page will adjust to the user's screen size. This makes the above example:
<p id="fred" div="" style=
"position: absolute; top:6.7%; left:.0625%; width:.0625%; height:91.67%">
</div></p>
And so on. Result? At the top of the page, no problem, but at the bottom, the lines either don't meet or cross over the lines they are supposed to connect to exactly to form the 'frame'. Frantic, I start changing the percentages using the 5px width of the lines as 'headroom' to adjust. Here it starts to get weird. To get the bottom-of-the-page line to stretch from the left line to the right, I have to set the width to over 99%! (When it should be 97.5%, correct? Keep in mind here that I am VERY left-handed and to me even simple math is like quantam wave mechanics to a caveman). Then I finally get it to look right, and I switch to 1024X768 and it's off again. I make more adjustments, keep switching screen sizes back and forth, but it just doesn't want to work. The vertical lines are weird like that also, but not so much as the horizontal.
I read elsewhere in this forum that you are the big kahuna of CSS, so I hope you can help me out here.
Thanks,
Fleg
