Jump to content
Felix-The-Ghost

Centering page, but with minimum coordinates

Recommended Posts

positions absolute, fixed become out of flow of other elements, in that elements will fill the space that it these had occupied. removing these positionings, they can now be controlled, and join the flow again, and now margin:0 auto; will take affect. The top, left, bottom, right PROPERTIES have no effect unless a position absolute, fixed, or relative is used.

Share this post


Link to post
Share on other sites
This is precisely why I don't approve of people just printing a bunch of code and not explaining anything.
I have to give that a second.

Share this post


Link to post
Share on other sites

Can you explain what the #clear div is used for?It has 'clear: both;' and it contains nothing in it.Also adjusting padding for multiple elements (three horizontally in this case with left, right elements and the divider)so they are positioned the way you want seems like a guess and check process...:/

Share this post


Link to post
Share on other sites

clear:both is used to prevent the other element flowing around it, In this CASE it forces the container div (#snetworks) to totally encompass all of the elements within it, by using itself as the anchor for bottom edge of #snetworks div, as it cannot identify the bottom edges of floated elements.

Edited by dsonesuk

Share this post


Link to post
Share on other sites
clear:both is used to prevent the other element flowing around it, In this CASE it forces the container div (#snetworks) to totally encompass all of the elements within it, by using itself as the anchor for bottom edge of #snetworks div, as it cannot identify the bottom edges of floated elements.
The alternative would be to give the #snetworks div overflow: auto; which is the way I prefer since it doesn't create unnecessary empty tags.

Share this post


Link to post
Share on other sites

I haven't looked at the code for a long while but it just seemed like he got extreme precision in matching my absolutely positioned elements -- how does one get those numbers without a 'guess-n-check' method?

Share this post


Link to post
Share on other sites
I haven't looked at the code for a long while but it just seemed like he got extreme precision in matching my absolutely positioned elements -- how does one get those numbers without a 'guess-n-check' method?
????

Share this post


Link to post
Share on other sites

I imagine he probably used a "guess-n-check" method. I don't think you can get perfect precision without guessing and checking. You can get a rough idea, especially when you've been designing websites for some time. Experienced developers can probably look at a design and say "that looks like a 15px margin" because they've done it enough times to know approximately how much space 15px really is.

Share this post


Link to post
Share on other sites

you can get a rough idea of what the distance should be, then you use firebug to fine tune it, (highlight properties value, press arrow up or down, to required position)

Share this post


Link to post
Share on other sites

There are certainly situations that would work better with or even require absolute positioning, but in general it should be avoided. And even in those situations where it is used there are certain guidelines to follow so as to achieve the best result.

Share this post


Link to post
Share on other sites

you would have a page, that is preferably centred not using positioning.the images should be within a containing div, which has position: relative; the links will be placed within an container div with position absolute. This is then placed in the position relative div. the position of the absolute div is relative to outer relative div area, at this time it is usually at top:0; and left:0px top left corner.Now all you have to do is set it position propertiestop: 50px; /*50px down from top*/left: 400px /*400px to the right from left edge*/

Share this post


Link to post
Share on other sites

<div id="positionrelativecontainingimages"> <!--width 500px height 300px--><img src="images/anyimgaeyoulike.png" /><!--images or images filling position relative container--><div id="positionabsolutecontaininglinks"><a href="link1"></a><a href="link2"></a><a href="link3"></a></div><!--being position absolute i do not occupy any space. at present i am on top of image, within the boundaries of the position relative div, i am positioned within the position relative by the use of top: left: right: or bottom: to position me 20px from top and 20px from the left use top:20px; left:20px;--></div>#positionrelativecontainingimages{position:relative;width:500px;height:300px;}#positionrelativecontainingimages img{width:500px; height:300px;}#positionabsolutecontaininglinks{position:absolute;top:20px; left:20px;}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...