How To Build A Pure Css Using Online Tools Tutorial (part 3) footer and main content box

[Saint_Michael 3]

Step: 3

 

Usually The footer is a simple design of lett people know who design it, when the design was made and of course links to the HTML and CSS validation thats about it really. Of course if you plan to have more links to different website services then I recommend this drop down menu that opens up instead of down.

 

Drop Down Menu

 

Step 4

 

Since that was a simple step how about we design our content box make it look stylish in the sense that you can make rounded corners, use a background image or setting up stylish news headers.

 

 

NOTE: Their are litterally millions of designs on how ot set up content box and millions more with using news software. I recommend that you check out many different websites and see what they look like. Or if your going to Design you site in pure images then check out tutorials for content boxes and see what you can do with those.

 

So for our first Eye Candy we will set up a gradient background, make sure not to over do it or you will turn the text invisable and hard to see. So go ahead and save and now go to this site for a little corner code.

 

Content Corner

 

 

Although you don't have to do it (Most likly I will change it later for something better), this will give our content that a little style.

 

Ok as you can see from the Site we got some CSS and some HTML to paste to make things easy I tell you where to paste it so to keep some organization. So look for your #MainCOl in your CSS file and then under that paste the following:

 

/* Content Header\*/.content1-pagetitle {overflow: hidden; width: 400px; margin: 0px 0px 5px 0px; padding: 0px 0px 2px 0px; border-bottom: solid 1px rgb(88,144,168); color: rgb(88,144,168); font-weight: bold; font-size: 120%;}/* Content Corner\*/.curlycontainer{background: url("grad.jpg"); background-repeat: no-repeat;border: 1px solid #b8b8b8;margin-bottom: 1em;width: 100%;}.curlycontainer .innerdiv{background: transparent url(brcorner1.gif) bottom right no-repeat;position: relative;left: 2px;top: 2px;padding: 1px 4px 15px 5px;}

Then go a head and save your CSS File and now for your HTML file, Open it up and in your HTML code look for <div id="maincol" > then paste the following underneath it:

 

<div class="content1-pagetitle">Welcome</div>		  <div class="curlycontainer"><div class="innerdiv">

Then We need to close it up and so after your Lorem ipsum paragraph add in two </div> and you are set. Then copy the content info like so:

 

		  <div class="content1-pagetitle">Welcome</div>		  <div class="curlycontainer"><div class="innerdiv">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</div></div>

After that paste it under the the two </div>'s. With this we get to see what changes, if any will happen and also see how far we want our content to go.

 

Of course this is a simple content box nothing more, Of course I be showing different styles later on to show you how dynamic a content area can get.

 

Next Step Vertical Nav Menu.