Creating a liquid graphic layout

[Guest CougarB]

Hi,

 

I'm really a writer, not a programmer nor a web designer, so I was borrowing some CSS tricks that I used on my main site at:

http://www.gwsh.org/index.htm, where you will see that I've built a left-hand navigation table with fly-outs to drill down into a topic or to provide explanations of a topic. (Yeah, I know I have to reduce the margins between the fly-outs and the main menu by 3px and change the menu width to a percentage. Too busy.)

 

In the two attached pictures, you will notice that I used the same technology to create a list of exercise titles and instead of a fly-out, a floating description of that exercise. Each of these exercises is served from a database that currently contains 170 of 290 exercises and 170 of 400 navigation hubs (not shown). I'm developing the code while I fill the database for this first step.

 

In the code, you'll see that I tried to place both the title and the description at variable places on the page using the classes:

.menu ul.top2 {top:00px; left: 582px; width: 580px;}

...

.menu ul.top5 {top:120px; left: 282px; width: 280px;}

etc. The position attribute numbers are arbitrary and variable only for testing purposes. Once the engine is fixed, I'm planning to create a liquid and programmatic layout.

 

On desc1.jpg, you'll see that the top2 class is working for the width of both the title and the description, but that the top and left attributes only work for the description. This means that the two elements are separated by a distance.

 

They should overlap, as they do in desc2.jpg, in which the top5 class is active for both title and description, but the overlap is due to luck, rather than programming.

 

I'm sending you the unbroken code as it is right now, because I'm not confident of my ability to simplify it without breaking it. The extra complexity is based on the fact that neither the descriptions of the exercises nor the title choices on the page are hard-coded, but are programmatic. When I build the feedback and personalization modules, both the choices and the descriptions will be modified by user behavior and preference.

 

So how do I modify the css and code so that I have more control over the placement of the titles and descriptions? I don't need step by step--just point me in the direction.

 

Thanx,

Cougar

 

<!-- PARTIAL CLASS --> <!-- PARTIAL CLASS --> <!-- PARTIAL CLASS --> <!-- PARTIAL CLASS --> <!-- PARTIAL CLASS --> <!-- PARTIAL CLASS --> 

class Links {

   public function display_exercises($items, $linktype, $searchterm, $searchtype, $parent_title, $t2) {
       if (isset($parent_title)) {
           echo '<h1>'.$parent_title.'</h1>';
           if ($linktype == "E") {
               echo "<br> You do the exercise, and then, when you\'re looking for the next thing to do, you go to the:";
               echo '<h2>What\'s Next? Section</h2>';
           }
           $parent_title2 = $parent_title;
       }

       $linktype2 = $linktype;
       $searchterm2 = $searchterm;
       $searchtype2 = $searchtype;

       for ($title = 0; $title<5; $title++) {
           $topcount = $title +2;

           if ($items[$title]['whats_next'] == 1) {
               $child_nav_id = $items[$title]['child_nav_id'];
               $child_nav_type = $items[$title]['child_nav_type'];
               $parent_title =  $items[$title]['title'];
               echo '<a href="choices.php?searchterm='.$child_nav_id.'&searchtype='
                   .$child_nav_type.'&parent_title='.$parent_title.'&linktype='.'E'.'">';
           }
           if ($items[$title]['title'] != "") {
               echo "<div class='menu'>
	<ul class = 'top".$topcount."'>
                   <li><b>" . $items[$title]['title'] . "</b>" ;
               echo "<ul class = 'top".$topcount."'><li><span class='menu_description'><p>
               Use the exercise \"" . $items[$title]['title'] . "\" " ;
               for ($desc = 0; $desc<3; $desc++) {
                   echo  $items[$title]['nav_point_descs'][ $desc]['description'];
                   if ($items[$title]['nav_point_descs'][ $desc]['description'] == "tktktk") {
                       echo  " This section is not fully written.";
                   }
                   if ($items[$title]['nav_point_descs'][ $desc + 1]['description'] != "") {
                       echo  " Use it ";
                   }
               echo "</li></li>";
               }
               echo "</span>";
               echo "</ul></div>";
               echo "</div>";
           }
           if ($items[$title]['whats_next'] == 1) {
               echo  '</a>';
           }

       }


       if ($t2 == 0) {
           echo '<p><a href="choices.php?searchterm='.$searchterm2.'&searchtype='
               .'N'.'&parent_title='.$parent_title2.'&linktype='.$linktype2.'&t2='.'1'.'">
                       <br /><br /><br /><br /><br /><br /><h2>Click to Broaden Your Search</h2></a>';
       }
   }

<!-- PARTIAL CSS --> <!-- PARTIAL CSS --> <!-- PARTIAL CSS --> <!-- PARTIAL CSS --> <!-- PARTIAL CSS --> <!-- PARTIAL CSS --> 

.menu {
float: left;
margin: 0px;
}
.menu ul li {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
border: thin solid #FFFFFF;
background-color: #000000;
padding: 3px 3px 3px 3px;
display: block;
color: #FFFFFF;
}
.menu ul li:hover  {
/* 	border: thin solid #FFFFFF; */
background: #9DA9C8;
padding: 3px 3px 3px 3px;
color: #000000;
display: block;
}
.menu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFFFFF;
text-decoration: none;
}
.menu ul li a span {
display: none;
}
.menu ul li a:hover {
background-color: #9DA9C8;
color: #000000;
display: block;
margin: 0px;
}
.menu ul li a:hover span {
display: inline;
background: #9DA9C8;
color: #000000;
font-size: x-small;
margin: 0px;
float: none;
} 
/* The following positions and sizes the blue boxes that contain the descriptions.*/
.menu ul.top2 {top:00px; left: 582px;	width: 580px;}
.menu ul.top3 {top:40px; left: 482px;	width: 480px;}
.menu ul.top4 {top:80px; left: 382px;	width: 380px;}
.menu ul.top5 {top:120px; left: 282px;	width: 280px;}
.menu ul.top6 {top:160px; left: 382px;	width: 380px;}
.menu ul.top7 {top:200px; left: 182px;}


/* hide the sub levels and give them a position absolute so that they take up no room 
if you make this relative, the black boxes expand to cover the hidden blue boxes.*/
.menu ul ul {
visibility:hidden;
position:absolute;
} 

.menu_description {
height: auto;
background: #9DA9C8;
color: #000000;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
border: thin solid #FFFFFF;
padding: 3px 3px 3px 3px;
}



/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility:visible;
background:#000000;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul a:hover ul {
visibility:hidden;
background-color: transparent;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
background-color: transparent;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
background:#000000;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
background:#000000;
}
.morespan {
background-color: #000000;
color: #B3C0EA;
}