Overlapping Divs : Noscript Solution?

Looking for <noscript> solution for overlapping show/hide divs

[microspective]

Hello,

I have a portfolio page with a MooTools Kwicks navigator. It works perfectly with JS enabled, but I'd like to be able to keep the page legible if a visitor has JS disabled.

There is a show/hide script for each of four divs; all are hidden by default, and the respective div appears upon click in the Kwick nav.

Problem: with JS disabled, the absolutely positioned divs overlap and are thus an illegible mess. Any ideas how to work around this?

Thanks a million in advance!

Ray

P.S. I tried to keep my example code as short and relevant as possible. Sorry if it's more than I should have posted. Thanks again.

JS

(MooTools and Kwicks scripts, but not shown here -- too long!)
// Show/Hide
$(document).ready(function() {
 $('[class^=sh]').hide();
 $('[class^=item]').click(function() {
 var $this = $(this);
 var x = $this.attr("className");
 $('.sh-' + x).fadeIn('slow').siblings('[class^=sh]').fadeOut('slow');
 return false;
 });
});

HTML

<div id="kwick">
 <ul id="kwicks">
 <li><a href="#" class="item1"><span>Website Design and Development</span></a></li>
 <li><a href="#" class="item2"><span>Branding and Identity</span></a></li>
 <li><a href="#" class="item3"><span>Print Design</span></a></li>
 <li><a href="#" class="item4"><span>Photo Fixes</span></a></li>
 </ul>
 
<div class="sh-item1 portfolio" id="web_portfolio"><?php include('../assets/includes/portfolio_web.php') ?></div>
<div class="sh-item2 portfolio" id="brand_portfolio"><?php include('../assets/includes/portfolio_brand.php') ?></div>
<div class="sh-item3 portfolio" id="print_portfolio"><?php include('../assets/includes/portfolio_print.php') ?></div>
<div class="sh-item4 portfolio" id="photo_portfolio">
<?php include('../assets/includes/portfolio_photo.php') ?></div>
</div>

CSS

/* Mootools Kwicks */
#kwick { width:950px; padding-top:20px; position:relative; }
#kwicks { height:150px; list-style-type:none; margin:0; padding:0; }
#kwick li { float:left; }
#kwick .item1,
#kwick .item2,
#kwick .item3,
#kwick .item4 { display:block; cursor:pointer; overflow:hidden; height:117px; width:234px; background:transparent url(../img/portfolio-slider-bkgd.jpg) top left no-repeat; padding:0; }

/* Portfolio Show-Hide */
#web_portfolio { width:700px; position:absolute; top:140px; left:18px;/* border-right:1px solid #bbb;*/ }
#brand_portfolio { width:560px; position:absolute; top:140px; left:140px; }
#print_portfolio { width:560px; position:absolute; top:140px; left:262px; }
#photo_portfolio { width:550px; position:absolute; top:140px; left:382px; }

[edited by: Fotiman at 2:26 pm (utc) on Feb 8, 2010]
[edit reason] No URLs please. See TOS [webmasterworld.com] [/edit]

[whoisgregg]

Welcome to WebmasterWorld, microspective!

One thing you can do is use Javascript to assign the CSS attribute for absolute positioning and to initially hide them. That way, your divs automatically will flow top to bottom for users without Javascript.