Menu Tabs in CSS a Layout Tableless


The menu on the tabs is one of the current trends of web design. The majority of sites with this feature follows the same structure: header, menu, content and footer using jquery (ie, no tables) to organize these elements. Probably you have seen many sites that use this scheme, and this tutorial teach you how to ride your.


Here we will use two files: pagina.htm with the HTML code, and style.css, with the style sheet. The basic structure of the our HTML code is the following:

Note that it is not being using a Doctype or the meta-tags, but you must add these add-ons later.

In our file style.css, I’m going to start by the style of the tag body:

It was defined that the background color will be grey of course, the text will be in black color, the size is 11 pixels and the font used on the page will be Verdana. If the user’s computer does not you have this font installed, it will be used the second option: a generic source sans serif.

Already the line margin: 0; padding: 0; determines that no there will be a margin or line spacing in the body of the document. In practice, our content will be “glued” to the top of the page without any space. Noticed that along with the values there unit of measure (px, pt)? This happens because the value is zero – when you use any other value, don’t forget to to determine the drive!

The text-align: center; is a trick to center the content of our page, which continues on the next element.

The div external

Now yes, let’s go to the formatting itself. Starting with a div centered with 750 pixels in width, which ensures that the page will be appropriate to the resolutions 800×600 and 1024×768 pixels.

Here we define that the background will be white, the border will be black with 1 pixel of width and with a solid line and the width of the div will be 750 pixels. The attribute margin: auto; is used as a trick to align the element in the center of the page: as the margin it is automatic, the browser will distribute it equally of the two sides of the element, centering-o.

Already the text-align: left; is the second part of the trick to center the content: without this attribute, the entire text of the the page would be centered when it was displayed on the Internet Explorer. This is called inheritance, the subject to be addressed later.

Inserting a header

Here we will put only the word “header”, but you you can use this space to insert a logo, banner, etc.

In our style file, we give the formatting to the element:

Here, we use the color grey for the background, font size 18 pixels, centered alignment of the text and a spacing of 30 pixels, to leave the header high. All of these values can and should be adapted to your layout from the CSS and your creativity!

Entering the menu

Finally we came to the part most important of our code: the menu itself.

Yes, our menu is an ordered list! This is a sample how the CSS and the creativity, you can make amazing effects in our pages without the use of JavaScript or Flash.

Without the CSS, the code above has the following appearance:

  • link1
  • link2
  • link3
  • link4
  • link5

In height: 27px; we define the height of the menu; however, this height will vary according to the source, the spacing and other parameters. Our sample is 27 pixels high, but you may may need to adjust this value with “trial-and-error” until get to a size that generates the same result in any browser.

Here, margin-left: 6px; sets the distance between the first tab and the left edge of the element.

In CSS, if a particular property is not set, the element inherits this property from the element top. In our case, the font type defined in the element body has been inherited by all the elements within it. In the header, we define a size of different font, and it was this value that prevailed; in the menu, the font size was not set, then the prevailing 11px of the topmost element. That is why the CSS it is called style sheet cascading (Cascading Style Sheets).

The property display: inline; is what sets the items the list will appear side-by-side, and not one in each line.

The next step is to define the style of the tabs. Note that each tab is a link; therefore, the element that will receive the formatting is the:

In this code we have some new features:

  • The property border-bottom refers to the bottom edge of the element. There are also properties for border-top (top), border-left (left) and border-right (right). If you are going to set a specific style for one of these values, always do this after setting the edge general. Remember of the cascade? If you set the bottom border and then the edge general, the second will overlap the first time;
  • In float: left;, we define the alignment of the menu to the left;
  • When the padding property has two values, as in padding: 5px 7px;- the first refers to the horizontal spacing (top and bottom) and the second to the vertical spacing (from the side left and right side);
  • Probably text-decoration: none; is already family: this property takes away the underline of the link.

If you do not have much experience with CSS, should be wondering what they mean so many things. By parts: #menu it is the main element; ul is the ordered list; li is the item in the list and the is the link. Thinking in the order reverse, #menu ul li a defines the style of the link of the item the list of the menu. After all, if you set the style only with the {color: #000;}this would affect all links of the document, when we only want to format a particular link in a div.

By highlighting the tab

Here, one of the most interesting parts of the tabs: when the user pass the mouse over one, it gets highlighted. How to do this? Simple: we just set the style of the tab as a link: now we will set the style of the tab highlighted in the same way that we define a link highlighted, with the attribute to the:hover.

Our tab highlighted will have a white background and the text and border in red. The bottom edge remains omitted, as well as the underline of the link.

Adding the content and the footer

Finally, we will add the content and the footer of our layout.

The novelty here is the clear: both;, which positions the element entirely below the topmost element (which is being aligned with float). In our case, if we had defined a width of 300 pixels for the menu, and 200 pixels to the content, such as the menu takes the attribute float: left;, the content would be embedded to the right of it.

Note that throughout the tutorial we use the encoding in place of accented characters. In my portfolio you can find a list with all these codes, to make sure that the accent your website will be displayed correctly in any browser with any coding language.

Menu Tabs in CSS a Layout Tableless 1

Menu Tabs in CSS a Layout Tableless
Rate this post

You may also like...