Allister

I did that, but it never worked so then I changed the Sortable to sortable, seemed to work fine now, thanks

Nope, still not working when I move it, And I placed the JS code there for it to load the page first, then make the modules movable

Here is my code: The Sortable function doesn't seem to work at all. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Admin Control Panel</title> <link rel="stylesheet" type="text/css" media="all" href="css/resetText.css" /> <link rel="stylesheet" type="text/css" href="css/grids-min.css"> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui-personalized-1.6rc6.min.js"></script> <script> $(document).ready(function() { $('.mylist2').hide(); $('#settingBox').hide(); $('.closeArea').bind('click', toggleContent); }); </script> </head> <body> <div id="header"></div> <div id="doc3" class="yui-t1"> <div id="yui-main"> <div class="yui-b rightCon"> <div id="settingBox"> </div> <p class="settingShow" onclick="java script: $('#settingBox').slideToggle('fast');">Display Settings</p> <div style="clear:both;"></div> <div id="moduleCon"> <div id="moduleLef" class="column"> <div class="widget"> <div class="widget-head">Latest Updates<div class="closeArea"></div></div> <div class="widget-content"> This is some sample content. </div> </div> <div class="widget"> <div class="widget-head">Latest Updates<div class="closeArea"></div></div> <div class="widget-content"> This is some sample content. </div> </div> </div> <div id="moduleRig" class="column"> <div class="widget"> <div class="widget-head">Latest Updates<div class="closeArea"></div></div> <div class="widget-content"> This is some sample content. </div> </div> <div class="widget"> <div class="widget-head">Latest Updates<div class="closeArea"></div></div> <div class="widget-content"> This is some sample content. </div> </div> </div> </div> </div> </div> <div class="yui-b leftCon"> <div id="menuCon"> <div class="menu"> <h3 onclick="java script: $('.mylist').slideToggle('slow');"><p style="margin-top: 5px;">Settings</p></h3> <ul class="mylist" > <li><a href="#">my sample link #1</a></li> <li><a href="#">my sample link #2</a></li> <li class="bottomMI"><a href="#">my sample link #3</a></li> </ul> </div> <div class="menu"> <h3 onclick="java script: $('.mylist2').slideToggle('slow');"><p style="margin-top: 5px;">Settings</p></h3> <ul class="mylist2" > <li><a href="#">my sample link #1</a></li> <li><a href="#">my sample link #2</a></li> <li class="bottomMI"><a href="#">my sample link #3</a></li> </ul> </div> <div class="menu"> <h3 onclick="java script: $('.mylist3').slideToggle('slow');"><p style="margin-top: 5px;">Settings</p></h3> <ul class="mylist3" > <li><a href="#">my sample link #1</a></li> <li><a href="#">my sample link #2</a></li> <li class="bottomMI"><a href="#">my sample link #3</a></li> </ul> </div> </div> </div> </div> </div> <div style="clear:both;"></div> <div id="footer"> </div> </body> <script type="text/javascript"> function () { $('.column').Sortable( { accept: 'div.widget', helperclass: 'sortHelper', handle: '.widget-head', fx:300, tolerance: 'pointer' } ); } var toggleContent = function(e) { var targetContent = $('div.widget-content', this.parentNode.parentNode); if (targetContent.css('display') == 'none') { targetContent.show(); } else { targetContent.hide(); } return false; }; </script> </html> Any help would be gr8 Thanks.

I use a nice adobe air app called MinifyMe, simply highlight all the css or js files and drag them over to the drop area, combines and minifys them into one file http://blog.base42.nl/2008/11/20/minifyme-...and-javascript/

Ahh! okay! In that case inline CSS is only useful for testing, only time I use it.

Wrong, What ever comes last is used. Example: <style> h1 { color: #fff; } </style> <link rel="stylesheet" type="text/css" media="all" href="index.css" /> <h1>WELCOME</h1> The external document will be used to color the title.

Good work, some points: There is no title You should experiment with fonts, for example a hand writing one would go nice on the notepad. IMO, the footer and header are far to big.

The black font used for the menu makes the text hard to read in contrast with the background.

I don't get what you mean, can you explain more? I will look into that, I am not good at photoshop/illustrator but I will have a look. Thanks

Hey there guys, Can you have a look at my new design, do you think anything needs changed/added/edited? I was thinking of adding a third row, but I am not sure. I haven't finalised the coding yet (Most likely not compliant) or have worked on other pages, so just the home page the now. Any/All feedback welcomed http://allister.ch/betaTest/

Thanks for that, looks fine now! I used to use global css reset but stopped for some reason, will remember in the future.

Hey guys! I am having some trouble with a list, it is for some reason adding a (around) 45px padding to the right. I uploaded the design so far here: http://allister.ch/betaTest/ The specific css source code: #bottomModulesConLeft { float: left; height: 350px; width: 350px; } #bottomModulesConLeft h3 { font-weight: normal; margin-left: 10px; } #recentImages { height: 197px; width: 350px; margin-left: 10px; background:url(../images/newimages.jpg); } .images { list-style: none; display: block; width: 320px; height: 197px; } .images li { height: 70px; width: 70px; background: #666666; float: left; margin:0 4px 4px; } Thanks for any help