This BEGINNERS tutorial will show you how to use any type of BLEND as a base for your sites' layout. First, find a blend that you would like to use. I will be using this blend that I got from my visitor section ;). Think about what colors you would like to use and where you would like to position the blend, content, and possibly your sidebar. We will be coding this blend with a sidebar, btw.
Create two files: index.html and style.css. In your index file, place the following coding there:
Now you have to edit a few things. Edit everything that's in CAPS. The title, the urls, the background color, etc... For this blend, I chose #EBF0D7 as the background color. If you don't know the html coding for a specific color, click here. Find the 'perfect' color that way.
Next, you must edit the positioning, width, and height of things... Wherever you see "#px", replace it with a number, but keep the px (i.e.: 100px, 210px). For the positioning of the blend, I chose 20px for the attribute 'top', and 100px for the attribute 'left'. Top is how far away you want it from the top, and left is how far from the left you want it. The higher the number, the further it will be. So here is how that specific coding now looks:
Now, edit the position/size of your blog. I calculated how far from the top my content should be by ADDING the height of the blend, with the height of how far the blend is already from the top. In this case, it would be 20px+300px which is 320px. (Note: You find out the height of an image by right clicking on the image and hitting 'properties'). I do not want my blog DIRECTLY under the blend, so I add 15px, to give it a lil' space. So now, I will make the 'top' attribute for my content, 335px. I chose "100px" as how far to the left I want my blog because I want it to be aligned with my blend. I really didn't know what number to place for width, so I started at 400px. Eventually, I settled with 440px 'cause it seems like a good size. This is how the coding looks now:
Now, edit the position of your sidebar. The 'top' attribute will be the same as the blog: 335px. I calculated how far from the left it should be by ADDING how far to the left my blog is, plus the WIDTH of my blog: 100px+440px. This gives me 540px. I add an extra 20px, so my blog and sidebar wouldn't be so close together so now 'left' attribute is 560px. For the width, choose any number you like. I chose 185px. Remember, you can always change the number, you DON'T have to use the ones I do... This is how the coding looks now:
Whew... Still not done! SAVE THE FILE!! Now, go your style.css file and copy and paste the coding from here. If you're following along with the blend I am using, you may keep the css the same. If you're using another blend, edit the colors, sizes, font family, height, etc. However, do not delete anything from that file unless you know wtf you're doing. Now, save that file.
Alas, you've coded a layout. Here's the ending result of mines: click here. Now go to your website and view what you've done! If you've followed along with me, using the Jessica Simpson blend, yours should look the same unless you've edited some coding incorrectly, or I might've left a step out by accident. Please contact me if your end result is not similar to mines.
Create two files: index.html and style.css. In your index file, place the following coding there:
Now you have to edit a few things. Edit everything that's in CAPS. The title, the urls, the background color, etc... For this blend, I chose #EBF0D7 as the background color. If you don't know the html coding for a specific color, click here. Find the 'perfect' color that way.
Next, you must edit the positioning, width, and height of things... Wherever you see "#px", replace it with a number, but keep the px (i.e.: 100px, 210px). For the positioning of the blend, I chose 20px for the attribute 'top', and 100px for the attribute 'left'. Top is how far away you want it from the top, and left is how far from the left you want it. The higher the number, the further it will be. So here is how that specific coding now looks:
Now, edit the position/size of your blog. I calculated how far from the top my content should be by ADDING the height of the blend, with the height of how far the blend is already from the top. In this case, it would be 20px+300px which is 320px. (Note: You find out the height of an image by right clicking on the image and hitting 'properties'). I do not want my blog DIRECTLY under the blend, so I add 15px, to give it a lil' space. So now, I will make the 'top' attribute for my content, 335px. I chose "100px" as how far to the left I want my blog because I want it to be aligned with my blend. I really didn't know what number to place for width, so I started at 400px. Eventually, I settled with 440px 'cause it seems like a good size. This is how the coding looks now:
<div style="position:absolute;background-color:transparent; left:100px; top:335px; width: 440px;border:none; overflow: auto; overflow-x: hidden;">
<h2>PLACE TITLE, DATE, OR SOMETHING HERE</h2> <h1>BLAH BLAH BLOO</h1> <div class="content">
<h2>PLACE TITLE, DATE, OR SOMETHING HERE</h2> <h1>BLAH BLAH BLOO</h1> <div class="content">
Now, edit the position of your sidebar. The 'top' attribute will be the same as the blog: 335px. I calculated how far from the left it should be by ADDING how far to the left my blog is, plus the WIDTH of my blog: 100px+440px. This gives me 540px. I add an extra 20px, so my blog and sidebar wouldn't be so close together so now 'left' attribute is 560px. For the width, choose any number you like. I chose 185px. Remember, you can always change the number, you DON'T have to use the ones I do... This is how the coding looks now:
<div style="position:absolute;background-color:transparent; left: 560px; top:335px; width:185px;border:none; overflow: auto; overflow-x: hidden;">
<div class="side"> <h2>HEADER</h2>
<div class="side"> <h2>HEADER</h2>
Whew... Still not done! SAVE THE FILE!! Now, go your style.css file and copy and paste the coding from here. If you're following along with the blend I am using, you may keep the css the same. If you're using another blend, edit the colors, sizes, font family, height, etc. However, do not delete anything from that file unless you know wtf you're doing. Now, save that file.
Alas, you've coded a layout. Here's the ending result of mines: click here. Now go to your website and view what you've done! If you've followed along with me, using the Jessica Simpson blend, yours should look the same unless you've edited some coding incorrectly, or I might've left a step out by accident. Please contact me if your end result is not similar to mines.
<div style="position: absolute; top: 20px; left: 100px;">
<img src="http://i85.photobucket.com/albums/k58/peculiarish/visitors/jessica.png" border=0>
</div>