dsonesuk Posted July 22, 2010 Share Posted July 22, 2010 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 More sharing options...
HungryMind Posted July 22, 2010 Share Posted July 22, 2010 Hi!Thnx 4 Guide Mr. dsonesuk :)I'll Definitely Try.Thnx. Link to comment Share on other sites More sharing options...
ShadowMage Posted July 22, 2010 Share Posted July 22, 2010 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. Link to comment Share on other sites More sharing options...
Felix-The-Ghost Posted July 25, 2010 Author Share Posted July 25, 2010 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 More sharing options...
dsonesuk Posted July 26, 2010 Share Posted July 26, 2010 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 More sharing options...
ShadowMage Posted July 26, 2010 Share Posted July 26, 2010 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 More sharing options...
Felix-The-Ghost Posted August 5, 2010 Author Share Posted August 5, 2010 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? Link to comment Share on other sites More sharing options...
ShadowMage Posted August 5, 2010 Share Posted August 5, 2010 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????? Link to comment Share on other sites More sharing options...
Felix-The-Ghost Posted August 9, 2010 Author Share Posted August 9, 2010 ????How did he know what numbers to put for margin / padding to accurately match my layout without absolute positioning? Link to comment Share on other sites More sharing options...
ShadowMage Posted August 9, 2010 Share Posted August 9, 2010 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 More sharing options...
dsonesuk Posted August 9, 2010 Share Posted August 9, 2010 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) Link to comment Share on other sites More sharing options...
Felix-The-Ghost Posted August 16, 2010 Author Share Posted August 16, 2010 Oh yeah, Firebug can edit values on the fly.Well what happens when I do need to overlap objects with absolute positioning?Is it not possible with this method? Link to comment Share on other sites More sharing options...
ShadowMage Posted August 16, 2010 Share Posted August 16, 2010 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 More sharing options...
Felix-The-Ghost Posted August 16, 2010 Author Share Posted August 16, 2010 That's very vague... I was wondering about how I would center a page that has link buttons (like the ones on that site) on top of some other image. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 17, 2010 Share Posted August 17, 2010 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 More sharing options...
Felix-The-Ghost Posted August 17, 2010 Author Share Posted August 17, 2010 Wow that's confusing...:'( Link to comment Share on other sites More sharing options...
dsonesuk Posted August 17, 2010 Share Posted August 17, 2010 <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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.