Build Table-less CSS Layouts with eZ Publish

As an example of how images can be used in a CSS-based design, I'll make some of the corners in our design round by adding background images to the layout. The first curved corner is defined for the right corner of the tool list, showing the latest news.

The screenshot below shows what the toollist looks like after we have applied these CSS changes.

We create an image that has a red foreground color and a white background color. The image is aligned to the top right in the header of the tool list. If we additionally make the borders white and tint the background color of the whole box, the corner of our tool list will appear nicely rounded. Add the CSS code shown below to the site-colors.css file. The image needs to be placed in a sub-folder called images.

div.toollist-design 

 { 

    background-color: #eee; 

  border-color: #fff; 

 } 



 div.toollist-design h2 

 { 

   color: #ffffff;

   background-color: #c40017; 

   background-image: url(images/rounded_right.gif);

    background-repeat: no-repeat; 

   background-position: top right; 

 }

Toolbox Curves

Next, we modify the tool box.

The following CSS code adds a border and sets the background color to white. I did this to make the display of the tool box a little different from the tool list, since they hold different types of content.

div.toolbox-design 

{ 

   background-color: #fff; 

   border: 1px solid #c40017; 

} 


 div.toolbox-design h2

 { 

   color: #ffffff; 

   background-color: #c40017; 

 }

I want to add two more rounded corners at the upper right corner of the main content area and the lower left corner. This is done with the same technique: just create an image with the respective curve, and add it as a background image. The CSS statements that are used to set the background images are shown below.

div#topcontent  

{ 

  background-image: url(images/rounded_top.gif);

 background-repeat: no-repeat; 

 background-position: top right;

} 

 div#allcontent 

{ 

  background-image: url(images/rounded_bottom.gif);

   background-repeat: no-repeat; 

 background-position: bottom left; 
 }

Finally, let's change the image of the search button. Since it's a blue bitmap, I replace it with a simple white dot on a red background. This submit button is also changed to reflect a vertical alignment.

input.searchimage 

> { 

    width: 17px;

    height: 17px;
    vertical-align: middle; 
    margin-left: 5px;  

   background-image: url(images/bullet.gif); 

    background-repeat: no-repeat; 

 }