Webdevtuts » Coding

Create a 3 column fluid layout using HTML/CSS

Marcell — Thu, 20 May 2010 15:06:28 +0000

Hey there fellow designers and coders. Here on Webdevtuts I have been posting a lot of Photoshop tutorials and that is great for designers but what about the people who would like to learn code. Since I have not written a tutorial on code I decided to open up Notepad++ and create something useful for you all. Today I will be teaching you how to create a Fluid 3 column layout using HTML & CSS.

DEMO

The HTML

When starting website I always start with the basic HTML tags such as the Head, Title, and Body tags. Then I’ve added some divs and gave them all a custom name. I give them all a custom name so I can later define them in the stylesheet.

Masthead: – Section will contain and hold all logo, and header information.
Container – Container will contain and hold all content and columns

Copy and paste the layout below into notepad or dreamweaver(whatever program you use for coding) and save it as index.html.






Title Goes Here

More divs

For the Masthead section we will insert two divs. The first div we will enter is logo. The logo div will contain our logo. Then we will enter another div right below it and name it header. The header div will be for our header text and slogan.

Copy and paste the code below inside of the Masthead div.

Now that we have our header section taken care of we will now insert our container divs. Create 3 divs, left_col, right_col, and page_content.

left_col: – This will contain/hold all left column text and information.
right_col: – This will contain/hold all right column text and information.
page_content: – This will contain/hold all main column text and information.

Our final div will be out footer div. We do not want to place the footer inside of our container tag because we would like for it to span across out entire screen. Also I always place it outside of the container so it can stay at the bottom of the page. Create a new div and call it footer.

copy in paste code below after the end of the container div.

Before we begin styling our page we will need to add some text. Google search lorem ispum and you find loads of gibberish text that you can use for this tutorial. Here is what the html looks like with the text.






3 Column Layout | Webdevtuts







	
	Logo
	


	
	This is Your Header
	This is your header
	




	
	Left Column
	
	There are many variations of passages of Lorem Ipsum available, but the majority have
	suffered alteration in some form, by injected humour, or randomised words which don't
	look even slightly believable. If you are going to use a passage of Lorem Ipsum, you
	need to be sure there isn't anything embarrassing hidden in the middle of text. All the
	Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary,
	making this the first true generator on the Internet. It uses a dictionary of over 200
	Latin words, combined with a handful of model sentence structures, to generate Lorem
	Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from
	repetition, injected humour, or non-characteristic words etc.
	
	


	
	Right Column
	
	There are many variations of passages of Lorem Ipsum available, but the majority have
	suffered alteration in some form, by injected humour, or randomised words which don't
	look even slightly believable. If you are going to use a passage of Lorem Ipsum, you
	need to be sure there isn't anything embarrassing hidden in the middle of text. All the
	Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary,
	making this the first true generator on the Internet. It uses a dictionary of over 200
	Latin words, combined with a handful of model sentence structures, to generate Lorem
	Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from
	repetition, injected humour, or non-characteristic words etc.
	
	


	
	Main Column
	
	Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
	classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
	professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
	consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature,
	discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
	et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
	theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor
	sit amet..", comes from a line in section 1.10.32.
	

	
	Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
	classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
	professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
	consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature,
	discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
	et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
	theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor
	sit amet..", comes from a line in section 1.10.32.
	

	
	Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
	classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
	professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
	consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature,
	discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
	et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
	theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor
	sit amet..", comes from a line in section 1.10.32.
	
	




© 2010 to Webdevtuts. All rights reserved.

The Css

Ok now that we have the html taken care of its time to do the dirty work. It is now time to style our 3 column web layout. Before we begin styling have to go over something really fast. In a normal website layout many people use fixed layouts but for this tutorial I am using a fluid layout.

Fixed: – Layout is the same width and all browsers. Majority of websites use this method
Fluid: – Layout re-sizes to users screen. Not many people use this method because it is hard styling for it but in the long
run it’s well worth it

Copy and Paste the code below into your stylesheet. I will explain each one below.


body {
	margin: 0;
	padding: 0;
}

#masthead {
	min-width: 600px;
	background:teal;
}

#logo {
	float: left;
	width: 200px;
	background:orange;
}

#header {
	margin-left:200px;
	background:olive;
}

body – Body class define the entire page seen on a screen. It has a margin, and padding of zero so all presets and others styles can also be set at 0.
masthead – The masthead has a min-width of 600px which means it will never get smaller then 600px. Also it has no padding, borders, or margins.
logo – Logo is floated to the left side of the page and has a width of 200px
Header – Since we’re using a fluid layout we will not give the header a fixed width because we want it to re-size according to the users screen size. So we’ve added a margin to the left of 200px which gives us space from the left side of the page.

Now we will style our container and everything inside of it. Copy the css below and add it to your stylesheet.



#container {
	clear: both;
	min-width: 600px;
}

#left_col {
	float: left;
	width: 200px;
	background:grey;
}

#right_col {
	float: right;
	width: 200px;
	background:grey;
}

#page_content {
	margin-left: 200px;
	margin-right: 200px;
	background:red;
}

container – Container id defines the container which holds all the content and both sidebars. I has a min-width of 600px which means it will not get any smaller than 600px. It also clears all floats to the left and right. Does not hold footer
Left_col – The left column is floated to the left side of the page and has a width of 200px
right_col – The right column is floated to the right side of the page and has a width of 200px
page_content – Since we’re using a fluid layout we will not give the page content a fixed width because we want it to re-size according to the users screen size. So we’ve added a margin to the left and right of 200px which gives us space from the left and right side of the page.

The Footer

The footer is the last part to are 3 column layout. Copy the code below into your stylesheet and I will explain it below.


#footer {
	clear: both;
	background:teal;
}

footer – The footer is at the bottom of the page and has no width nor height applied to it because it usually is just a line of text. It has a style of clear both which mean to clear both the left and right and then pushes the footer down to the bottom of the page.

There you go. You should now have a 3 column layout that adjusts to all screen sizes. I hope this tutorial has helped you understand how to create a fluid 3 column layout. Thanks for following this tutorial.

How to make webpage scroll to top of page using jquery

Marcell — Tue, 13 Oct 2009 03:30:34 +0000

I remember me always trying to figure out how to make a page scroll to certain section of a website. I mean it was like magic when I first came across it. I was stun! I later tried to find tutorials on how to do it and let me tell you I had no luck. In this tutorial I will teach you how to add a nice anchor link scroll effect to your website using jquery/ HTML.

How does it work

Whenever you click on a certain link, the page will scroll to that specific link. For example if were to have a long portfolio page and it took forever to reach the bottom I might want to add a link at the bottom of my website that says Back to top and when visitors click on that link the page would scroll to the top.

Script

Add code below to head section or to a separate javascript file. Tells the document to scroll


$(document).ready(function(){
	$(".scroll").click(function(event){
		//prevent the default action for the click event
		event.preventDefault();

		//get the full url - like mysitecom/index.htm#home
		var full_url = this.href;

		//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
		var parts = full_url.split("#");
		var trgt = parts[1];

		//get the top offset of the target anchor
		var target_offset = $("#"+trgt).offset();
		var target_top = target_offset.top;

		//goto that anchor by setting the body scroll top to anchor top
		$('html, body').animate({scrollTop:target_top}, 500);
	});
});

HTML

Add the code below after your head section. I did not include the entire html but you can download it or view the demo.




Thanks for coming to the top



Thanks for coming to the middle



Thanks for coming to the bottom


Go Top

Check out the Demo
Download

Create a simple portfolio for your company

Marcell — Sat, 13 Jun 2009 04:29:02 +0000

Today we will be creating a simple business/personal portfolio like the one below.

Final Results

Open Photoshop then File>New> and create a new document 800×600 pixels.

Note: Don’t forget to save work

First we will create a new background #000 then select type tool and create your website title ex.webdevtuts

Now we want to add a navigation bar to our design. Select the rounded rectangle tool and create a rounded rectangle across the top (#008dc8).

Right click on the layer with your nav bg and select Gradient Overlay >

set the foreground color #008dc8 and background #004f70. Now lets add a stroke to our navigation background. Select>stroke

Next we will add some text to our navigation. Select the type tool and create the following: Home, About, Services, Portfolio, and Contact. Font: 14pt, Arial

Note: All text is within 1 text box (after every word hit the spacebar 4x)
Example(This is what your layout should like so far)

Ok now lets add a featured image gallery. Select the rectangle marquee tool and create a box #fff width 329x194pixels.

Now create another rectangle within the featured image gallery.

All right lets add some buttons to our feature gallery. Set the foreground color #fff and background #eaeaea. Select the ellipse tool and create a circle outside of the featured gallery.

Then right click on the circle layer>Blending Options>Gradient Overlay> then select the silver/white gradient

Now select the custom shape tool and click on one of the arrows.

Now drag your arrow choice over the featured gallery button.

Ok so lets create a new group and name it feat-button.

Add all button properties to folder.

Now duplicate the folder. Right click on folder and select duplicate Group.

Now go to Edit>Transform>Flip Horizontal

Now drag button to other side of featured gallery.

Ok lets add some Heading’s and paragraph’s to our portfolio. Create a heading font: 30pt, bold, #fefb00. Now for our paragraph we will add some dummy text. Google search lorem ispum. And add a paragraph under the heading.

Ok so now that the hard stuff is completed we will add 3 subheadings (Who are we, Our services, Why choose us) and 3 Paragraphs.

To complete our portfolio we will add 3 read more buttons and a simple footer.
Select the rounded rectangle tool, foreground #cec900 background# cdac00. Then create a small rounded rectangle. Next right click on the small rounded rectangle layer>Blending Options>Gradient overlay

Now select the type tool and add the following text “read more”(create a new group and add button and read more inside folder). Duplicate group.

For the final step we will add a simple footer. Select the rectangle marquee tool #008dc7 and create a rectangle with the same width as the navigation. The last step of this tutorial is to add copyright information

Here are the final results