/    Sign up×
Community /Pin to ProfileBookmark

How do I keep image and text positioned

Copy linkTweet thisAlerts:
Mar 10.2006

This is my first attempt to positioning multiple elements. What I need to do is keep things from jumbling together if the window is not full size. I have a central image fixed in the center as background, an image just above that one, a central H1 line, a copyright line below the two images and a publish date in the right hand bottom corner. I’ve put in divs and tried absolute positions but I’m still off unless the image is full size. Should I container everything and if so how do I that?

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelMar 10.2006 — Without a link to see what you're doing, it's hard to answer your question.

"position:absolute" is based upon a starting point on your viewscreen, so even if you re-size the viewport manually, the image remains exactly in the same spot. This is good for top-of-page logos or left-hand side navigation stuff. Things that you do NOT want to move around, under any circumstance.

Use "position:absolute" sparingly, it has potential to cause a lot of problems with other things later on (yet, when properly used, it does serve a great purpose).

"position:relative" is better, and it 'positions relatively' to the element above/before it, giving some sence of linearation. You can also state 'exact relative positions' too. That is to say, if you want an image placed 'relative' to the left of the container and so many pixel from the top of container, you'd say:

"position:relative; left:50px top:100px"; and that puts the image in the container fifty pixels to the right, and 100 pixels from the top. Disadvantage here is that it only appears to move WHERE it is displayed. The image is actually where it is, but that it is being displayed 'over 50px and down 100px'. It will leave a 'null spot' on the container, where nothing else can sit. That is where an 'absoslute' would work... as it sits 'off the page' and text/content/other images can occupy the same space.

Then, add to this relative position, is "z-index:[I]n[/I]" (whereby "[I]n[/I]" is a whole number like 1, 2, 3, 999, -whatever!), you can create 'layers' one on top of another... you can 'overlap' images and stuff, creating a 'stacking order', if you wish. The higher the number, the 'closer to you' the image is in the stacking order. -Great styling potential there!

-Sounds complicated, I know. But once you get your head around what happens in *css, it is really quite elegant and exiciting what you can do!

I'd recommend a good *css tutorial.
×

Success!

Help @mballai 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.26,
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,
)...