I have big problem with this.. Red square is div element..I can't find how to red square stay in the same position on the background when resizing..You can see problem on picture..in one resolution the red square is on the head and on the oder far away..bacause width changed...The same question is for other elements..When i resize window they move..I don't want that..I want them to stay in the same position and that scrool bar appears. I want them to be like one part. I hope you understand me..Let me know if you need my css and html file.
Attachment | Size |
---|---|
Untitled.jpg | 387.97 KB |
"Let me know if you need my css and html file."
Always, we can't debug an image.
Were I to guess, I'd say that you're using the position property to locate your elements. As a rule, that is a not good idea, unless all other layout avenues have been test and found wanting.
cheers,
gary
Different ways to accomplish this
1. using the image as background
You can use the image as background with its container having fixed width & then by using margin:0 auto for the red div to center align.
2. using the image as image: img tag
by placing the image tag, & relative, absolute workout.
PFA code: copy the code & save this in as an .html file, keep the image in the same directory as html file, for demo, later on change as necessary
<!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>center align box</title> <style> body { font: normal 12px Arial, Helvetica, sans-serif } </style> </head> <body> <h1>Attempt one: with background image </h1> <div style="background:url(hero_fraiche.jpg) center top no-repeat; width:650px; height:270px"> <div style="margin:0 auto; width:150px; height:150px; background:green"></div> </div> <h1>Attempt two: with img tag </h1> <div style="width:650px; height:270px; position:relative"> <img src="hero_fraiche.jpg" width="650" height="270" alt="" /> <div style="position:absolute; left:0; top:0; width:100%"> <div style="margin:0 auto; width:150px; height:150px; background:green"></div> </div> </div> </body> </html>
Attachment | Size |
---|---|
hero_fraiche.jpg | 43.35 KB |