[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How to make collapsible panels stay in the same state from page to page?

Posted on 2011-10-31
16
Medium Priority
?
2,184 Views
Last Modified: 2012-05-12
Hi,

I'm using dreamweaver cs4 on Mac to design a website that needs to be up in a week and I have one very annoying problem I can't solve.

I'm building a site using a template with an editable content area, and a menu made out of 4 spry collapsible panels. Each collapsible panel opens to show a list of links to other html pages made from the same template. But each time we go to a new page or refresh the current page the collapsible panels go back to their default state (collapsed).

What I want is to keep the collapsible panels in the same state as we navigate from page to page, so that when we open, say, the 1st and 3rd panels before we clic on a link, the new page shows the 1st and the 3rd panels still open.

I would really, really appreciate some help. I have little experience coding, I can sort of navigate my way through codes on html and css files but not js files. It would be great if someone could show me how to solve this problem.

P.S.
I have found someone with the same problem as me here: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_22980728.html#mainSection
But the 2 codes provided as an answer don't work, probably because its too old?

Someone also suggested that I use jQuery to make a collapsible panel instead of using the spry collapsible panel, but I'm not a programmer and I have no idea how to work with jQuery.

 nicolas-castlestudio-518432.flv
@charset "UTF-8";

/* SpryCollapsiblePanel.css - version 0.5 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main CollapsiblePanel container. For our
 * default style, the CollapsiblePanel is responsible for drawing the borders
 * around the widget.
 *
 * If you want to constrain the width of the CollapsiblePanel widget, set a width on
 * the CollapsiblePanel container. By default, our CollapsiblePanel expands horizontally to fill
 * up available space.
 *
 * The name of the class ("CollapsiblePanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * CollapsiblePanel container.
 */
.CollapsiblePanel {
	margin: 0px;
	padding: 0px;
	cursor: pointer;
	border: 0PX;
	
}

/* This is the selector for the CollapsiblePanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open or close the panel.
 *
 * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * CollapsiblePanel panel tab container.
 */
.CollapsiblePanelTab {
	margin: 0px;
	padding: 0px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
}

/* This is the selector for a CollapsiblePanel's Content area. It's important to note that
 * you should never put any padding on the content area element if you plan to
 * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
 * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
 *
 * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style a
 * CollapsiblePanel content container.
 */
.CollapsiblePanelContent {
	margin: 0px;
	padding: 0px;
	cursor: default;
}

/* An anchor tag can be used inside of a CollapsiblePanelTab so that the
 * keyboard focus ring appears *inside* the tab instead of around the tab.
 * This is an example of how to make the text within the anchor tag look
 * like non-anchor (normal) text.
 */
.CollapsiblePanelTab a {
	color: none;
	text-decoration: none;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "CollapsiblePanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the CollapsiblePanel.
 */
.CollapsiblePanelOpen .CollapsiblePanelTab {
	background-color: none;
}

/* This is an example of how to change the appearance of the panel tab when the
 * CollapsiblePanel is closed. The "CollapsiblePanelClosed" class is programatically added and removed
 * whenever the CollapsiblePanel is closed.
 */

.CollapsiblePanelClosed .CollapsiblePanelTab {
 /* background-color: #none */
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.CollapsiblePanelTabHover,  .CollapsiblePanelOpen .CollapsiblePanelTabHover {
	background-color: none;
	text-decoration: underline;
	border: 0px;
}

/* This is an example of how to change the appearance of all the panel tabs when the
 * CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed
 * whenever the CollapsiblePanel gains or loses keyboard focus.
 */
.CollapsiblePanelFocused .CollapsiblePanelTab {
	background-color: none;
}

Open in new window

0
Comment
Question by:nicolas-castlestudio
  • 9
  • 7
16 Comments
 
LVL 12

Expert Comment

by:Barry Jones
ID: 37061634
Hi.  You should store the settings in a cookie.

I wrote a widget (using jQuery) that does that for you - it takes basic markup, and makes it into collapsible list, that remembers its settings from page to page, or when refreshing the current page.

Take a look at "index.htm" to see how to integrate it - its real easy.  The actual javascript code is kept in a separate file and you won;t need to touch that.

Hope this helps!

TheFoot collapsible-menu.zip
0
 
LVL 12

Expert Comment

by:Barry Jones
ID: 37061659
BTW.. My example is a stand-alone widget that relies on nothing other than jQuery and a cookie plug-in.

0
 

Author Comment

by:nicolas-castlestudio
ID: 37065168
Thanks for your reply, I'll try to make it work as soon as I get to my studio in a couple of hours.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:nicolas-castlestudio
ID: 37067139
Okay so the example works great, but how can I put it in the template I'm using for my site? I copied your files in the local root folder for my site and I tried to put the panels you made in my menu table but I couldn't get the collapsible effect to work.
As for the look, I usually change everything in the css file associated with the spry collapsible panel, I guess with jQuery I just change the font, styles etc. in the codes in my template?
(Sorry —  this is probably obvious for a programmer but I don't know much about codes, it still takes me a while to figure out how to make things work.)

Below are the codes in my template as it is, with the old spry collapsible panels.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>NICOLAS GRENIER</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../styles1.css" rel="stylesheet" type="text/css" />
<link href="../CSS/Level1_Arial.css" rel="stylesheet" type="text/css" />
<link href="../CSS/Level2_Arial_Text.css" rel="stylesheet" type="text/css" />
<link href="../CSS/Level1_Verdana.css" rel="stylesheet" type="text/css" />
<link href="../CSS/Accessible_Text.css" rel="stylesheet" type="text/css" />
<link href="../CSS/Level2_Times_Text.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
	color: #000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #000;
}
a:hover {
	text-decoration: underline;
	color: #000;
}
a:active {
	text-decoration: none;
	color: #000;
}
#biggy #menu #CollapsiblePanel1 strong em {
	filter: Gray;
}
-->
</style>
<script src="../SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>

<body text="#000000">
<div id="header"> <span class="big"><strong><br /> 
  </strong></span><strong><em><a href="../index.html">NICOLAS GRENIER</a></em></strong></div>
<div id="biggy">
  <div id="menu">
    <br />
         <style>
div:active, div:focus, div:hover {
    outline-style: none; -moz-outline-style:none;
}
        </style>
    <div id="CollapsiblePanel1" class="CollapsiblePanel">
      <div class="CollapsiblePanelTab" tabindex="0"><strong><em>WORK</em></strong></div>
      <div class="CollapsiblePanelContent">
      
<a href="../holitic-community/-holistic-paintings.html">HOLISTIC COMMUNITY<br />
DEVELOPMENT</a><br />
GENTRIFICATION-READY SINGLE<br />
FAMILY GREEN ROOF HOUSING
<br />
CENTER OF POWER<br />
MODEL INTEGRITY<br />
VERTICALLY INTEGRATED <br />
SOCIALISM <br />
CLINICAL FARM<br />
EDEN<br />
JEU NOIR<br />
SELECTED EARLIER WORKS</div>
      <br />
    </div>
    <div id="CollapsiblePanel2" class="CollapsiblePanel">
      <div class="CollapsiblePanelTab" tabindex="0"><strong><em>COLLABORATIVE PROJECTS</em></strong></div>
  <div class="CollapsiblePanelContent">NO HORIZONS<br />
QUESTION DE PRINCIPE, <br />
MATTER OF PRINCIPLE<br />
THAT'S HOW WE KNOW <br />
THE TONGUE IS BLIND <br />
THE FUTURE IS DEEP<br />
ON THE TOP / BOTTOM</div>
</div>
<br />
<div id="CollapsiblePanel3" class="CollapsiblePanel">
  <div class="CollapsiblePanelTab" tabindex="0"><strong><em>WRITING</em></strong></div>
  <div class="CollapsiblePanelContent">OF THE VISUALITY OF THE CITY<br />
NO HORIZONS<br />
QUESTION DE PRINCIPE, <br />
MATTER OF PRINCIPLE</div>
</div>
<br />
<div id="CollapsiblePanel4" class="CollapsiblePanel">
  <div class="CollapsiblePanelTab" tabindex="0"><em><strong>INFO</strong></em></div>
  <div class="CollapsiblePanelContent">CV<br />
CONTACT<br />
FRANÇAIS</div>
</div>
<p>&nbsp;</p>
  </div>
  <div id="content">
<div id="content2"><!-- TemplateBeginEditable name="content-images" --><!-- TemplateEndEditable --></div>
  </div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4", {contentIsOpen:false});
//-->
</script>
</body>
</html>

Open in new window

0
 
LVL 12

Accepted Solution

by:
Barry Jones earned 2000 total points
ID: 37068533
Hi.

My advice to you, if you're serious about web development,is to learn to code html from scratch and not relying on a visual IDEs like Dreamweaver.  They're great for knocking up quick sites, but if you ever need to troubleshoot, or get creative, then you're having to pick through messy, auto-generated code.. (as you're no doubt finding out :)

Attached is your original file, updated with the new collapsible menu.  It assumes that the 3 javascript files are in the same directory - if they're not, then you will need to update the paths for the 3 <script> tags in the <head> section.  

There are a couple of styles for the menu in the head section also - you might want to pull these into your general stylesheet.

I've tidied the code up a bit - removed some superfluous tags.  

Any problems let me know.

TheFoot
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<!-- TemplateBeginEditable name="doctitle" -->
	<title>NICOLAS GRENIER</title>
	<!-- TemplateEndEditable -->
	<!-- TemplateBeginEditable name="head" -->
	<!-- TemplateEndEditable -->
	<link href="../styles1.css" rel="stylesheet" type="text/css" />
	<link href="../CSS/Level1_Arial.css" rel="stylesheet" type="text/css" />
	<link href="../CSS/Level2_Arial_Text.css" rel="stylesheet" type="text/css" />
	<link href="../CSS/Level1_Verdana.css" rel="stylesheet" type="text/css" />
	<link href="../CSS/Accessible_Text.css" rel="stylesheet" type="text/css" />
	<link href="../CSS/Level2_Times_Text.css" rel="stylesheet" type="text/css" />
	
	<!-- Collapsible menu script -->
	<script src="jquery-1.6.4.min.js"></script>
	<script src="jquery.cookie.min.js"></script>
	<script src="collapsible.menu.js"></script>
	<!-- End collapsible menu script -->

	<style type="text/css">
		<!--
		a:link {
		        color: #000;
		        text-decoration: none;
		}
		a:visited {
		        text-decoration: none;
		        color: #000;
		}
		a:hover {
		        text-decoration: underline;
		        color: #000;
		}
		a:active {
		        text-decoration: none;
		        color: #000;
		}
		#biggy #menu #CollapsiblePanel1 strong em {
		        filter: Gray;
		}
		div:active, div:focus, div:hover {
		    outline-style: none; -moz-outline-style:none;
		}
		#app_menu {}
		#app_menu h3{cursor: pointer;}
		#app_menu ul{margin-top:0px;margin-bottom:0px;}
		-->
	</style>
	<script type="text/javascript">/*<![CDATA[*/
		$(document).ready(function(){
			
			// Initialise collapsibles
			var v_collapsible_id 	= 'app_menu';
			var v_effect			= true;
			window.app_menu = new CollapsibleMenu(v_collapsible_id, v_effect);
			
		});
	/*]]>*/</script>
</head>

<body text="#000000">
	<div id="header">
		<strong><em><a href="../index.html">NICOLAS GRENIER</a></em></strong>
	</div>
	<div id="biggy">
	  <div id="menu">

			<!-- Collapsible side menu -->
	        <div id="app_menu">
				<h3>WORK</h3>
				<div>
					<ul>
						<li><a href="../holitic-community/-holistic-paintings.html">HOLISTIC COMMUNITY</a></li>
						<li><a href="#">DEVELOPMENT</a></li>
						<li><a href="#">GENTRIFICATION-READY SINGLE</a></li>
						<li><a href="#">FAMILY GREEN ROOF HOUSING</a></li>
						<li><a href="#">CENTER OF POWER</a></li>
						<li><a href="#">MODEL INTEGRITY</a></li>
						<li><a href="#">VERTICALLY INTEGRATED</a></li>
						<li><a href="#">SOCIALISM</a></li>
						<li><a href="#">CLINICAL FARM</a></li>
						<li><a href="#">EDEN</a></li>
						<li><a href="#">JEU NOIR</a></li>
						<li><a href="#">SELECTED EARLIER WORKS</a></li>
					</ul>
				</div>
				<h3>COLLABORATIVE PROJECTS</h3>
				<div>
					<ul>
						<li><a href="#">NO HORIZONS</a></li>
						<li><a href="#">QUESTION DE PRINCIPE</a></li>
						<li><a href="#">MATTER OF PRINCIPLE</a></li>
						<li><a href="#">THAT'S HOW WE KNOW</a></li>
						<li><a href="#">THE TONGUE IS BLIND</a></li>
						<li><a href="#">THE FUTURE IS DEEP</a></li>
						<li><a href="#">ON THE TOP / BOTTOM</a></li>
					</ul>
				</div>
				<h3>WRITING</h3>
				<div>
					<ul>
						<li><a href="#">OF THE VISUALITY OF THE CITY</a></li>
						<li><a href="#">NO HORIZONS</a></li>
						<li><a href="#">QUESTION DE PRINCIPE</a></li>
						<li><a href="#">MATTER OF PRINCIPLE</a></li>
					</ul>
				</div>
				<h3>INFO</h3>
				<div>
					<ul>
						<li><a href="#">CV</a></li>
						<li><a href="#">CONTACT</a></li>
						<li><a href="#">FRANÇAIS</a></li>
					</ul>
				</div>
			</div>
	        <!-- End collapsible side menu -->
	        
		<p>&nbsp;</p>
		</div>
		<div id="content">
			<div id="content2">
				<!-- TemplateBeginEditable name="content-images" --><!-- TemplateEndEditable -->
			</div>
		</div>
	</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:nicolas-castlestudio
ID: 37073398
Thanks for your reply and for the code, I appreciate.
I would love, indeed, to learn hmtl from scratch and not rely on dreamweaver to make codes for me... The problem is, I'm a visual artist and I design websites only occasionally, so the task of learning to code hmtl is far beyond my professional priorities; I barely have the time to design my own website, though I have already spent more than a week trying to figure out one stupid little problem! I wish I were html self-sufficient...

So, the template with your code works great, but when I create a new html page from this template the collapsible function doesn't work, all the panels are open and can't be closed. Any idea why?

Also, how do I change the design of the panels? I need to be able to modify font, spacing, remove margin and the black dots in the lists, change the color and style of the text, etc. With the spry collapsible panels, it took me a while to bypass some of the dreamweaver built-in styles and functions but I was able to get it exactly like I wanted. Now I need to do the same with the jQuery panel but I don't know how it works...?

p.s. I'll accept your previous answer as solution no matter what (technically it works), but it'd be nice if I could actually use the panel in my site.
0
 
LVL 12

Expert Comment

by:Barry Jones
ID: 37073562
Hi.

Ah - makes sense.. then a tool like Dreamweaver obviously is best for you..

I won't be able to look at this in detail until tomorrow, but the first thing to check is to make sure that the 3 javascript files in my example are in the same directory as your generated html page.

Can you publish a copy of this on a live URL so I can inspect the markup and see whats wrong?

With regard to editing styles.. do you have a stylesheet editor in Dreamweaver?  I'll check tomorrow.  If you do, then I'll put the styles into a stylesheet and you can edit them from there (currently they are embedded in the <head> section in a <style> tag.  Or can you add a section of code into an existing stylesheet?  If you explain how you currently edit stylesheets, then I'm sure I can work this out for you.

Cheers, TheFoot
0
 

Author Comment

by:nicolas-castlestudio
ID: 37074368
Hi again.

I moved some files around and played with my template, and I was able to make it work and to fix most of the design issues. Now there are only three tiny problems left. I can't put it on a live URL but I hope it's simple enough to see what can be done:

1- Whenever a browser window (preview in Safari, Firefox, etc.) gets smaller than 1000px (the width of my content), the table containing the editable content moves below the menu. I want it to stay where it is and show a scroll bar instead of moving — in other words, keep it like I had it before. I'm sure that's a stupid little setting, but I couldn't find it. See screencast.
 
2- Design stuff. I removed the spaces and the black dots that gave the "list" look to the content in the collapsible menu panels, but I can't get rid of the space between the tab and the content of the panels. I want the list of links below each tab (under WORK, COLLABORATIVE PROJECTS, etc.) to appear directly below the tab, with no space in between. See screenshot with problem highlighted in yellow.
 
3- Design stuff again. You can see the green lines on the attached screenshot: the text in the menu is no longer aligned with the tab text in the editable content region. It's just a little off. I played with it for an hour but couldn't figure out what the hell is the problem! Any idea what's wrong?

Please note:
I do have a stylesheet editor in Dreamweaver CS4, and I have a very basic stylesheet attached to my template. But I made most of the design styles in CSS styles or in "page properties". I attached the new code from my template, hoping that it will provide some answers.

Thanks again for helping me with this!
Nicolas


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<!-- TemplateBeginEditable name="doctitle" -->
	<title>NICOLAS GRENIER</title>
	<!-- TemplateEndEditable -->
	<!-- TemplateBeginEditable name="head" -->
	<!-- TemplateEndEditable -->
	<link href="../styles1.css" rel="stylesheet" type="text/css" />
	<link href="../CSS/Level1_Arial.css" rel="stylesheet" type="text/css" />
	<link href="../CSS/Level2_Arial_Text.css" rel="stylesheet" type="text/css" />
	<link href="../CSS/Level1_Verdana.css" rel="stylesheet" type="text/css" />
	<link href="../CSS/Accessible_Text.css" rel="stylesheet" type="text/css" />
	<link href="../CSS/Level2_Times_Text.css" rel="stylesheet" type="text/css" />
	
	<!-- Collapsible menu script -->
	<script src="jquery-1.6.4.min.js"></script>
	<script src="jquery.cookie.min.js"></script>
<script src="collapsible.menu.js"></script>
	<!-- End collapsible menu script -->

	<style type="text/css">
		<!--
		a:link {
		        color: #000;
		        text-decoration: none;
		}
		a:visited {
		        text-decoration: none;
		        color: #000;
		}
		a:hover {
		        text-decoration: underline;
		        color: #000;
		}
		a:active {
	text-decoration: none;
	color: #000;
	font-size: 11px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
		}
		#biggy #menu #CollapsiblePanel1 strong em {
		        filter: Gray;
		}
		div:active, div:focus, div:hover {
	outline-style: none;
	-moz-outline-style:none;
	color: #000;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
		}
		#app_menu {}
		#app_menu h3{
	cursor: pointer;
	font-size: 11px;
	color: #000;
}
		#app_menu ul{margin-top:0px;margin-bottom:0px;}
body,td,th {
	font-size: 11px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
a {
	font-size: 11px;
}
h2 {
	font-size: 11px;
	color: #000;
}
h3 {
	font-size: 11px;
	color: #000;
}
h4 {
	font-size: 11px;
}
		-->
	</style>
	<script type="text/javascript">/*<![CDATA[*/
		$(document).ready(function(){
			
			// Initialise collapsibles
			var v_collapsible_id 	= 'app_menu';
			var v_effect			= false;
			window.app_menu = new CollapsibleMenu(v_collapsible_id, v_effect);
			
		});
	/*]]>*/</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#000000" alink="#000000">
<div id="header">
		<strong><em><a href="../x-index.html"><br />
		NICOLAS GRENIER</a></em></strong></div>
<div id="biggy">
  <div id="menu">
    <div id="app_menu">
      <h3><em><a href="#">WORK</a></em></h3>
      <div><a href="../x-holistic.html">HOLISTIC COMMUNITY<br />
			    DEVELOPMENT<br />
				</a><a href="#">GENTRIFICATION-READY SINGLE<br />
				</a><a href="#">
				FAMILY GREEN ROOF HOUSING<br />
				</a><a href="#">CENTER OF POWER<br />
				</a><a href="#">MODEL INTEGRITY<br />
				</a><a href="#">VERTICALLY INTEGRATED<br />
				</a><a href="#">SOCIALISM<br />
				</a><a href="#">CLINICAL FARM<br />
				</a><a href="#">EDEN<br />
				</a><a href="#">JEU NOIR<br />
</a><a href="#">SELECTED EARLIER WORKS</a> </div>
				<h3><em><a href="#">COLLABORATIVE PROJECTS</a></em></h3>
				<div><a href="#">NO HORIZONS<br />
				</a><a href="#">QUESTION DE PRINCIPE<br />
				</a><a href="#">MATTER OF PRINCIPLE<br />
				</a><a href="#">THAT'S HOW WE KNOW<br />
				</a><a href="#">THE TONGUE IS BLIND<br />
				</a><a href="#">THE FUTURE IS DEEP<br />
</a><a href="#">ON THE TOP / BOTTOM</a> </div>
				<h3><em><a href="#">WRITING</a></em></h3>
				<div><a href="#">OF THE VISUALITY OF THE CITY<br />
				</a><a href="#">NO HORIZONS<br />
				</a><a href="#">QUESTION DE PRINCIPE<br />
				</a><a href="#">MATTER OF PRINCIPLE</a> </div>
		<h3><em><a href="#">INFO</a></em></h3>
				<div><a href="#">CV<br />
				</a><a href="#">CONTACT<br />
				</a><a href="#">FRANÇAIS</a> </div>
	</div>
	        <p>
	          <!-- End collapsible side menu -->
	          
    </p>
    <p>&nbsp;</p>
  </div>
</div>
<div id="content">
  <div id="content2"><!-- TemplateBeginEditable name="content-images" --><!-- TemplateEndEditable --> </div>
</div>
</body>
</html>

Open in new window

nicolas-castlestudio-519313.flv
screenshot-design-issues.jpg
0
 

Author Comment

by:nicolas-castlestudio
ID: 37085695
Let me know if you have any idea about to fix those little bugs, or if you don't let me know as well so I can close the question.
Thanks!
0
 
LVL 12

Expert Comment

by:Barry Jones
ID: 37087554
Sorry have been tied up with personal matters.  Will look at this Sunday am ok?
0
 
LVL 12

Expert Comment

by:Barry Jones
ID: 37089979
Hi nicolas-castlestudio..

Sorry for the delay in responding.

Answers:

1) The menu section and the content section need to be floated alongside each other for this effect.  This involves using the CSS property "float" and setting fixed widths on each section, and containing them both inside the "biggy" div.  I've done this in the attached code.

2) The menu headers are <h3> tags.  These by default come with margins top and bottom.  I have changed the CSS in the <style> tag to remove the bottom margin.

3)  The first menu header has a top-margin of 11px.  In order for the content section to align, I have added 11px top padding to the content section.  This aligns the two areas.

I have made these style changes as inline properties so hopefully you can edit them in the way you're used to.  Please bear in mind that I don't have your content assets here to test with, so I temporarily set the height/width/bg colour of the content to see these changes working.

Hope this helps..

Cheers, TheFoot
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!-- TemplateBeginEditable name="doctitle" -->
        <title>NICOLAS GRENIER</title>
        <!-- TemplateEndEditable -->
        <!-- TemplateBeginEditable name="head" -->
        <!-- TemplateEndEditable -->
        <link href="../styles1.css" rel="stylesheet" type="text/css" />
        <link href="../CSS/Level1_Arial.css" rel="stylesheet" type="text/css" />
        <link href="../CSS/Level2_Arial_Text.css" rel="stylesheet" type="text/css" />
        <link href="../CSS/Level1_Verdana.css" rel="stylesheet" type="text/css" />
        <link href="../CSS/Accessible_Text.css" rel="stylesheet" type="text/css" />
        <link href="../CSS/Level2_Times_Text.css" rel="stylesheet" type="text/css" />
        
        <!-- Collapsible menu script -->
        <script src="jquery-1.6.4.min.js"></script>
        <script src="jquery.cookie.min.js"></script>
<script src="collapsible.menu.js"></script>
        <!-- End collapsible menu script -->

        <style type="text/css">
                <!--
                a:link {
                        color: #000;
                        text-decoration: none;
                }
                a:visited {
                        text-decoration: none;
                        color: #000;
                }
                a:hover {
                        text-decoration: underline;
                        color: #000;
                }
                a:active {
        text-decoration: none;
        color: #000;
        font-size: 11px;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
                }
                #biggy #menu #CollapsiblePanel1 strong em {
                        filter: Gray;
                }
                div:active, div:focus, div:hover {
        outline-style: none;
        -moz-outline-style:none;
        color: #000;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        padding: 0px;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
                }
                #app_menu {}
                #app_menu h3{
        cursor: pointer;
        font-size: 11px;
        color: #000;
        margin-bottom: 0px;
}
                #app_menu ul{margin-top:0px;margin-bottom:0px;}
body,td,th {
        font-size: 11px;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
a {
        font-size: 11px;
}
h2 {
        font-size: 11px;
        color: #000;
}
h3 {
        font-size: 11px;
        color: #000;
}
h4 {
        font-size: 11px;
}
                -->
        </style>
        <script type="text/javascript">/*<![CDATA[*/
                $(document).ready(function(){
                        
                        // Initialise collapsibles
                        var v_collapsible_id    = 'app_menu';
                        var v_effect                    = false;
                        window.app_menu = new CollapsibleMenu(v_collapsible_id, v_effect);
                        
                });
        /*]]>*/</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#000000" alink="#000000">
<div id="header">
                <strong><em><a href="../x-index.html"><br />
                NICOLAS GRENIER</a></em></strong></div>
<div id="biggy" style="width:1200px;">
  <div id="menu" style="width:200px;float:left">
    <div id="app_menu">
      <h3><em><a href="#">WORK</a></em></h3>
      <div><a href="../x-holistic.html">HOLISTIC COMMUNITY<br />
                            DEVELOPMENT<br />
                                </a><a href="#">GENTRIFICATION-READY SINGLE<br />
                                </a><a href="#">
                                FAMILY GREEN ROOF HOUSING<br />
                                </a><a href="#">CENTER OF POWER<br />
                                </a><a href="#">MODEL INTEGRITY<br />
                                </a><a href="#">VERTICALLY INTEGRATED<br />
                                </a><a href="#">SOCIALISM<br />
                                </a><a href="#">CLINICAL FARM<br />
                                </a><a href="#">EDEN<br />
                                </a><a href="#">JEU NOIR<br />
</a><a href="#">SELECTED EARLIER WORKS</a> </div>
                                <h3><em><a href="#">COLLABORATIVE PROJECTS</a></em></h3>
                                <div><a href="#">NO HORIZONS<br />
                                </a><a href="#">QUESTION DE PRINCIPE<br />
                                </a><a href="#">MATTER OF PRINCIPLE<br />
                                </a><a href="#">THAT'S HOW WE KNOW<br />
                                </a><a href="#">THE TONGUE IS BLIND<br />
                                </a><a href="#">THE FUTURE IS DEEP<br />
</a><a href="#">ON THE TOP / BOTTOM</a> </div>
                                <h3><em><a href="#">WRITING</a></em></h3>
                                <div><a href="#">OF THE VISUALITY OF THE CITY<br />
                                </a><a href="#">NO HORIZONS<br />
                                </a><a href="#">QUESTION DE PRINCIPE<br />
                                </a><a href="#">MATTER OF PRINCIPLE</a> </div>
                <h3><em><a href="#">INFO</a></em></h3>
                                <div><a href="#">CV<br />
                                </a><a href="#">CONTACT<br />
                                </a><a href="#">FRANÇAIS</a> </div>
        </div>
                <p>
                  <!-- End collapsible side menu -->
                  
    </p>
    <p>&nbsp;</p>
  </div>
  <div id="content" style="width:1000px;float:left;padding-top: 11px;">
	  <div id="content2"><!-- TemplateBeginEditable name="content-images" --><!-- TemplateEndEditable --> </div>
	</div>
</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:nicolas-castlestudio
ID: 37091077
Hi TheFoot,

Thanks for your answers. I can't be at my studio until tomorrow but I'm sure it'll work, or at least now I'll be able to change it. Your answers correspond to what I thought the problems were but I just couldn't where to change it.

I'll work on it on Monday and will reply right away. I'm sure should be able to close the question by then. Thanks again.

Nicolas
0
 

Author Closing Comment

by:nicolas-castlestudio
ID: 37092054
TheFoot help me figure out everything including the last details. I highly appreciated his valuable help.
0
 

Author Comment

by:nicolas-castlestudio
ID: 37092059
Thanks for your help. Everything works!
0
 
LVL 12

Expert Comment

by:Barry Jones
ID: 37092963
Glad to help, thanks for the points!
0
 

Author Comment

by:nicolas-castlestudio
ID: 37653146
Hi TheFoot,

I've having a flickering problem with the jQuery collapsible panel you wrote for me, so I posted a new question:
http://www.experts-exchange.com/Internet/Web_Development/Q_27607677.html

it would probably be easier for you to solve it since you know the codes, so if you have a chance to check it out I would really appreciate. thanks!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to count occurrences of each item in an array.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question