In this tutorial I’ll make some minor design fixes to my page. First I’ll add some border to my posts then some icons to my sidebar. Watch the video to see how I have plan my little design fixes and drawing a small arrow pixel icon.

So after i have made this little plans I show in the video let me tell you what I have changed in my design.

First I added 1 px border to the posts in my CSS:

.post{padding: 5px 5px 5px 5px;min-height:100px;

width:600px;

float:left;

background:#eeeeee;

margin-top:7px;

border:1px dashed #ced8d9; – 1px border all around my post is here

border-bottom:3px solid #83b639;

}

Next I added a 1px dotted border bottom for all my lists in the sidebar and the arrow image from CSS again:

.sidebar ul ul li{padding: 0; line-height: 24px;border-bottom: 1px dotted #888888;  – dotted border

text-decoration:none;

background-image:url(images/sidebar/arrow.jpg);  – and the arrow image

background-repeat:no-repeat; – no repeat is important here

padding-left:10px;

}

After this is done, I added the folder icon also in my CSS:

.sidebar ul li h2{ height:25px;font-family: Georgia, Sans-serif;

font-size: 15px;

padding-left:25px;

text-decoration:none;

background-image:url(images/sidebar/folder.jpg);  – the folder icon image is here

background-repeat:no-repeat;

}

Well that’s all, I hope you’ve liked this tutorial and you learned some useful thing here.

screentut6


I’ll wait for your comments If any. Stay with us folks next time I am planing to design 404 web page.

<blockquote>

<div style=”border: 1px dashed #5f5f5f; padding: 10px; background-color: #f2f2f2; margin: 5px;”><span style=”color: #333333;”>

Text here

</span><span style=”color: #808080;”><span style=”font-style: normal; font-family: Georgia;”><em> </em></span></span></div>

</blockquote>

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)
Graphics designer and web developer from Bulgaria. Working as a freelancer from 2 years I have big experience in graphics design. In my spare time I make tutorials in my web site for tutorials: Tutorials-place.com This is one of my hobbies. I also love Photography, sports and especially martial arts and free runing.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge