• Locked
2 replies [Last post]
Sun, 2013-06-23 11:02
nikolalosic
nikolalosic's picture
Offline
newbie
Last seen: 9 years 1 week ago
Timezone: GMT+2
Joined: 2013-06-23
Posts: 1
Points: 2

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.

AttachmentSize
Untitled.jpg387.97 KB
Top
Tags:
Sun, 2013-06-23 19:13
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

"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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Tue, 2013-06-25 05:15
#2
surajnaikin
surajnaikin's picture
Offline
Enthusiast
india
Last seen: 7 years 19 weeks ago
india
Timezone: GMT+5.5
Joined: 2007-06-09
Posts: 111
Points: 72

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>

AttachmentSize
hero_fraiche.jpg 43.35 KB

Web Technology Institute in Pune

Top
  • Locked