/    Sign up×
Community /Pin to ProfileBookmark

CSS image layout help

Copy linkTweet thisAlerts:
Dec 15.2003

Here’s my prob.

I’m redesigning my website ([url]www.eyecravedvd.com[/url]) and am attempting to place everything centered in a 768px wide table.

I want to place my logo superimposed on top of the table using the

[code]style=”position:absolute[/code]

and defining the paramaters, but if someone with a screen res larger than 800×600 visits the site, the logo won’t be where I want it to be. Does anyone know how I can work around this or define it so that it will always be with the table, which will always be the same size?

Thanks.

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@David_HarrisonDec 15.2003 — Well I can't see on your web-site which image you are referring to, so I'm just going to give a series of general answers.

If you want the image to be centred on the page, do this:

position:absolute;left:50%;left-margin?minus half the image width);

That will centre it on any screen but not necessarily centre it in the table (unless your table is also centred). If you want, you could put the image as the first thing in the table and do something like this:

<table style="position:absolute;"><tr><td>

<img src="lavalamp.png" style="position:absolute;left:50%;margin?top margin) (right margin) (bottom margin) (left margin);">

you can change the margins to position the image pixel perfect on the page and it will look the same in all browsers and on all resolutions.

Hope this helps but I can't do more without seeing an exmple page of what you're trying.
Copy linkTweet thisAlerts:
@ray326Dec 15.2003 — <!-- Boy what a bad case of tableitis! -->

A common technique is to position the image at 50%/50% and then set the top and left margins to negative values that are half the height and width respectively of the image. This works great with a CSS layout but I'm afraid it'll take a lot of extra work with that complex table layout you've got.
Copy linkTweet thisAlerts:
@eyecraveauthorDec 15.2003 — Here's an image of what I'm attempting to do. I think I may have figured it out though. I may have to create an 800px wide table and force the image to stay within that.

I'd prefer not to use a table and do it mostly CSS for the header.

[upl-file uuid=b808b6c2-8971-40af-8c25-428834541688 size=14kB]ecdvd_layout_top.jpg[/upl-file]
×

Success!

Help @eyecrave 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.29,
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,
)...