Create a rounded block or design with CSS and XHTML (new version)

First case: a fixed width block

This new version of the tutorial will teach you to easily create a rounded block, or design in general, that will be able to expand only in its height (for variable menus for example) using CSS.

To create a block that would expand in both directions (height and width), go directly to Second Case.

We will create this block using three images and without any block or <div> tag. We will start with the principle that this block will have a fixed width of 275px.

Here are the images that we will use for the block:

Note : We could have used only two images to create the block (by attaching milieu.gif et bas.gif to create a stretched global image), but this technique would have been too heavy for very graphic jpg. blocks for example.

We will use the Definition lists (<dl>, <dt> and <dd> tags) for our block's structure. The <dl> tag will contain the whole thing. The <dt> tag will be the block's title and the <dd> tag will contain the content (we can use several <dd> tags for the menu elements for example).

Definitions lists?

Our structure is of the form "title + description" (description meaning content of the block that will talk about what the title announces). Semantically, definitions lists are ideal for structuring these kinds of blocks.

W3C specifications suggest that definitions lists can be applied as long as there is a relationship between the elements "title" and "elements".

A definitions list is made of three tags: <dl> is the global container (same as <ul> for simple lists); <dt> gives the title of the list and <dd> is an element of the list that is described by the title.

A few websites have developped this structure to certain length, please read this article: Definitions lists: not used well or misunderstood?

CSS will simply define our global block, (dl), our title (dt) and the content (dd).

Here is the construction for our height expandable block:

CSS code:

	
dl { /* block position that can be changed at will */
position: absolute;
left: 50px;
top: 20px;
width: 275px; /* width of block according to your background image */
}

dl, dt, dd { /* suppression of all margins and paddings */
margin: 0;
padding: 0;
}

dl { /* by default background on the entire block */
background: url(bas.gif) bottom left no-repeat;
padding-bottom: 40px; /* so that text will not appear on the bottom rounded edge */
}

dt { /* bloc title definition */
height: 40px;
background: url(haut.gif) top left no-repeat;
font-size: 1.3em;
font-weight: bold;
text-align: center;
}

dd {
padding: 0 20px 0 10px; /* internal block spaces administration */
text-align: justify;
background: url(milieu.gif) top left repeat-y; /* internal background */
}

Complete HTML code:

<body>
	<dl>
		<dt>My beautiful space</dt>
		<dd>Lorem ipsum dolor sit amet, bla bla bla bla...</dd>
	</dl>
</body>

View the result

Variation: menu creation

This technique is also totally adapted to the creation of a menu within a bloc.

Use the elements of the <dd> list for each item in the menu.

This is the HTML code adapted for a menu (please note that we use accesskey to make accessibility easier for user without a mouse):

<body>
	<dl>
		<dt>My beautiful space</dt>
		<dd><a href="#" title="menu1" accesskey="1">Menu 1</a></dd>
		<dd><a href="#" title="menu2" accesskey="2">Menu 2</a></dd>
		<dd><a href="#" title="menu3" accesskey="3">Menu 3</a></dd>
		<dd><a href="#" title="menu4" accesskey="4">Menu 4</a></dd>
		<dd><a href="#" title="menu5" accesskey="5">Menu 5</a></dd>
	</dl>
</body>

View result: block menu

 

Second case: seamless block

We want now create a block with rounded edges and that will adapt automatically to its content both in width and height. View result.

As well as for the first case, we will define a container (dl) for the whole block.
In our tutorial, the global width of the block is defined as 75% of the width of the page (this is only an example).
You may give another value than 75% and adapt the size of the block that you want to create. You may also give it a fixed width using pixels, with the only condition that the fixed width be superior to the length of the title image.

Here are the images used for the borders:

As you can see, the images "haut.gif" and "bas'gif" are both 1200 px in width, to be able to adapt to the semalessness of the block: only the left part of the images is displayed, the rest is hidden, appearing only when the block or the browser's window expand.

The general structure looks like the first case's, but it will need a little rearranging to make sure the width of the block expands seamlessly: the title (dl) will contain the image "haut.gif" as a background, as well as the upper right corner as a floating iamge.
The last item of the definition list, the dd names "bottom" will contain the image "bas.gif" as a background, and the lower right corner as a floating image.
The sides will simply be borders (border) applied to the elements of the list (dd).

Here is the general structure (HTML part to place between the BODY tags):

<dl>
<dt><img id="upperright" src="hautd.gif" alt="" />
	<img id="title" src="titre.gif" alt="titre" /></dt>
<dd>bloc content....</dd>
<dd id="bottom"><img id="lowerright" src="basd.gif" alt="" /></dd>
</dl>

Here are the definitions for the CSS style page:

Note: /* these texts are explanation texts and can be deleted at will*/

dl, dt, dd { /* suppression of all margins */
margin: 0;
padding: 0;
}

dl {
width: 75%; /* dimentions and positions to be changed at will */
position: absolute;
left: 3em;
top: 2em;
}

dt {
height: 50px;
background: #fff url(haut.gif) top left no-repeat;
line-height: 0;
text-align: center; /* centered title, bug IE*/
}

dd {
border: solid #5A6C84; /* sizse and color for borders on the right and left */
border-width: 0 5px;
padding: 0 10px; /* left and right padding to avoid text appearing over borders */
}
#bas {
height: 50px;
background: #fff url(bas.gif) bottom left no-repeat;
border: 0 none; /* no lateral border for the lower part */
padding: 0; /* no text, so no padding */
}

#titre {
display: block; /* title image places in block to avoid errors of spacing */
margin: auto; /* centered title */
}

#droitehaut, #droitebas { /* position of upper floating corners */
float: right;
}

Our block is done! View the result.

Important note for certain blocks: It is possible that the upper or lower parts of your block appear twice of inserted additional spaces.
This is normal: on Internet explorer all images and other inline tags are assigned a minimal height by default (by default the height of the text), which is about 13px to 16 px. As a result all images that are less than 13 px in height will be automatically assigned at least 13 px.
You can trick Internet Explorer into displaying the images as a block (as on our example) or by inserting dimensions with font-size and/or line-height with a value 0 within the concerned blocks.

Print article

Raphael GOETTER
www.alsacreations.com