Background position

liunx

Guest
Hi,i have a problem with the backgrounds.I read all the tutorials here,but none of them explains what i need to know.I made a test page here: <!-- m --><a class="postlink" href="http://elpin.scifi-meshes.com/test.htm">http://elpin.scifi-meshes.com/test.htm</a><!-- m --><br />
Try to move the borders of the frames or resize the window of the browser.See what it is doing?The background (tiled orange squares) is moving where the frames are connected.I used Style sheets to attach the background to the left edge,right edge, top, bottom - many combinations, but what i really need is to ABSOUTELY FIX the background so it doesnt move even if you resize the window or move the borders of the frames. Pleaes,could you help me? Thank you in advance.<!--content-->background:fixed; should do it.<br />
<br />
Edit: Although I'm not sure how IE will handle it.<!--content-->unfortunately, background: fixed, works only when you are scrolling. At least for me - i use IE. But thanks for help.<!--content-->Oh sorry, I just checked your page and I see the problem now. What you could do is to have a page with an iframe in the middle of it, so that the background would stay put while the iframe is resized.<!--content-->iframe? Never heard of it. Could you explain it please?<!--content-->An iframe is an inline frame that can be positioned where you want it on the page. This is how you can use it:<br />
<br />
<iframe src=http://www.webdeveloper.com/forum/archive/index.php/"page.html" name="hello" width="200" height="200" frameborder="1" scrolling="auto">Content that appears if iframes are not supported.</iframe><!--content-->Thanks a lot! Now i dont need to have any frames there! Just one iframe. Huh, that has to be something new, because Macromedia Dreamweaver is not supporting it, nor MS Frontpage...<br />
<br />
Could you please tell me how to position the iframe on the page? What code do i need to write there?<!--content-->Well you could do one of 3 things:<br />
<br />
* Create a simple table to contain it in the correct position on the page, but that would make the iframe un-resizeable.<br />
<br />
* position it absolutely, inside the iframe tag put this:<br />
<br />
style="position:absolute;top100px;left100px;"<br />
<br />
feel free to change the numbers:).<br />
However this will pull the iframe out of the flow of content and would therefore allow other content to be displayed either under or over it (depending on whether the content is coded before or after the iframe).<br />
<br />
* Use a lot of div tags to contain all of your content (this may be the easiest and best option), making sure that %age's are used for dimentions wherever possible. The div containing the iframe theoretically should stretch to contain it and also push the div's around it out of the way so that no content is hidden.<!--content-->Ahh, ok, thanks again!<!--content-->Actually having thought about it tables may work, however the W3C don't recommend them for layout.<br />
<br />
If you want me to have a go at making a layout with div's, just give me some dimentions of area's and I'll have a stab.<!--content-->You are very kind, but id like to learn it on my own. I just need a few advices :)<br />
<br />
I used iframes as you told me and the result is very good. Just one thing. I dont know how to use "divs" and because i need the iframe to be resizable and all the text on the page will be only in that iframe, id like to use the second option you told me, but are you sure that style="position:absolute;top100px;left100px;" is right? Because when i add this to the iframe tag, it doesnt do anything. This is the complete line i use:<br />
<br />
<iframe src=http://www.webdeveloper.com/forum/archive/index.php/"galerie.html" name="hlavni" width="760" height="400" frameborder="1" scrolling="auto" style="position: absolute; top100px; left100px;">Content that appears if iframes are not supported.</iframe><!--content-->Also, could you tell me how to make the iframe to resize when the whole browser window is resizing?<br />
<br />
Look here: <!-- w --><a class="postlink" href="http://www.jafr.cz/pokus">www.jafr.cz/pokus</a><!-- w --><br />
<br />
Thats the original site i made with many frames. Its working properly (only the background is wrong). Try to resize the browser window. You will see the central - white frame is resizing also, thats what id like to achieve with iframe. Could you tell me how to do this?<!--content-->I made this, (see attachment), it uses a table of 100% width and a three td cells to contain the iframe. The middle td cell is the one with the iframe in and there are two other td's at the sides that change size to keep the iframe centered. If the window is resized too small for the iframe width, the iframe shrinks.<br />
<br />
It works in IE 6, Netscape 7 and Opera 7.<br />
<br />
This should work for you but if it doesn't let me know and I'll try something different.<br />
<br />
Oh, and one last point, I used tables so that you no longer need to worry about absolute positioning, you can just insert this table where you want the iframe and let the browser worry about where it should go.<!--content-->Thank you very much! Thats exactly what i wanted to know. Now when i understood how this works, i also applied the same procedure for height resizing and everything is great! Thanks again!<br />
<br />
Now when this is solved, could i ask you another question about scroll bars? I know how to assign a specific color to them, but what id like to know is if there is a way to not assign them a specific color, but rather a gradient made by two or more colors... Is it possible?<!--content-->I'm afraid that I don't know much about changing the colour of scroll bars, so you may be better asking this question in the CSS forum.<!--content-->OK, thanks anyway...<!--content-->
 
Back
Top