Complete tutorial to learn how to layout a web page using CSS, with the techniques available in traditional CSS (CSS2), with floats and without using tables.
We are going to carry out an exercise in designing a web page using only Cascading Style Sheets (CSS), completely separating the content of the HTML file from the skin definitions, which will be saved in a .css file. We will carry out the exercise step by step, starting from an image previously designed with a graphic editing program such as Photoshop.
starting images
We can as similar as possible. It is not the objective of this manual to offer the techniques to make this image, although in .com we can see tutorials to learn some of the design tricks used.
It is a simple design, but in which there are different and varied elements with which to work.
From this image we have extracted some graphics, which we will use when laying out the design. It would be interesting .
For the impatient, we have a link to the result page that we are going to achieve at the end of the article. It may be good to see it to get an idea of where we want to go.
Development of the page and the style sheet
We are going to generate the HTML and CSS files at the same time, but step by step, so that we can explain the tags and styles that we have used for each part of the page.
As a first step, in the
of the HTML document, we will link to an external style sheet.The body of the page
In the CSS style declaration, for the body of the page, we have defined a background image “background.gif”, which will be repeated throughout the page in a mosaic. Some margins and alignment of the text are also defined, in this case centered, so that the content of the page appears in the center (this is necessary for Internet Explorer, the centering in Mozilla and other browsers is done in the main layer with the attribute “margin” defined as “auto”).
In addition, other attributes are defined for the body of the page, which will later be inherited by other elements, such as the font or the color of the text.
BODY { background : #C0D9D9 url(images/background.gif) repeat; font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; color : #666666; margin : 20px 0px 20px 0px; text-align: center; }
The container layer
Generally, a main layer is used, which we have called a container. Within this layer all the elements that the page will have are placed.
In this layer we define the alignment of the text to the left (because in the body we had centered the text, so that Internet Explorer centers the container layer and we want the default alignment to be left). We also define a width of 700px, a white background color and the margin, with the “margin” attribute, we define it as “auto”, so that Mozilla and other browsers center the layer.
#container{ text-align: left; width: 700px; background-color : #ffffff; margin: self; }
By the way, we have deliberately left the border of the layer, which we had defined in the original design. The “border” attribute could have been defined, but that has a negative impact on the layout in Explorer. We will see later how to place it so that it is seen correctly in all browsers.
We continue the practical exercise to carry out the layout of a page step by step with layers and cascading style sheets. You can view the previous article in this series at .
Design the header of the page
We are going to place the image at the top of the page in a single graphic file. It is the most comfortable for this design, since the headboard has no other reason than decoration.
We can see that it is a simple image, but be careful, we have to place the
after without any space or line break, because if not, Internet Explorer will insert a small margin below the image, that we want to avoid.
The style attributes defined for the header are the dimensions of the layer, which we want to be the same as the dimensions of the image. Although in this case we could have saved ourselves from defining those values because they are the ones that would be taken by default.
#header { height : 106px; width: 700px; }
the navigation bar
Let’s go with the layer used to define the horizontal navigation bar below the header.
As you can see, we have simply defined a series of links within a layer. It should be noted that the links also have a class, called “enlacenav”, which we will use to give these links a specific style, independent of the one defined by default on the page.
Regarding the layer, a background color and image, some internal margins (padding attribute) and a border are defined, both for the upper part of the layer and for the lower part.
#browser{ background : #F5F4C3 url(images/fondonav.gif); padding : 3px 10px 5px 10px; border-top : 1px solid #cccccc; border-bottom : 1px solid #cccccc; }
For the styles of the links we use a class. To define the styles of each of the link states (visited, active, unvisited, etc.), the pseudo-classes VISITED, ACTIVE, FOCUS, LINK AND HOVER are used. We simply define the color of the links, the same for all the pseudo-classes, except for HOVER, which has a different color. HOVER is the state of the link when the mouse pointer is hovered over. In this case, when the mouse is over, it will change color.
A.vlink, A.vlink:VISITED, A.vlink:ACTIVE, A.vlink:FOCUS, A.vlink:LINK{ color: #494E6B; } A.vlink:HOVER{ color: #3F7DE3; }
The body of the page
As body we refer to the part of the page where we place the main information. We will create a separate layer for the body and place the title, text and other elements that we want to place inside. We introduce the elements with the HTML tags that they should have in a basic page. Then, with CSS we will define the style for the body and each of the tags that we place inside.
Page title
In this article we are going to learn about page layout using Cascading Style Sheets (CSS). We will see how to make this type of layout, along with some advantages and disadvantages. For many it will still be a field to explore. Although we are not going to go into great detail, we are going to try to present the layout with CSS to cover the possible gap on the part of the reader. In subsequent chapters we will expand the information and offer more practical tutorials.
As you have been able to learn in the CSS Manual, cascading style sheets help to separate the content from the form, that is…
We see that the body has a title, several paragraphs and a div, included within the body itself, with a second link bar that facilitates navigation for people who reach the end of the vertical scroll of the page.
Body styles define the width, margin, inner margin, and a background color. In addition, the “float:left” attribute is defined to make the body “float” to the left. The result is that the body layer is placed on the left and the content written after it is placed, surrounding this layer, on the right. (The effect is the same as assigning the align=left attribute in HTML to an image)
To enable the layout in two columns that we have defined in the original layout, we are going to make the layer on the left -the body- “float” to the left. Subsequently, we will make the layer on the right that we have not yet placed -the side-, “float” to the right.
#body{ width:480px; margin-left: 8px; padding: 12px 0px 10px 0px; background-color : #ffffff; float:left; }
A style is also defined for each of the tags that we have placed inside the body:
h1 { font-size: 12pt; }
Level 1 headings, which have a 12pt font size.
#navabajo { font-weight : bold; }
To make the bottom body div bold, which has links for easy navigation.
To continue we are going to create the right side of the page, where several boxes with a search engine and access to other information are shown.
the side layer
On the right side we place a new layer, which offers access to services and other information.
We will see the content that we are going to place within this layer in parts, since it has many details to highlight calmly. The styles are as follows:
#side { width: 200px; background-color: #EBF2FE; border-bottom : 1px solid #cccccc; border-left : 1px solid #cccccc; float:right; }
A width, a background color and light gray borders are defined on the left and bottom sides, the other two sides will have no border because they are in contact with the borders of other elements.
Also, with the float:right attribute, we indicate that this side should “float” to the right. Thus, the body floats to the left and the side to the right, with which we achieve a layout in 2 columns.
Next we will see the elements that we are going to place inside the lateral layer, in a kind of independent boxes. Although, before seeing these boxes one by one, it is worth knowing in general terms how they are going to be created. Each box will have this HTML code, composed of a title and a content of the box:
Title of the box
We include the title with an
tag and the part of the box with the content is defined with a div. Each of these elements has a class, which will be applied to the same elements in each of the boxes, so that all the elements on the side share the same style.
.titlelat { background-color:#68729E; color:#ffffff; font-size: 8pt; text-transform : uppercase; padding: 7px 3px 7px 8px; font-weight : normal; letter-spacing : 2px; margin: 0px 0px 8px 0px; } .bodyside { padding: 5px 4px 13px 10px; }
The level 2 header uses the “titlat” class, which defines a background color, a text color, a font size, capitalization of the title letters, internal margins, normal font weight (not bold). , as the default headers usually are),…
Facebook Comments
Disqus