Question

I cake-baked (cake bake) a test installation that resulted the Product Controller and its views such as index.cpt, add.cpt, edit.ctp, etc. I’m looking at the CSS file that these views are using, and there are two divisions: action and products index.

I see the actions div tag in the CSS file, but I don’t see one for products index. The code is below for these divisions.

/** containers **/
div.form,
div.index,
div.view {
    float:right;
    width:76%;
    border-left:1px solid #666;
    padding:10px 2%;
}
div.actions {
    float:left;
    width:16%;
    padding:10px 1.5%;
}

My questions are:

1. why is products index‘s parameters defined under div.view?

2. I see div.form and div.index end their lines with a , rather than empty brackets. What does this mean?

3. Right now the page is divided vertically into two as follow.

   ---------------------
   |    |              |
   |    |              |
   |    |              |
   |    |              |
   |    |              |
   ---------------------
   

What the ideal method to employ to make the following? Is it possible to make the following using these div tags alone or should I look into using tables? I’d like to put navigation bars on the left and on the top as shown on all pages. I’m using using app/views/layouts/default.ctp and this->element().

    ---------------------
    |    |              |
    |    |--------------|
    |    |              |
    |    |              |
    |    |              |
    ---------------------

Answer 1

I do not know CakePHP, but the majority of your questions are limited to CSS.

why is products index’s parameters defined under div.view?

This is most likely due to the fact that there is a generic implementation of what a view is. All “views” share the same layout, so there’s no need to repeat yourself in the CSS file for each page if its the same. Just tag the div with a class (that’s what they’re there for), and move along.

I see div.form and div.index end their lines with a , rather than
empty brackets. What does this mean?

This is a combined selector in CSS. When multiple selectors share the same style, you can denote them in a comma separated list before the ruleset declarations. In your example, div.form, div.index, div.view all share the same style declaration. Using empty brackets would give no style declaration.

http://www.w3.org/TR/selectors/#grouping

For your third question, assuming you have some HTML as follows

<div>
  <div class="actions"><!--your actions --></div>
  <div class="view"><!-- your product index view--></div>
</div>

you can add a div tag as a child of the div.view tag to achieve your nav bar on the top. Like so:

<div>
  <div class="actions"><!--your actions --></div>
  <div class="view">
     <div class="custom_nav_bar"><!-- your new html --></div>
     <div class="view_content">
         <!-- your product index view-->
     </div>
  </div>
</div>

you can then fool around with the css of div.custom_nav_bar and div.view_content to get the desired heights/colors.

or should I look into using tables

Please dont. Tables have a purpose, but not for layout.