/    Sign up×
Community /Pin to ProfileBookmark

Initial position of image in container

Copy linkTweet thisAlerts:
May 16.2007

I have the following div container in which an image is located.

<div class=”right”>
<img src=”../../assets/maps/0802_map150.jpg” />
</div>

The CSS for the div is:

div.right
{
position:absolute;
top: 127px;
left: 359px;
height: 440px;
width: 388px;
margin: 0px 10px 0px 0px;
padding: 0px 0px 0px 0px;
background-color:#FFFFFF;
overflow:auto;
}

The image is much larger than the container and with overflow set to auto the scroll bars are shown. That all works great.

The image is a map with a trail marked on it. I would like to control the initial location of the image in the container so that the start of the trail is in the center of the container. IS THERE A PROPERTY THAT WILL ALLOW ME TO SET THE POSITION OF THE IMAGE IN THE CONTAINER WHEN THE PAGE IS FIRST VIEWED AND WILL STILL ALLOW ME TO USE THE SCROLL BARS TO MOVE THE IMAGE AFTERWARDS?

Thanks for any help you can supply me.

Marcus

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLAMay 16.2007 — You could use the image as the div's background, then set its position:
<i>
</i>&lt;div style="position:absolute;
top: 127px;
left: 359px;
height: 440px;
width: 388px;
margin: 0px 10px 0px 0px;
padding: 0px 0px 0px 0px;
background-color:#FFFFFF;
overflow:auto;
background: url(map.jpg) no-repeat center center"&gt;&amp;nbsp;&lt;/div&gt;


But, keep in mind that this won't print, unless the viewer has the "print backgrounds" option selected in their browser settings.
Copy linkTweet thisAlerts:
@mlibkindauthorMay 16.2007 — Thanks for your suggestion. However, that does not meet my need which includes the desire to allow the scroll bars to work after the initial placement when the page is opened.

Anyone else have an idea?

Marcus
×

Success!

Help @mlibkind spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...