How To Create a Simple And Stylish Webdesign With CSS

Today I am going to show you how, with a bit of cleaver CSS coding, you can make a fairly impressive simple page. Some of the best CSS designs have almost zero hard coding in the base HTML. In this webdesign, we are going to use a scaling background. Since we want the background to scale with the browser size we cannot use a background command.

With that knowledge, let’s build the CSS for our design.

Here we need to set up our master information, basically anything that is standard through out the page we do this by using the Asterisk CSS command.

*{border:0px solid #EEEEEE; margin:0; padding:0; list-style:none;}

Next we need to define the width, height and overflow. The overflow command will make it so we do not have any over lapping of images.

html,body,#bg,#bg table,#bg td,#cont{width:100%; height:100%; overflow:hidden;}

Now we need to define the base body font we are going to use in our design. For this example, we are going to use arial. But with the newest version of Firefox, you can use any font and the browser will download the correct fron for the user.

body{font-family:Arial,sans-serif; font-size:10px; color:#000000;}

Next we need to define our Main content H1 and H2 fonts.

h1,h2,.large,.left{font-family:Arial,sans-serif; font-size:40px; color:#FFFFFF;}

Then we define our H2 and the content box bottom padding.

h2,.box div img{padding-bottom:10px;}

Now we need to define our hyperlink settings.

a{text-decoration:none; color:#000000; outline:0;}

This denotes that each image will be displayed in a box and separated from the rest of the HTML

img{display:block;}

This next section, we need to define how our scaling background will work. Absolute positioning can usually be a pain to code with, but since we are using it for our background it will not be a problem. We set the div to be 200% so it is always larger the the browser window. Then, we offset the div -50% so the div does not start on the browser window.

#background div{position:absolute; width:200%; height:200%; top:-50%; left:-50%;}

Next we align the td information with the div tag to be center and always in the middle of the browser.

#background td{vertical-align:middle; text-align:center;}

Finally we define how our background image acts within the background div.

#background img{min-height:50%; min-width:50%; margin:0 auto;}

This next section, we are going to define the the content box that will house the webpages main information. Again, we are using absoulte positioning so the content stays exactly where we intended it to be. And again, absolute positioning is not recommended for fluid design sites. Then we define the z-index. Think of your site in 3D – The higher the number you use for your z-index, the further back it will be relative to the rest of the site content.

#content{position:absolute; top:0; left:0; z-index:70; overflow:auto;}

Now we need to build our menu. Here we define that we want our menu always to be 20 pixels from the bottom and 140 pixels from the left. Then we define the z-index to 80 that way is it always behind our content box. Since we want our menu to always go across the page, we set the width to 100% and since the menu starts 140 pixels to the left, our menu will look like it could go on forever. Lastly, we state that each text line within our menu will 12 pixels high.

#menu{position:absolute; bottom:20px; left:140px; z-index:80; width:100%; line-height:12px;}

Now we are going to define our menu container. We set the height to 56 pixels to hold our menu correctly. For this design, we are going to use 4 menu links. Next we need to give the background a color. I chose white but depending on your background, you might need to choose something different. Now since we want to show our background behind the menu, we need to add an opacity. There are four different opacity commands to use since each browser handles opacity differently. I am showing you the two most commonly used. Basically, we are telling the browser that we want the background of our menu to be 60%. Finally, we add a top and left padding so our menu does not touch the edges.

#menu div{height:56px; background:#FFFFFF; opacity:0.6; filter:alpha(opacity=60); padding:7px 0 0 7px;}

In the next to sections of code, we define the parent of our menu. Notice that this section is -140 to the left so it fill the empty space before the main menu.

h1{position:relative; left:-140px; margin-bottom:-63px; width:140px; opacity:0.99;}

Then we define our background for our parent header.

h1 a{padding:41px 10px 10px 0; color:#000000; background:#FFFFFF; font-size:11px;text-align:right;display:block;}

The next three sections we define how our UL, LI, and LI contents display on our site.

ul{float:left; width:110px;}

li a{height:12px; padding:0 5px; font-weight:bold; color:#000000; display:block;}

li a:hover,li.cur a{color:#000000;}

These last section we use to define our main content container. The first section defines the positioning so the content is always 10% from the top of the browser window. Then we set the box to always be 200px from the right. Finally, we make the box 500 pixels wide with 100 pixel padding on the bottom to serve as a devider.

.box{position:absolute; top:10%; right:200px; width:550px; padding-bottom:100px;}

Then we define the container within the box.

.box div{line-height:1.5em; background:#FFFFFF; padding:20px 30px;}

Then define the hyperlinks within the main content box.

.box div a{text-decoration:underline; color:#FF0000;}

Then next two section we define the text settings and positioning.

.big{text-align:right;top:20px;right:80px;font-size:14px;font-weight:bold;}

.left{text-align:justify;right:auto;left:40px;font-size:14px;font-weight:bold;}

Then lastly we define our content header size.

.large h2{font-size:60px;}

Now that we have our CSS built, let’s create the html that will use our style sheet. Notice how all of our text content is housed in a main div “Content”.

<div id="content">

Then we build the text content you can use multiple classes to define one area like below.

<div class="box big left"><h2>The Worgen</h2>

The worgen are a race of feral wolf-beasts whose very name inspires fear. Theories regarding their history abound, yet the worgen’s origins remain steeped in mystery.<br><br>Records indicate that the worgen existed for a time in Kalimdor. In fact, more recent evidence suggests that their true origin might have a connection to the night elves and a secretive druidic order from Kalimdor’s distant past. Yet until new evidence comes to light, this information remains speculative.<br><br>The worgen’s first verified appearance in the Eastern Kingdoms has been traced back to the Third War, when the archmage Arugal utilized the wolf-beasts as a weapon against the Scourge. Arugal’s weapons soon turned against him, however, as the curse of the worgen rapidly spread among the human population, transforming ordinary men and women into ravenous, feral creatures.<br><br>Arugal adopted many of the worgen as his own and retreated to the former mansion of Baron Silverlaine, the estate now known as Shadowfang Keep. The curse, however, was not contentained. It persisted in the lands of Silverpine and extended even into the fabled walled nation of Gilneas, where the curse rapidly reached pandemic levels.<br><br>The citizens of Gilneas found themselves trapped, with no hope of escape. They retreated deeper within the isolated domain, and there they survived, fearful of the savage presence that lurked just outside the barricades.<br><br>Tensions among the displaced citizens escalated over time, resulting in a civil war that now threatens to destabilize the embattled nation even more.<br><br>There are those among the Gilneans, however, who cling to hope. Many believe that a treatment for the worgen curse may exist, although others have nearly given up, fearful that if the barricades should fall, their humanity will be lost forever.

</div></div>

Then we build our menu area.

<div id="menu"><h1><a href="http://www.worldofwarcraft.com/">World of Warcraft</a></h1><div>

<ul><li><a href="http://www.worldofwarcraft.com/cataclysm/">CATACLYSM</a></li><li><a href="http://www.worldofwarcraft.com/cataclysm/features/goblin.html">GOBLINS</a></li><li><a href="http://www.worldofwarcraft.com/cataclysm/features/worgen.html">WORGEN</a></li><li><a href="http://www.worldofwarcraft.com/cataclysm/media/">DEATHWING</a></li></ul></div></div>

Lastly we build in our background image.

<div id="background"><div><table cellpadding="0" cellspacing="0"><tr><td><img alt="" src="http://images.ientrymail.com/nowcss/worgen.jpg" /></td></tr></table></div></div></body>

Click here to see the final version.

Leave a comment