Imaulle Posted May 11, 2011 Share Posted May 11, 2011 Hello, I'm messing around with jQuery UI 'sortable' and I'm not able to get a specific span to float right Here is my code so far <style> #SlideshowOne { list-style-type: none; margin: 0; padding: 0; width: 80%; } #SlideshowOne li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #SlideshowOne li span { position: absolute; margin-left: -1.3em; } #SlideshowOne span ui-icon-closethick { float:right; margin-right:3px; } </style> ... <ul id="SlideshowOne"> <li class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span><a href="#"><span class="ui-icon ui-icon-closethick"></span></a> </li> The span ui-icon ui-icon-arrowthick-2-n-s needs to float left, but I need the ui-icon ui-icon-closethick to float right as it's a 'delete' button... any ideas? Also, what class IDs etc can I remove? for example I"m not sure if class="ui-state-default" is needed? Quote Link to comment Share on other sites More sharing options...
Maknib Posted May 11, 2011 Share Posted May 11, 2011 The span ui-icon ui-icon-arrowthick-2-n-s needs to float left, but I need the ui-icon ui-icon-closethick to float right as it's a 'delete' button... i don't see the float: left; for this? Quote Link to comment Share on other sites More sharing options...
Imaulle Posted May 11, 2011 Author Share Posted May 11, 2011 yeah I can't figure that part out either... I think it's being loaded from jquery-ui-1.8.12.custom.css (I'm very new to css I'm very sorry lol. I'm pro with PHP though!) Quote Link to comment Share on other sites More sharing options...
Imaulle Posted May 11, 2011 Author Share Posted May 11, 2011 hmmm nevermind I guess neither of them are 'floating' left. but both of them are on the far left and they are ontop of eachother. I just need <span class="ui-icon ui-icon-closethick"></span> to show up on the far right side of the li Quote Link to comment Share on other sites More sharing options...
efficacious Posted May 11, 2011 Share Posted May 11, 2011 i think the float isn't being recognized because the parent element is positioned absolute. nvm not even that its that the elements your floating are positioned absolute... #SlideshowOne li span { position: absolute; margin-left: -1.3em; } Quote Link to comment Share on other sites More sharing options...
Imaulle Posted May 11, 2011 Author Share Posted May 11, 2011 looks a little better! before they were ontop of eachother... how can I differentiate between the two different spans? I've tried this, but it does not work... #SlideshowOne span ui-icon-closethick { float: right; } Quote Link to comment Share on other sites More sharing options...
efficacious Posted May 11, 2011 Share Posted May 11, 2011 give them different ID's? er uh.. #SlideshowOne span.ui-icon-closethick {float:right;} cept the class name has space in it.. ui-icon ui-icon-arrowthick-2-n-s not sure if that canwork or not i guess i would try #SlideshowOne span.ui-icon ui-icon-closethick {float:right;} Quote Link to comment Share on other sites More sharing options...
Imaulle Posted May 11, 2011 Author Share Posted May 11, 2011 ughhhh I swear I tried that and it did not work... but now it's working.... lol THANK YOU! Quote Link to comment Share on other sites More sharing options...
efficacious Posted May 11, 2011 Share Posted May 11, 2011 np glad its working for you! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.