Jump to content

Centering page, but with minimum coordinates


Felix-The-Ghost

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.

Link to comment
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...:/

Link to comment
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.

Link to comment
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.
Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
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.

Link to comment
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*/

Link to comment
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;}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...