Applying Image Buttons to Existing Layout

[psionicsin]

Having trouble applying image buttons to an existing layout. http://rutholsonphoto.com/testbuild/index.phpEvery time I add the div's, and then attempt to get them where I need them, they end up pushing other div's out of the way in order to get to where they need to go.And I know exactly, pixel wise where they need to be. But it's frustrating me. I tried all night and went back at square one.The 3 buttons have dimensions of 37px by 37px, and all are set 9px from the top. From the left position of the screen, they sit at 720px, 767px, 813px respectively.

[psionicsin]

Ok so as the coding goes so far, I've added the div's and css entries for those div's back. I've also added the z-indexing. Now will the nested div's trump my z-indexing, or does z-indexing work regardless of the nesting?I ask because I added the button div's uder the wrapper div, giving it a z or 1 and the buttons a z of 2.

[psionicsin]

Ok buttons are up, but I need help placing them. The methods I'm trying are NOT working.

[dsonesuk]

Well z-index won't work in this case as they have to be acompanied by position: relative, absolute or fixed for z-indexing to take place, by why use z-indexing anyway?just create container for snetwork buttons<div id="snetwork"><a title="" href="http://www.facebook.com/pages/Westland-MI/Ruth-Olson-Photography/328300073878?" class="facebook"></a><a title="" href="http://twitter.com/rutholsonphoto" class="twitter"></a><a href="http://twitter.com/statuses/user_timeline/67102189.rss" title="" class="rss"> </a></div>#snetwork {float: left; overflow:hidden;}#snetwork a {display:block;float:left;height:37px;width:37px;}#snetwork a.facebook {background:transparent url(images/fb_bw.png) no-repeat scroll 0 0;}#snetwork a.twitter{background:transparent url(images/t_bw.png) no-repeat scroll 0 0;}#snetwork a.rss{background:transparent url(images/rss_bw.png) no-repeat scroll 0 0;}Now all you have to do is position the outer container only, not the individual anchor/images

[psionicsin]

Well z-index won't work in this case as they have to be acompanied by position: relative, absolute or fixed for z-indexing to take place, by why use z-indexing anyway?just create container for snetwork buttons<div id="snetwork"><a title="" href="http://www.facebook.com/pages/Westland-MI/Ruth-Olson-Photography/328300073878?" class="facebook"></a><a title="" href="http://twitter.com/rutholsonphoto" class="twitter"></a><a href="http://twitter.com/statuses/user_timeline/67102189.rss" title="" class="rss"> </a></div>#snetwork {float: left; overflow:hidden;}#snetwork a {display:block;float:left;height:37px;width:37px;}#snetwork a.facebook {background:transparent url(images/fb_bw.png) no-repeat scroll 0 0;}#snetwork a.twitter{background:transparent url(images/t_bw.png) no-repeat scroll 0 0;}#snetwork a.rss{background:transparent url(images/rss_bw.png) no-repeat scroll 0 0;}Now all you have to do is position the outer container only, not the individual anchor/images

Ok1) I don't have to make this a total wrapper again do I? I can place this div inside of the header div and be fine, right?2) I'm not 100% yet, but I THINK the class calls will mess up my jquery fade in/out effect as I gave them a class called "fade_img" for the js to know where to look..

[dsonesuk]

I that where you want to place them, i on't see a problem, there should not be a problem with jquery, if you use both classes (class="fade_img facebook"), that's the beauty of jquery, but you do have a problem change my classes to id references instead.<a title="" href="http://www.facebook.com/pages/Westland-MI/Ruth-Olson-Photography/328300073878?" id="facebook"></a><a title="" href="http://twitter.com/rutholsonphoto" id="twitter"></a><a href="http://twitter.com/statuses/user_timeline/67102189.rss" title="" id="rss"> </a>#snetwork a#facebook {background:transparent url(images/fb_bw.png) no-repeat scroll 0 0;}#snetwork a#twitter{background:transparent url(images/t_bw.png) no-repeat scroll 0 0;}#snetwork a#rss{background:transparent url(images/rss_bw.png) no-repeat scroll 0 0;}the only problem is you can use these only once within a page, as id reference should be unique

[psionicsin]

I that where you want to place them, i on't see a problem, there should not be a problem with jquery, if you use both classes (class="fade_img facebook"), that's the beauty of jquery, but you do have a problem change my classes to id references instead.<a title="" href="http://www.facebook.com/pages/Westland-MI/Ruth-Olson-Photography/328300073878?" id="facebook"></a><a title="" href="http://twitter.com/rutholsonphoto" id="twitter"></a><a href="http://twitter.com/statuses/user_timeline/67102189.rss" title="" id="rss"> </a>#snetwork a#facebook {background:transparent url(images/fb_bw.png) no-repeat scroll 0 0;}#snetwork a#twitter{background:transparent url(images/t_bw.png) no-repeat scroll 0 0;}#snetwork a#rss{background:transparent url(images/rss_bw.png) no-repeat scroll 0 0;}the only problem is you can use these only once within a page, as id reference should be unique

Ok. Now my intention was to NO have the buttons butt up against one another. They need 10px of space between each. The position of the first button, however, is just fine. Would I use a right padding for that? Didn't work lol.

[psionicsin]

Ok I've figured to go into the #snetwork a.twitter & #snetwork a.rss to override the positions with a relative 10px & 20px value, but my rss button gets cut in half after all of this. Why's that?EDIT: I took off the overflow: hidden feature. Is this going to break anything else if I do this? It seems to alleviate my icon getting cut in half.

[dsonesuk]

why are you using positioning exactly??????, won't margins work, the GOD of css says thou should not use positioning, unless thou really, really REALLY need to.

[psionicsin]

why are you using positioning exactly??????, won't margins work, the GOD of css says thou should not use positioning, unless thou really, really REALLY need to.

LMAO ok, ok, ok. I'm still new, so I keep forgetting all of the different ways you can do this. But will that overflow still affect my icon if I use margin as well?Ok nevermind. Now...why did using positioning cut my last icon in half, whereas using margin didn't?

[psionicsin]

Seems there's a mistake that I didn't account for. As I resize the window bigger, those icons are slowly sliding over to the left. If someone has a large monitor (like an Apple Cinema 30" display), those buttons will seem to cover the logo/title of the page.How do I lock those?

[dsonesuk]

floated elements do not occupy any space as they out of the flow, and therefore the outer container cannot encompass them, and this where overflow hidden comes in, it can find the area of the inner child elements and encircle them and there margins etc as well, positioning you are moving and element from its previous position, the the space it once occupied remains still encircled, but if you position that element outside of that encircled area, the overflow as it is using hidden as a property, will obviously hide any part of that element that is outside that area.

[psionicsin]

floated elements do not occupy any space as they out of the flow, and therefore the outer container cannot encompass them, and this where overflow hidden comes in, it can find the area of the inner child elements and encircle them and there margins etc as well, positioning you are moving and element from its previous position, the the space it once occupied remains still encircled, but if you position that element outside of that encircled area, the overflow as it is using hidden as a property, will obviously hide any part of that element that is outside that area.

Ok well I haven't removed the overflow hidden yet, but I know that I do not want those images moving wherever they feel like as the page resizes. I need that fixed to be 720px from the left edge of "header_bg.png". But I'm not sure how to make reference to that wrapper div in order to place these and lock them.

[dsonesuk]

call 911 quick!, someone's stolen your header container, which you needed to insert your social networks icons container, then give that a left margin to force it beyond the logo. It also looks like they also trashed the coding by using positioning, pity, really it was looking so good, GOD! why, why god why...

[psionicsin]

call 911 quick!, someone's stolen your header container, which you needed to insert your social networks icons container, then give that a left margin to force it beyond the logo. It also looks like they also trashed the coding by using positioning, pity, really it was looking so good, GOD! why, why god why...

What on Earth are you talking about lol? I removed the positioning when you asked me to.OMG...I don't remember getting rid of that...and I can't remember where it was either lol.Figured it out. Thanks for the heads up on that.Now...time for me to jump back over to the java thread so I can integrate this PITA fade in/out effect.Is there anything else you see that I mistakenly got rid of?

[dsonesuk]

I checked your page and i saw the p word being used, and that would explain the bigger screen size issue, it was position ( there you made me say it, now! 10p in swear box, damn it! oohh, another 10p) to the left screen edge, the content area would remain in the middle, while the snetwork would stay a constant set distance from left edge, moving further away from content area as screen gets wider.

[psionicsin]

I checked your page and i saw the p word being used, and that would explain the bigger screen size issue, it was position ( there you made me say it, now! 10p in swear box, damn it! oohh, another 10p) to the left screen edge, the content area would remain in the middle, while the snetwork would stay a constant set distance from left edge, moving further away from content area as screen gets wider.

Oh you meant in the snetwork div? Sorry about that. I've since changed it to use margins lol. Anything else wrong before I move on lol?

[dsonesuk]

Well.. i did not realise you wanted it pos... placed to far right, so you could a just changed from float: left; float: right; instead of margin, Right i'm off to help someone who's having jquery problems, hope its less taxing than this, given me a headache, and costing me a few pennies as well.

[psionicsin]

Well.. i did not realise you wanted it pos... placed to far right, so you could a just changed from float: left; float: right; instead of margin, Right i'm off to help someone who's having jquery problems, hope its less taxing than this, given me a headache, and costing me a few pennies as well.

Thank you greatly for your help.