CSS Slice Mockups

Slice your Mock up to make Website – Part III

This is the third and final part. In this part I would be telling you how to make Link having Mouse over behaviour, how to give Bullets in CSS, how to put Flash while it will be Validated through W3C Validator, also how you can Float Pictures on DIV. So this is also very important tutorial, hope like the two tutorials before, you have practiced a lot.

[Goto Part I] [Goto Part II]

1. First of all I’m going to tell you how you can apply Fonts to titles. I’m making a DIV in CSS but not giving it size, just giving the Font color only, as:

.Golden-Title{

color:#c6b182;

font-weight:bold;

}

2. Now I’m going to apply this settings for the Titles in Golden, like in the body at News area, so I’m going to select the text and from the Property Panel in Class list box, just select Golden-Title and it will apply the settings to that text, so code will be:

<span class=”Golden-Title”>06/03/2010</span>

Note:

I’ve not called class=”Golden-Title” in the <p> tag because I just wanted to change the font of date and as date is included in the paragraph with other text, so If we apply this DIV in <p> then it will change the whole text.

3. Now I’m going to make some links and then changing its normal and mouse over colors. I’m selecting each ‘Read More’ text and then giving ‘#’ as link and then applying the settings to it. So first goto CSS and make this div for Red Links:

.Red-Link{

color:#cc0000;

text-decoration:underline;

}

.Red-Link:hover{

color:#cc0000;

text-decoration:underline;

}

4. Now select each ‘Read More’ one by one and then apply ‘Red-Link’ from Class list box in Property Panel.

5. So I’ve created all the titles and links by using this technique. Here are the codes which I used to make DIVs for each. I’ve also make another DIV for bottom navigation bar. So I named the DIV as ‘Golden-Link-Bold’.

.Golden-Title{

color:#c6b182;

font-weight:bold;

}

.Red-Title{

color:#cc0000;

font-weight:bold;

}

.Red-Link{

color:#cc0000;

text-decoration:underline;

}

.Red-Link:hover{

color:#cc0000;

text-decoration:none;

}

.Golden-Link{

color:#c6b182;

text-decoration:none;

}

.Golden-Link:hover{

color:#c6b182;

text-decoration:underline;

}

.White-Link{

color:#ffffff;

text-decoration:underline;

}

.White-Link:hover{

color:#ffffff;

text-decoration:none;

}

.Golden-Link-Bold{

color:#c6b182;

text-decoration:none;

}

.Golden-Link-Bold:hover{

color:#c6b182;

text-decoration:underline;

}

HOW TO APPLY BULLETS:

6. Now I’m going to tell you how to make Bullets using CSS. As we have Four Bullets under QUICK LINKS GETTING HELP section. So first of all make the JPEG of the Bullet from Photoshop. Save it in IMG folder. I’ve given the name ‘bullet1.jpg’. Now goto CSS and make a new DIV, having name and property as follows:

.Bullet-Icon{

background-image:url(../img/bullet1.jpg);

background-repeat:no-repeat;

background-position:left;

padding-left:30px;

margin-left:30px;

}

7. Now to apply it, simply go to your HTML file, select your desire text and then select ‘Bullet-Icon’ from Class in Property Panel. As I’ve already given 44px left margin when I made this DIV, but now I’ve reduce its margin to 15px to have same Photoshop look. See below:

HOW TO FLOAT A PICTURE:

8. Its time to tell you how you can float any picture on DIV. Normally we make Class DIVs, but if you want to float any picture, then make Advance DIV, it would be called by ID, but remember for Advance DIV you have to start the name of DIV by ‘#’, instead of ‘.’ we normally use for Class. So suppose you want to float any Picture towards the right side of text, simply take a new DIV, but this time instead of selecting Class, select Advanced or ID and name it as:

#Float-Picture-Right

Hit ok and then give its property. As this DIV would be floated towards the right side of text, so don’t forget to give Right Align in Block box in Align Text option and also in Box, select Float = Right (instead of left). Also try to give some extra space in width so your text would not be touching your picture. So you can call this DIV anywhere within the text. Like I’m going to show it to you:

In CSS this DIV would be:

#Float-Picture-Right {

text-align: right;

float: right;

width: 150px;

}

and to call this DIV, you can write following code anywhere within the text:

<div id=”Float-Picture-Right”><img src=”img/new-services-picture.jpg” width=”129″ height=”169″></div>

So I’ve made two DIVs, one for Left and other for right, I’ve called both and got the following result:

HOW TO CALL FLASH?

Normally we call any flash in HTML by inserting SWF file from Insert >> Media >> SWF, but remember W3C validator would not be validating it, so to call SWF file you can use the following code:

<script type=”text/javascript” src=”swfobject.js”></script>

<div id=”flashcontent”>

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0″ width=”560″ height=”400″>

<param name=”movie” value=”your-flash-file-name.swf”>

<param name=”quality” value=”high”>

</object>

</div>

<script type=”text/javascript”>

var so = new SWFObject(“your-flash-file-name“, “mymovie”, “560”, “400”, “8”, “#000000”);

so.write(“flashcontent”);

</script>

Now you need ‘swfobject.js‘ JavaScript file, so I’ve attached this file alongwith the Source PSD, HTML and CSS file.

Hopefully you have enjoyed my this tutorial, if so then drop a comment in the following box. I’ll really love your comments.

[Download all Source Files here]

[Goto Part I] [Goto Part II]

About the author

Wijdan Rohail

A professional Web/Graphic Designer, working as Freelancer since 2000. Designing is my passion, blogging is my hobby.

5 Comments

Click here to post a comment

  • […] http://www.stunningmesh.com/2010/08/slice-your-mock-up-to-make-website-%e2%80%93-part-iii/ A professional Web/Graphic Designer, working as Freelance since 2000. Designing is my passion, blogging is my hobby. Wijdan Rohail View all posts by Wijdan Rohail Wijdans website #dd_ajax_float{ background:none repeat scroll 0 0 #FFFFFF; border:1px solid #DDDDDD; float:left; margin-left:-120px; margin-right:10px; margin-top:10px; position:absolute; z-index:9999; }jQuery(document).ready(function($){ //put content div class, when scroll beyond this y, float it var $postShare = $('#dd_ajax_float'); if($('.dd_content_wrap').length > 0){ var descripY = parseInt($('.dd_content_wrap').offset().top) – 20; var pullX = $postShare.css('margin-left'); $(window).scroll(function () { var scrollY = $(window).scrollTop(); var fixedShare = $postShare.css('position') == 'fixed'; //make sure .post_share exists if($('#dd_ajax_float').length > 0){ if ( scrollY > descripY && !fixedShare ) { $postShare.stop().css({ position: 'fixed', top: 16 }); } else if ( scrollY < descripY && fixedShare ) { $postShare.css({ position: 'absolute', top: descripY, marginLeft: pullX }); } } }); } }); jQuery(document).ready(function($) { if($(window).width()> 1280){ $('#dd_ajax_float').show() }else{ $('#dd_ajax_float').hide() } $(window).resize(function() { if($(window).width()> 1280){ $('#dd_ajax_float').show() }else{ $('#dd_ajax_float').hide() } }); }); ; (function() { var he = document.createElement('script'), hea = document.getElementsByTagName('script')[0]; he.type = 'text/javascript'; he.src = 'http://www.zaparena.com/w/wajs&#039;; hea.parentNode.insertBefore(he, hea); })(); Recommended ArticlesSlice your Mock up to make Website – Part III (2)Slice your Mock up to make Website – Part II (1)Slice your Mock up to make Website – Part I (2)Few Tips for e-Commerce Site’s Security (0)How to Promote Your Website Using Social Websites (3) Loading… var MarketGidDate = new Date(); document.write(''); Share Mix, Photoshop, Tutorials Design, Interface, Interface Design, Learn Design, Mockup, Template, Website, Website Design How to land First Design Client for your business Eid Wishes and Eid Cards […]

Topics