Imitate a web page using CSS


In my last post, I took an existing webpage that was created using table tags and updated it to use divs in CSS. Well it turns out the client who requested the job liked it so much he wanted the same webpage on a second site except he wanted the pages to update to match the schematic colors from the other site. Basically they wanted the same pages to be formatted in two different ways. Fortunately, using CSS makes this very easy to do. This article will go over the different divs that make up the page and discuss some of the trickier elements, along with CSS tips, tricks, and callbacks.

These tips include:

  • How to add a background color only to the side margins while leaving the background color for the central content area in white.
  • How to adapt to all major browsers without proprietary code.
  • How to provide different styles for links on the same page.
  • How to get the exact color of a web page so that you can apply it to yours.

Imitate a webpage: create a clone of a page using CSS

To begin with, I was asked to emulate this page (a screenshot of the final result is at the end of this article):

The first thing I noticed was the light blue background color. It’s pretty easy to do like this in CSS:

body {
background: # 6599b1;
}

However, this adds a background color to the whole page, which you don’t want. What you want is to add a background color only to the side margins. To do this, you need to put all your divs in a container. The div container sets the width of all divs that go inside the container and positions the container in the center of the page.

# container {
width: 900px;
margin: automatic 0;
filling: 0;
}

In your HTML code, the code to add the div container looks like this:

Do not forget to place the closure

in the end after all the content. For all the divs you want inside the container, and to effectively block the blue background so that you can assign a different color background, make sure to nest the content divs within the divs of the container. For example, the div for logos looks like this:

#container #logos {
background color: #ffffff;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-right: none;
left border: none;
width: 100%;
height: 95px;
fill: 10 0 10 10 px;
}

The HTML code to insert this div looks like this:

Note that you don’t need to include the #container for the #logo design elements to work. However, to block the blue background color that has been set in the body, you need to set your borders, even if there aren’t any. It is also important to set the width to 100%. This will help you later when viewing your pages in Internet Explorer, Firefox, Chrome, and Safari. Internet Explorer will treat the spacing between items differently from other browsers.

It is important to view your web pages in all major browsers before declaring that they are complete. At this point, there is only one div defined, so you won’t see any difference in width; it’s when you start adding extra divs to the page that you’ll start to notice that they’re not all the same width. This is why it is important to set the width to 100%.

But what if you have two different divs appearing in the same row? When this happens, you cannot set the width to 100%. Take, for example, the line of text that appears below logos. In this row, there is an image, the title of the page and the breakdown of the acronym. To organize this properly on the page, you will need three new divs.

The first div is for the image and the first block of text, the second div is for the text on the right side of the page, and the third div is a second container, which is inside the first container. Here is the CSS code for the second container:

#container # header {

background color: #ffffff;

border: 1px solid # 666666;
border at bottom: #ffffff;
border-right: none;
left border: none;
fill: 10 0 10 10 px;
float: left;
width: 100%;
height: 60px;
}

Note that the div starts with the first #container and #header defines the secondary container. Also note the importance of setting borders, width and height. To place the header text in the #header container and the # main container, do the following:

#container #header # text1 {

background color: #ffffff;

border-top: 1px solid #ffffff;
lower border: none;
border-right: none;
border-left: 1px solid #ffffff;
width: 440px;
float: left;
}

#container #header # text2 {
border-top: 1px solid #ffffff;
lower border: none;
border-right: none;
left border: none;
width: 310px;
Float right;
text-align: left;
vertical alignment: middle;
background color: #ffffff;
}

Note that I set the background color in each div. I used this same “container within a container” trick for the side menu and the main window with the text. It might be hard to tell from the screenshot, but the links in the gray area are white and have an underlined hover effect. You can use basic CSS to make these effects happen. However, in the main window the links are blue and the hover effect makes the font green. It can be a bit difficult to have two different styles of links on the same page, but you can do it through CSS. First, you need to set the links for the main window like this:

#menumain a {
color: # 0000FF;
text-decoration: none;
}

#mainmenu a: hover {
color: # 339900;
text-decoration: none;
}

Then define the side menu links in the same way:

#sidemenu a {
color: #fff;
text-decoration: none;
}

#sidemenu to: hover {
color: #fff;
text-decoration: underline;
}

Then set the divs for the two menus using the same secondary container technique used above. For the special link formatting to work, in HTML all you need to do is this:


Comments are closed.