so heres an easy one, or so i thought. im trying to insert a background image with no reapeat and center it on the page. dead cener x and y. then insert an iframe over it. when i try to center the background heres what happens. http://onlinegamesnz.orcon.net.nz/site2/index.html the image is up the top and half of it cut off image: http://onlinegamesnz.orcon.net.nz/site2/background.png Any ideas? cheers
The background image (in the CSS) needs to be set to 'fixed' (it is set to 'scroll' by default). The background image will remain in the centre/middle, even when you scroll then. Alternatively, you can create a div and position it to be the same size as the image and then centre it horizontally and vertically (not always that simple, but plenty of CSS tricks around).
This worked. background-attachment:fixed; Thanks. One more question. i want to put an iframe right in the middle of that picture with some navigation above the iframe. When i add the iframe in dreamweaver (which it just displays as yellow text, really annoying) i cant drop it down without entering (enter, enter, enter) you know. is there another waY? cheers
You need to give the iframe an ID and use CSS to give the iFrame a set size and then use CSS to centre it. The trick is to offset it with negative margins. So if it is 400px wide, then you need to have margin-left: -400px; (note the minus). e.g.:
So does this go in a separate stylesheet or within the same page. CSS in the <head>? And where in that code do I put the ID?
Yeah, put the CSS with the rest of the CSS (in the head if you have it there). ID tag goes inside the iframe tag <iframe id="center"> etc.
Ok that makes sense. One more thing what about on the CSS code where is the Id specified. How does it know which iframe to apply this CSS to? Thanks for your help
The "iframe#center {" tells it to look for an iframe with the ID of "center" and apply the CSS contained within the brackets.
Ok cool thanks. So will this load over the image correctly even if there are different screen resolutions or text sizes?
it doesnt work.. here my code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> body { background-color: #000; background-repeat: no-repeat; background-position:center; background-attachment:fixed; } .style1 { margin-right: 0px; margin-top: 0px; } .style3 { margin-left: 81px; margin-top: 118px; } iframe#center { position: absolute; width: 900px; height: 400px; top: 50%; margin-top: -200px; left: 50%; margin-left: -200px; } </style> </head> <body style="background-image: url('back2.png')"> <form id="form1" runat="server" style="width: 951px; height: 558px" class="style3"> <div style="position: absolute; left: 246px; top: 176px; width: 766px; height: 480px"> <iframe name="I1" frameborder="0" allowtransparency="true" id="center" style="width: 767px; height: 480px; left: 0px; top: 0px;" src="content.html" class="style1"> </iframe></div> </form> </body> </html> HTML:
ok so got it to psition with the CSS. but the problem still persists when i change text size etc its all over the place <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> body { background-color: #000; background-repeat: no-repeat; background-position:center; background-attachment:fixed; } .style1 { margin-right: 0px; margin-top: 0px; } .style3 { margin-left: 81px; margin-top: 118px; } iframe#center { position: absolute; width: 900px; height: 400px; top: 50%; margin-top: 40px; left: 50%; margin-left: 80px; } </style> </head> <body style="background-image: url('back2.png')"> <form id="form1" runat="server" style="width: 951px; height: 558px" class="style3"> <div style="position: absolute; left: 246px; top: 176px; width: 766px; height: 480px"> <iframe name="I1" frameborder="0" allowtransparency="true" id="center" style="width: 767px; height: 480px; left: 0px; top: 0px;" src="content.html" class="style1"> Your browser does not support inline frames or is currently configured not to display inline frames. </iframe></div> </form> </body> </html> HTML:
so heres the thing. In safari the irame appears different to in IE, other then the scrollbar color. Its in a dirrerent postion View in ie and safari nchdesign.dnserver.net.nz/site1/ how can i make it so its locked to the image and is center to the image in both safari and ie? and possibly even when you change the text size? and resolution would be good ANY IDEAS PLEASE!!!!?? cheers
Why are you using an iframe? Wouldn't it be better to use a div, put the content in the div and define a set width and height and make the content/overflow scroll?
I believe that you now need to learn about CSS on your own. Xbren has been very very patient. He answered your first question very clearly. Then you asked another, and another. Now it seems that you expect him to troubleshoot your code. I suggest that you buy a book or take a course.