PHP,CSS,JQUERY,HTML tips for beginners: August 2010

HTML

Tuesday, August 24, 2010 2:57 AM Posted by Rakhi Moni MItro , 0 Comments

Css:
@charset "utf-8";
/* CSS Document */

.main_container
{
width:835px;
margin: 0 auto;

/* Do rounding (native in Firefox and Safari) */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border:1px solid #0099FF;
padding:10px;
height:auto;

}
.sitemap_left_container
{
width:250px;
float:left;
padding:0px;
margin-left:10px;
height:auto;
}
.sitemap_content
{
width:250px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-border-radius:5px;
border: 1px solid #999999;
margin: 0;
padding:0;
background: url(images/top_bg.jpg) repeat-x top;
background-color:#ffffff;
}
.sitemap_content h1
{
font-size:15px;
font-family:"Trebuchet MS";
font-weight:bold;
color: #FFFFFF;
line-height:20px;
text-align:center;
margin-top:7px;

}
.sitemap_content ul
{
width:auto;
padding:5px;
margin-top:8px;
margin-left:8px;
}
.sitemap_content li
{
width:auto;
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
margin:0;
padding:0;
font-weight:normal;
margin-top:10px;

}
.sitemap_content li a
{
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#000000;
text-decoration:none;
}
.sitemap_content li a:hover
{
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color: #0099FF;
text-decoration:none;
}
.sitemap_content2 a
{
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-decoration:none;
font-weight:bold;
}
.sitemap_content2 a:hover
{
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color: #0099FF;
text-decoration:none;
font-weight:bold;
}
.span_text
{
padding-left:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;

}
.span_text_2
{padding-top:3px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin-left:15px;

}
.span_text_3
{
color: #666666;
margin-left:60px;

}
.span_text_more
{
padding-left:15px;
padding-top:3px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;

}
.sitemap_middle_container
{
width:250px;
float:left;
padding:0px;
margin-left:10px;
height:auto;

}
.sitemap_right_container
{
width:250px;
float:left;
padding:0px;
margin-left:10px;
height:auto;

}
.break
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-decoration:none;
font-weight:bold;

}

.arrow
{
padding-left:10px;
}
HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="sitemap.css" rel="stylesheet" type="text/css" />

<script src="js/curvycorners.src.js" type="text/javascript">
</script>

</head>

<body>
 <div class="main_container">
   <div class="sitemap_left_container">
          <div class="sitemap_content">
                 <h1>Common Sections</h1>
                     <ul>
                     
                        <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php"><strong>Home</strong></a></span></li>
                        <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-about-us.php"><Strong>About Us</Strong></a></span></li>
                        <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-sromobazar-solution.php"><strong>Sromobazar Solution</strong></a></span></li>
                        <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-contact-us.php"><strong>Contact Us</strong></a></span></li>
                        <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-overseas-education.php"><strong>Overseas Education</strong></a></span></li>
                              <div class="span_text_2">
                                        <p style="margin-left:15px;"><strong>Countrywise Universities List:</strong></p>
                                        <ul>
                                         <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=continent-university&continent_id=1"><span class="break">Asia</span></a>
                                            <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a  href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=2">India</a></li>
                                        </ul>
                                </div>
                                <div class="span_text_2">
                                        <ul><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=28"><span class="break">Japan</span></a>
                                          <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-detail&ID=w2v2z2&ownerId=x2">University Of Tokyo</a>
</li>
                                          <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-detail&ID=w2v2z2&ownerId=x2"> University Of Tokyo</a></li>
                                          <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-detail&ID=w2v2z2&ownerId=x2">University Of Tokyo</a></li>
                                        </ul>
                                            
                       </div>
        <div class="span_text_2">
                                        <ul>
                                            <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=continent-university&continent_id=5"><span class="break">Africa</span></a>
                                            <li class="span_text_3" ><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=140">South Africa</a></li>
                                        </ul>
                                </div>
                                 <div class="span_text_2">
                                        <ul>
                                            <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=continent-university&continent_id=2"><span class="break">North America</span></a>
                                            <li class="span_text_3" > <img src="images/arrow.jpg" class="arrow" /><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=104"> Unitied States</a></li>
                                        </ul>
                                </div>
                                <div class="span_text_2">
                                        <ul>
                                            <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=96"><span class="break">Canada</span></a>
                                            <li class="span_text_3" ><img src="images/arrow.jpg" class="arrow" /><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-detail&ID=w2v2v2&ownerId=x2"> Mcgrill University</a></li>
                                        </ul>
                                </div>
                                
                                <div class="span_text_2">
                                        <ul>
                                            <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=continent-university&continent_id=3"><span class="break">South America</span></a>
                                            <li class="span_text_3" > <img src="images/arrow.jpg" class="arrow" /><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=113"> Argentina</a></li>
                                        </ul>
                                </div>
                                <div class="span_text_2">
                                        <ul>
                                            <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=continent-university&continent_id=4"><span class="break">Europe</span></a>
                                            <li class="span_text_3" ><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=90"> United Kingdom</a></li>
                                        </ul>
                                </div>
                                <div class="span_text_2">
                                        <ul>
                                       <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=continent-university&continent_id=6"><span class="break">Australia</span></a>
                                            <li class="span_text_3" ><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=124">Australia</a></li>
                                            <li class="span_text_3" ><img src="images/arrow.jpg" class="arrow" /><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=126">Newzealand</a></li>
                                        </ul>
                                </div>
                     </ul>
                </div>
        </div>
        <div class="sitemap_middle_container">
          <div class="sitemap_content">
                <h1>Account Login Section</h1>
                 <ul>
                             <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-user-profile-creator.php"><strong>Create Account</strong></a></span></li>
                              <div>
                                        <ul>
                                            <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=user-profile-creator&userTypeID=41">Employeer</a></li>
                                            <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=user-profile-creator&userTypeID=11">Job seeker</a></li>
                                            <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=user-profile-creator&userTypeID=21">Student</a></li>
                                           <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=user-profile-creator&userTypeID=51">University Admin</a></li>
                                            <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=user-profile-creator&userTypeID=13">Corporate Group</a></li>
                                            <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=user-profile-creator&userTypeID=61">University Agency</a></li>

                                        </ul>
                                </div>
                                
                              <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-user-login.php"><strong>Sign In</strong></a></span></li>
                              <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-advance-search-form.php"><strong>Advance Search</strong></a></span></li>
                              <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=job-listing&recent=yes"><strong>Job Listing</strong></a></span></li>
                              <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="#"><strong>Category Wise Job list</strong></a></span></li>
                                <div class="span_text_2">
                                        <ul class="span_text_3">
                                            <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=job-listing&ID=42&isBidable=1">Accounts/Finance</a></li>
                                            <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=job-listing&ID=57&isBidable=1">IT/Telecommunication</a></li>
                                        </ul>
                                </div>
                              <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php?skin=default&area=employeer&action=employer-listing"><strong>Employee Listing</strong></a></span></li>
                              <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php?skin=default&area=jobseeker&action=jobseeker-listing"><strong>Job seeker Listing</strong></a></span></li>  
                     </ul> 
                     <br /> 
                   
               </div>
                <br /> 
                <br />  
                
                <div class="sitemap_content">
                 <h1>Other Links</h1>
                    <ul>
                            <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-student-listing.php"><strong>List of Student</strong></a></span></li>
                            <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-university-listing.php"><strong>Universities</strong></a></span></li>
                            <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-embassy-listing.php"><strong>List of Embassy</strong></a></span></li>
                            <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-widget-listing.php"><strong>Get Widges</strong></a></span></li>
                             <br /> 
                             <br /> 
                             <br />  
                             <br />       
                    </ul>
                    
                </div>
                
        </div>
         <div class="sitemap_right_container">
           <div class="sitemap_content">
                <h1>Help</h1>
                 <ul>
                     <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-help.php"><strong>Help and Support</strong></a></span></li>
                     <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php?skin=default&area=help&action=faq"><strong>FAQ</strong></a></span></li>
                     <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php?skin=default&area=help&action=payment-process"><strong>Payment Process</strong></a></span></li>
                     <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php?skin=default&area=help&action=help-searching-for-jobs"><strong>Searching For jobs</strong></a></span></li>
                     <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php?skin=default&area=help&action=registering"><strong>Registering</strong></a></span></li> 
                     <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php?skin=default&area=help&action=for-corporate-group"><strong>For Corporate Group</strong></a></span></li>
                     <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php?skin=default&area=help&action=keeping-your-details-uptodate"><strong>Keeping Your details Uptodate</strong></a></span></li>  
                      <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php?skin=default&area=help&action=technical-and-other-help-issues"><strong>Technical And Other Help Issues</strong></a></span></li>      
                  </ul> 
                  <br /> 
                  <br /> 
                  <br /> 
                  <br /> 
                </div>
                <br /> 
                 
                 
                <div class="sitemap_content">
                        <h1>Sister Sites</h1>
                         <ul>
                             <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.askbangladesh.com/"><strong>Ask Banglades.com Limited</strong></a></span></li>
                             <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.itbidding.com/"><strong>itbidding.com</strong></a></span></li>
                             <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.loginbd.com/"><strong>loginbd.com</strong></a></span></li>
                             <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.itreel.com/"><strong>itReel.com</strong></a></span></li> 
                             <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.askbazar.com/"><strong>Askbazar.com</strong></a></span></li>
                             <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.dressbazar.com/"><strong>Dressbazar.com</strong></a></span></li> 
                             <br />
                             <br />
                             <br />
                             <br /> 
                             <br />
                             <br />
                             <br /> 
                             <br />  
                             <br /> 
                            
                        </ul>  
             </div>
        </div>
 <div style="clear:both;"></div>       
 </div>

</body>
</html>

psd

Monday, August 23, 2010 9:57 AM Posted by Rakhi Moni MItro , 0 Comments

arrow:

hover effect using css & html

Wednesday, August 18, 2010 1:00 AM Posted by Rakhi Moni MItro , 0 Comments


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.btnContinue {
 width: 120px;
 height: 64px;
 line-height:64px;
 text-align:center;
 font-family:Arial, Helvetica, sans-serif;
 font-size:13px;
 color:#FFFFFF;
 display: inline-block;
 text-decoration: none;
 background-repeat:no-repeat;
 background-image: url(images/pp.jpg);  
 margin:0;
 padding:0;
 text-decoration:none;
}

.btnContinue:hover {
background-position:bottom right;
font-family:Arial, Helvetica, sans-serif;
 font-size:13px;
 color:#000000;
}
.btnContinue1 {
 width: 145px;
 height: 64px;
 line-height:64px;
 text-align:center;
 display: inline-block;
 font-size: 10px;
 text-decoration: none;
 background-repeat:no-repeat;
 background-image: url(images/pp1.jpg);  
 margin:0;
 padding:0;
 text-decoration:underline;
}

.btnContinue1:hover {
background-position:bottom right;
}

</style>
</head>
<body style="width:1011px; border:1px solid #000000; height:67px; padding:0px; margin:0px;">
            <div style="margin-left:0px; float:left;">
                          <a class="btnContinue" href="http://learnwebdesignonline.com">Home</a>
            </div>

            <div style="margin-left:0px; float:left;">
            <a class="btnContinue" href="http://learnwebdesignonline.com"> </a>
            </div>
            <div style="margin-left:0px; float:left;">
            <a class="btnContinue" href="http://learnwebdesignonline.com"> </a>
            </div>
            <div style="margin-left:0px; float:left;">
            <a class="btnContinue" href="http://learnwebdesignonline.com"> </a>
            </div>

            <div style="margin-left:0px; float:left;">
            <a class="btnContinue" href="http://learnwebdesignonline.com"> </a>
            </div>
            <div style="margin-left:0px; float:left;">
            <a class="btnContinue1" href="http://learnwebdesignonline.com"> </a>
            </div>
              <div style="margin-left:0px; float:left;">
            <a class="btnContinue" href="http://learnwebdesignonline.com"> </a>
            </div>

            <div style="margin-left:0px; float:left;">
            <a class="btnContinue1" href="http://learnwebdesignonline.com"></a>
            </div>
             
            

</body>

</html>

jquery menu

Tuesday, August 17, 2010 2:44 AM Posted by Rakhi Moni MItro , 0 Comments

menu:
http://www.1stwebdesigner.com/resources/36-eye-catching-jquery-navigation-menus/

Rounded corner / Curved corner divs using CSS 3 in all browsers

Thursday, August 12, 2010 10:47 PM Posted by Rakhi Moni MItro , 0 Comments


<a href="http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser">
Rounded corner / Curved corner divs using CSS 3 in all browsers</a>
<a>

Fireworks & Photoshop online tutorial

Monday, August 9, 2010 1:44 AM Posted by Rakhi Moni MItro , 0 Comments

Fireworks & Photoshop online tutorial ::

1.http://www.entheosweb.com/fireworks/transparent_text.asp
2.http://www.vineyardesigns.com/tutorials/photoshop/document.shtml
3.http://www.pxleyes.com/blog/2009/09/20-fireworks-tutorials-for-absolute-beginners/
4.http://www.macronimous.com/resources/creating_image_banners_with_fireworksMX2004.htm
5.http://www.modernmorph.com/tutorials/cat/macromedia-fireworks/file/glossy-text/

html & css (part -2)

Friday, August 6, 2010 3:03 AM Posted by Rakhi Moni MItro , 0 Comments

Css page:

/* CSS Document */

.main_container
{
width:1016px;
margin:0 auto;
border:1px dashed #FF0000;

}
.container
{
width:1016px;
background-image: url(images/bg.jpg);
height:200px;

}
.blue_text
{
font-family:Arial, Helvetica, sans-serif;
font-size:25px;
font-weight:bold;
color:#0099CC;
width:450px;
float:left;
border:1px solid #00FFCC;

}
.blue_text_2
{
font-family:Arial, Helvetica, sans-serif;
font-size:25px;
font-weight:bold;
color:#0099CC;
width:450px;
float:left;
border:1px solid #00FFCC;

text-align:right;

}
.text
{
width:700px;
float:left;

padding:10px;
}
.text2
{
width:155px;
height:157px;
float: left;
border:1px solid #000099;
background-image: url(images/mohila.jpg);
background-repeat:no-repeat;

}

.button_container
{
width:1014px;
border:1px dashed #9999FF;
margin:0 auto;
}

.content
{
width:1016px;
border:1px solid #0033CC;
float:left;
}
.box
{
width:225px;
float:left;
border:1px solid #FF0000;
padding:10px;
}
.icon
{
width:37px;
height:47px;
background-repeat:no-repeat;
background-image: url(images/icon.jpg);
margin-left:50px;
}

.icon_text
{
font:"Courier New", Courier, monospace;
color: #009999;
text-align:center;
}

.button
{
width:195px;
height:48px;
line-height:48px;
background-image: url(images/button.jpg);
background-repeat:no-repeat;
text-align:center;
}
Html page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="main_container">
        <div class="container">
                <div class="blue_text">Rakhi Moni Mitro</div>
                <div class="blue_text_2">Rakhi</div>
                <div class="content">
                            
                            <div class="text">ferlgdrlghtljyg[ljk[ylg ferlgdrlghtljyg[ljk[ylg ferlgdrlghtljyg[ljk[ylg</div>
                            <div class="text2"></div>
                            <div style="clear:both;"></div> 
                </div>
                
           </div>
                
                
                
                
                <div style="clear:both;"></div> 
                </div>
                <div class="button_container">
                            <div class="box">
                                    <div class="icon"></div>
                                     <div class="icon_text">kgdkf hghgjmn mnlmjh</div>
                            </div>
                   <div class="box">
                              <div class="icon"></div>
                                     <div class="icon_text">kgdkf hghgjmn mnlmjh</div>
                            </div>
                            <div class="box">
                                     <div class="icon"></div>
                                     <div class="icon_text">kgdkf hghgjmn mnlmjh</div>
                            </div>
                            <div class="box">
                                     <div class="button">Start Order Now</div>
                            </div>
                    
                <div style="clear:both;"></div> 
                </div>

<div style="clear:both;"></div>          
</div>
</body>
</html>

HTML & CSS practice

Wednesday, August 4, 2010 3:29 AM Posted by Rakhi Moni MItro , 0 Comments




 /* CSS Document */
 
 .content
 {
 width:1014px;
 border:1px solid #0033CC;
 height:250px;
 
 }
 .box
 {
 width:225px;
 height:300px;
 float:left;
 border:1px solid #FF0000;
 padding-top:10px;
 
 
 
 }
 .icon
 {
 width:37px;
 height:47px;
 background-repeat:no-repeat;
 background-image: url(images/icon.jpg);
 }
 
 .button
 {
 width:180px;
 height:50px;
 background-image: url(images/button.jpg);
 background-repeat:no-repeat;
 margin-top:30px;
 }
 .myBox {
 margin: 0 auto;
 border: 0px solid #fff;
 color: #9966CC;
 width: 25%;
 padding: 20px;
 text-align: left;
 background-color: #f00;
 border-top: #FF0000;
 border-bottom:  #FF0000;
 
 border-left: #fff;
 border-right:  #fff;
 float:left;
 margin-left:10px;
 
 /* Do rounding (native in Firefox and Safari) */
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 }
 
 .small_logo
 {
 width:37px;
 height:46px;
 background-repeat:no-repeat;
 background-image: url(images/brwoser.jpg);
 float:left;
 margin-left:5px; 
 }
 
 ul#footerlinks {
 
 float:left;
 
 width:250px
 
 }
 
 #footerlinks li {
 
 color:#666;
 
 display:inline;
 
 list-style-type:none;
 
 font:11px Arial, Helvetica, sans-serif;
 
 }
 
 #footerlinks a {
 
 color:#666;
 
 text-decoration:none;
 
 font:11px Arial, Helvetica, sans-serif;
 
 }
 
 #footerlinks a:link, #navlist a:visited {
 
 color:#666;
 
 text-decoration:none;
 
 font:11px Arial, Helvetica, sans-serif;
 
 }
 
 #footerlinks a:hover {
 
 color:#ff9800;
 
 text-decoration:none;
 
 font:11px Arial, Helvetica, sans-serif;
 
 }

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript" src="js/curvycorners.src.js"></script>

</head>

 <body>
  <div class="content">
     
     <div class="box">
     <dd class="icon"></dd></br></br>
     <dd>Send the design</dd></br>
     <dd>send us your design in any common format</dd>
     </div>
     
     <div class="box">
     <dd class="icon"></dd></br></br>
     <dd>Send the design</dd></br>
     <dd>send us your design in
     any common format</dd>
        </div>
      
     <div class="box">
     <dd class="icon"></dd></br></br>
     <dd>Send the design</dd></br>
     <dd>send us your design in any common format</dd>
     </div> 
      
     <div class="box">
     <dd class="icon"></dd></br></br>
     <dd class="button"><span style="line-height:50px; text-align:center; margin-left:70px;">Home</span></dd>
     </div>
  </div>
  <div class="content">
        <div class="myBox">
      <dd>Welcome to Rakhi</dd>
      <dd><h5>{elcome to Rakhi}</h5></dd>
      <dd class="small_logo"></dd>
      <dd class="small_logo"></dd>
      <dd class="small_logo"></dd>
      <dd class="small_logo"></dd>
      <dd class="small_logo"></dd>
      <dd>Starting form -20$  90$</dd>
      <dd style="text-align:right;">Homepage   Innerpage</dd>
      
           </div>
      
     <div class="myBox">
      <dd>Welcome to Rakhi</dd>
      <dd><h5>{elcome to Rakhi}</h5></dd>
      <dd class="small_logo"></dd>
      <dd class="small_logo"></dd>
      <dd class="small_logo"></dd>
      <dd class="small_logo"></dd>
      <dd class="small_logo"></dd>
      <dd>Starting form -20$  90$</dd>
      <dd style="text-align:right;">Homepage   Innerpage</dd>
      
    </div>
    <div class="myBox">
 
    </div>
 
  </div>
  
     <div id="footerlinks">
       <ul>
         <li><a href="index.html" >Home</a> |</li>
    
         <li><a href="about.html">About</a> |</li>
    
          <li><a href="index.html" >Home</a> |</li>
    
         <li><a href="about.html">About</a> |</li>
    
          <li><a href="index.html" >Home</a> |</li>
    
         <li><a href="about.html">About</a> |</li>
    
        </ul>
        </div>
 
  <div class="content">
       <dd class="icon"></dd>
     <dd style="margin-left:5px; float: inherit;">wetreytyikjl</dd>
  </div> 
</body>
</html>

Making hover effect in css & html

Sunday, August 1, 2010 11:29 PM Posted by Rakhi Moni MItro , 0 Comments

i use two jpg button for this implimentation.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Rollover Trifecta Buttons</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style media="screen" type="text/css">
   /* NAVIGATION BUTTONS */
   .menu {
      height: 44px;
      width: 844px;
   }
   .cssnav {
      position:relative;
      float: left;
      margin: 0; 
      padding: 0;
      font-family: arial, helvetica, sans-serif;
      background: url(images/button.jpg) no-repeat;
      width: 135px;
      height: 49px;
                     overflow:hidden;/* for ie to hide extra height*/
      text-align: center;
      line-height:49px; 
      
   }
   .cssnav a {
     
      color: #000000;
      font-size: 11px;
      width: 135px;
      height: 49px; 
      float: left;
      color: black; 
      text-decoration: none;
      overflow:hidden;/* for ie to hide extra height*/
      text-align: center;
   }
   .cssnav a:hover {
      color: #ffffff;
      text-align: center;
      background-image:url(images/button_hover.jpg);
   }
   

   

   
   /* END OF NAVIGATION */
</style>

<body>

<!--MAIN NAVIGATION START-->
<div class="menu">
<div class="cssnav"><a href="#" title="Search Engine Optimization">Home</a></div>
<div class="cssnav"><a href="#" title="Search Engine Submission">Search Engine Submission</a></div>

<div class="cssnav"><a href="#" title="Website Design">Website Design</a></div>
<div class="cssnav"><a href="#" title="Website Promotion">Website Promotion</a></div>
<div class="cssnav"><a href="#" title="Website Promotion">Website Promotion</a></div>
<div class="cssnav"><a href="#" title="Website Promotion">Website Promotion</a></div>

</div>
<!--MAIN NAVIGATION END-->


</body>
</html>

Subscribe to: Posts (Atom)

SUBSCRIBE!

FOLLW ME!

Tuesday, August 24, 2010

HTML

Css:
@charset "utf-8";
/* CSS Document */

.main_container
{
width:835px;
margin: 0 auto;

/* Do rounding (native in Firefox and Safari) */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border:1px solid #0099FF;
padding:10px;
height:auto;

}
.sitemap_left_container
{
width:250px;
float:left;
padding:0px;
margin-left:10px;
height:auto;
}
.sitemap_content
{
width:250px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-border-radius:5px;
border: 1px solid #999999;
margin: 0;
padding:0;
background: url(images/top_bg.jpg) repeat-x top;
background-color:#ffffff;
}
.sitemap_content h1
{
font-size:15px;
font-family:"Trebuchet MS";
font-weight:bold;
color: #FFFFFF;
line-height:20px;
text-align:center;
margin-top:7px;

}
.sitemap_content ul
{
width:auto;
padding:5px;
margin-top:8px;
margin-left:8px;
}
.sitemap_content li
{
width:auto;
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
margin:0;
padding:0;
font-weight:normal;
margin-top:10px;

}
.sitemap_content li a
{
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#000000;
text-decoration:none;
}
.sitemap_content li a:hover
{
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color: #0099FF;
text-decoration:none;
}
.sitemap_content2 a
{
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-decoration:none;
font-weight:bold;
}
.sitemap_content2 a:hover
{
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color: #0099FF;
text-decoration:none;
font-weight:bold;
}
.span_text
{
padding-left:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;

}
.span_text_2
{padding-top:3px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin-left:15px;

}
.span_text_3
{
color: #666666;
margin-left:60px;

}
.span_text_more
{
padding-left:15px;
padding-top:3px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;

}
.sitemap_middle_container
{
width:250px;
float:left;
padding:0px;
margin-left:10px;
height:auto;

}
.sitemap_right_container
{
width:250px;
float:left;
padding:0px;
margin-left:10px;
height:auto;

}
.break
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-decoration:none;
font-weight:bold;

}

.arrow
{
padding-left:10px;
}
HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="sitemap.css" rel="stylesheet" type="text/css" />

<script src="js/curvycorners.src.js" type="text/javascript">
</script>

</head>

<body>
 <div class="main_container">
   <div class="sitemap_left_container">
          <div class="sitemap_content">
                 <h1>Common Sections</h1>
                     <ul>
                     
                        <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php"><strong>Home</strong></a></span></li>
                        <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-about-us.php"><Strong>About Us</Strong></a></span></li>
                        <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-sromobazar-solution.php"><strong>Sromobazar Solution</strong></a></span></li>
                        <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-contact-us.php"><strong>Contact Us</strong></a></span></li>
                        <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-overseas-education.php"><strong>Overseas Education</strong></a></span></li>
                              <div class="span_text_2">
                                        <p style="margin-left:15px;"><strong>Countrywise Universities List:</strong></p>
                                        <ul>
                                         <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=continent-university&continent_id=1"><span class="break">Asia</span></a>
                                            <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a  href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=2">India</a></li>
                                        </ul>
                                </div>
                                <div class="span_text_2">
                                        <ul><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=28"><span class="break">Japan</span></a>
                                          <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-detail&ID=w2v2z2&ownerId=x2">University Of Tokyo</a>
</li>
                                          <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-detail&ID=w2v2z2&ownerId=x2"> University Of Tokyo</a></li>
                                          <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-detail&ID=w2v2z2&ownerId=x2">University Of Tokyo</a></li>
                                        </ul>
                                            
                       </div>
        <div class="span_text_2">
                                        <ul>
                                            <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=continent-university&continent_id=5"><span class="break">Africa</span></a>
                                            <li class="span_text_3" ><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=140">South Africa</a></li>
                                        </ul>
                                </div>
                                 <div class="span_text_2">
                                        <ul>
                                            <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=continent-university&continent_id=2"><span class="break">North America</span></a>
                                            <li class="span_text_3" > <img src="images/arrow.jpg" class="arrow" /><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=104"> Unitied States</a></li>
                                        </ul>
                                </div>
                                <div class="span_text_2">
                                        <ul>
                                            <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=96"><span class="break">Canada</span></a>
                                            <li class="span_text_3" ><img src="images/arrow.jpg" class="arrow" /><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-detail&ID=w2v2v2&ownerId=x2"> Mcgrill University</a></li>
                                        </ul>
                                </div>
                                
                                <div class="span_text_2">
                                        <ul>
                                            <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=continent-university&continent_id=3"><span class="break">South America</span></a>
                                            <li class="span_text_3" > <img src="images/arrow.jpg" class="arrow" /><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=113"> Argentina</a></li>
                                        </ul>
                                </div>
                                <div class="span_text_2">
                                        <ul>
                                            <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=continent-university&continent_id=4"><span class="break">Europe</span></a>
                                            <li class="span_text_3" ><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=90"> United Kingdom</a></li>
                                        </ul>
                                </div>
                                <div class="span_text_2">
                                        <ul>
                                       <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=continent-university&continent_id=6"><span class="break">Australia</span></a>
                                            <li class="span_text_3" ><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=124">Australia</a></li>
                                            <li class="span_text_3" ><img src="images/arrow.jpg" class="arrow" /><a href="http://www.sromobazar.com/index.php?skin=default&area=student&action=university-listing&country_id=126">Newzealand</a></li>
                                        </ul>
                                </div>
                     </ul>
                </div>
        </div>
        <div class="sitemap_middle_container">
          <div class="sitemap_content">
                <h1>Account Login Section</h1>
                 <ul>
                             <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-user-profile-creator.php"><strong>Create Account</strong></a></span></li>
                              <div>
                                        <ul>
                                            <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=user-profile-creator&userTypeID=41">Employeer</a></li>
                                            <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=user-profile-creator&userTypeID=11">Job seeker</a></li>
                                            <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=user-profile-creator&userTypeID=21">Student</a></li>
                                           <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=user-profile-creator&userTypeID=51">University Admin</a></li>
                                            <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=user-profile-creator&userTypeID=13">Corporate Group</a></li>
                                            <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=user-profile-creator&userTypeID=61">University Agency</a></li>

                                        </ul>
                                </div>
                                
                              <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-user-login.php"><strong>Sign In</strong></a></span></li>
                              <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-advance-search-form.php"><strong>Advance Search</strong></a></span></li>
                              <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=job-listing&recent=yes"><strong>Job Listing</strong></a></span></li>
                              <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="#"><strong>Category Wise Job list</strong></a></span></li>
                                <div class="span_text_2">
                                        <ul class="span_text_3">
                                            <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=job-listing&ID=42&isBidable=1">Accounts/Finance</a></li>
                                            <li class="span_text_3"><img src="images/arrow.jpg" class="arrow" /> <a href="http://www.sromobazar.com/index.php?skin=default&area=online&action=job-listing&ID=57&isBidable=1">IT/Telecommunication</a></li>
                                        </ul>
                                </div>
                              <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php?skin=default&area=employeer&action=employer-listing"><strong>Employee Listing</strong></a></span></li>
                              <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php?skin=default&area=jobseeker&action=jobseeker-listing"><strong>Job seeker Listing</strong></a></span></li>  
                     </ul> 
                     <br /> 
                   
               </div>
                <br /> 
                <br />  
                
                <div class="sitemap_content">
                 <h1>Other Links</h1>
                    <ul>
                            <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-student-listing.php"><strong>List of Student</strong></a></span></li>
                            <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-university-listing.php"><strong>Universities</strong></a></span></li>
                            <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-embassy-listing.php"><strong>List of Embassy</strong></a></span></li>
                            <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-widget-listing.php"><strong>Get Widges</strong></a></span></li>
                             <br /> 
                             <br /> 
                             <br />  
                             <br />       
                    </ul>
                    
                </div>
                
        </div>
         <div class="sitemap_right_container">
           <div class="sitemap_content">
                <h1>Help</h1>
                 <ul>
                     <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/worldwide-job-and-education-help.php"><strong>Help and Support</strong></a></span></li>
                     <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php?skin=default&area=help&action=faq"><strong>FAQ</strong></a></span></li>
                     <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php?skin=default&area=help&action=payment-process"><strong>Payment Process</strong></a></span></li>
                     <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php?skin=default&area=help&action=help-searching-for-jobs"><strong>Searching For jobs</strong></a></span></li>
                     <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php?skin=default&area=help&action=registering"><strong>Registering</strong></a></span></li> 
                     <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php?skin=default&area=help&action=for-corporate-group"><strong>For Corporate Group</strong></a></span></li>
                     <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php?skin=default&area=help&action=keeping-your-details-uptodate"><strong>Keeping Your details Uptodate</strong></a></span></li>  
                      <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.sromobazar.com/index.php?skin=default&area=help&action=technical-and-other-help-issues"><strong>Technical And Other Help Issues</strong></a></span></li>      
                  </ul> 
                  <br /> 
                  <br /> 
                  <br /> 
                  <br /> 
                </div>
                <br /> 
                 
                 
                <div class="sitemap_content">
                        <h1>Sister Sites</h1>
                         <ul>
                             <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.askbangladesh.com/"><strong>Ask Banglades.com Limited</strong></a></span></li>
                             <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.itbidding.com/"><strong>itbidding.com</strong></a></span></li>
                             <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.loginbd.com/"><strong>loginbd.com</strong></a></span></li>
                             <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.itreel.com/"><strong>itReel.com</strong></a></span></li> 
                             <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.askbazar.com/"><strong>Askbazar.com</strong></a></span></li>
                             <li><img src="images/arrow2.jpg" /><span class="span_text"><a href="http://www.dressbazar.com/"><strong>Dressbazar.com</strong></a></span></li> 
                             <br />
                             <br />
                             <br />
                             <br /> 
                             <br />
                             <br />
                             <br /> 
                             <br />  
                             <br /> 
                            
                        </ul>  
             </div>
        </div>
 <div style="clear:both;"></div>       
 </div>

</body>
</html>

Monday, August 23, 2010

psd

arrow:

Wednesday, August 18, 2010

hover effect using css & html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.btnContinue {
 width: 120px;
 height: 64px;
 line-height:64px;
 text-align:center;
 font-family:Arial, Helvetica, sans-serif;
 font-size:13px;
 color:#FFFFFF;
 display: inline-block;
 text-decoration: none;
 background-repeat:no-repeat;
 background-image: url(images/pp.jpg);  
 margin:0;
 padding:0;
 text-decoration:none;
}

.btnContinue:hover {
background-position:bottom right;
font-family:Arial, Helvetica, sans-serif;
 font-size:13px;
 color:#000000;
}
.btnContinue1 {
 width: 145px;
 height: 64px;
 line-height:64px;
 text-align:center;
 display: inline-block;
 font-size: 10px;
 text-decoration: none;
 background-repeat:no-repeat;
 background-image: url(images/pp1.jpg);  
 margin:0;
 padding:0;
 text-decoration:underline;
}

.btnContinue1:hover {
background-position:bottom right;
}

</style>
</head>
<body style="width:1011px; border:1px solid #000000; height:67px; padding:0px; margin:0px;">
            <div style="margin-left:0px; float:left;">
                          <a class="btnContinue" href="http://learnwebdesignonline.com">Home</a>
            </div>

            <div style="margin-left:0px; float:left;">
            <a class="btnContinue" href="http://learnwebdesignonline.com"> </a>
            </div>
            <div style="margin-left:0px; float:left;">
            <a class="btnContinue" href="http://learnwebdesignonline.com"> </a>
            </div>
            <div style="margin-left:0px; float:left;">
            <a class="btnContinue" href="http://learnwebdesignonline.com"> </a>
            </div>

            <div style="margin-left:0px; float:left;">
            <a class="btnContinue" href="http://learnwebdesignonline.com"> </a>
            </div>
            <div style="margin-left:0px; float:left;">
            <a class="btnContinue1" href="http://learnwebdesignonline.com"> </a>
            </div>
              <div style="margin-left:0px; float:left;">
            <a class="btnContinue" href="http://learnwebdesignonline.com"> </a>
            </div>

            <div style="margin-left:0px; float:left;">
            <a class="btnContinue1" href="http://learnwebdesignonline.com"></a>
            </div>
             
            

</body>

</html>

Tuesday, August 17, 2010

jquery menu

menu:
http://www.1stwebdesigner.com/resources/36-eye-catching-jquery-navigation-menus/

Thursday, August 12, 2010

Rounded corner / Curved corner divs using CSS 3 in all browsers


<a href="http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser">
Rounded corner / Curved corner divs using CSS 3 in all browsers</a>
<a>

Monday, August 9, 2010

Fireworks & Photoshop online tutorial

Fireworks & Photoshop online tutorial ::

1.http://www.entheosweb.com/fireworks/transparent_text.asp
2.http://www.vineyardesigns.com/tutorials/photoshop/document.shtml
3.http://www.pxleyes.com/blog/2009/09/20-fireworks-tutorials-for-absolute-beginners/
4.http://www.macronimous.com/resources/creating_image_banners_with_fireworksMX2004.htm
5.http://www.modernmorph.com/tutorials/cat/macromedia-fireworks/file/glossy-text/

Friday, August 6, 2010

html & css (part -2)

Css page:

/* CSS Document */

.main_container
{
width:1016px;
margin:0 auto;
border:1px dashed #FF0000;

}
.container
{
width:1016px;
background-image: url(images/bg.jpg);
height:200px;

}
.blue_text
{
font-family:Arial, Helvetica, sans-serif;
font-size:25px;
font-weight:bold;
color:#0099CC;
width:450px;
float:left;
border:1px solid #00FFCC;

}
.blue_text_2
{
font-family:Arial, Helvetica, sans-serif;
font-size:25px;
font-weight:bold;
color:#0099CC;
width:450px;
float:left;
border:1px solid #00FFCC;

text-align:right;

}
.text
{
width:700px;
float:left;

padding:10px;
}
.text2
{
width:155px;
height:157px;
float: left;
border:1px solid #000099;
background-image: url(images/mohila.jpg);
background-repeat:no-repeat;

}

.button_container
{
width:1014px;
border:1px dashed #9999FF;
margin:0 auto;
}

.content
{
width:1016px;
border:1px solid #0033CC;
float:left;
}
.box
{
width:225px;
float:left;
border:1px solid #FF0000;
padding:10px;
}
.icon
{
width:37px;
height:47px;
background-repeat:no-repeat;
background-image: url(images/icon.jpg);
margin-left:50px;
}

.icon_text
{
font:"Courier New", Courier, monospace;
color: #009999;
text-align:center;
}

.button
{
width:195px;
height:48px;
line-height:48px;
background-image: url(images/button.jpg);
background-repeat:no-repeat;
text-align:center;
}
Html page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="main_container">
        <div class="container">
                <div class="blue_text">Rakhi Moni Mitro</div>
                <div class="blue_text_2">Rakhi</div>
                <div class="content">
                            
                            <div class="text">ferlgdrlghtljyg[ljk[ylg ferlgdrlghtljyg[ljk[ylg ferlgdrlghtljyg[ljk[ylg</div>
                            <div class="text2"></div>
                            <div style="clear:both;"></div> 
                </div>
                
           </div>
                
                
                
                
                <div style="clear:both;"></div> 
                </div>
                <div class="button_container">
                            <div class="box">
                                    <div class="icon"></div>
                                     <div class="icon_text">kgdkf hghgjmn mnlmjh</div>
                            </div>
                   <div class="box">
                              <div class="icon"></div>
                                     <div class="icon_text">kgdkf hghgjmn mnlmjh</div>
                            </div>
                            <div class="box">
                                     <div class="icon"></div>
                                     <div class="icon_text">kgdkf hghgjmn mnlmjh</div>
                            </div>
                            <div class="box">
                                     <div class="button">Start Order Now</div>
                            </div>
                    
                <div style="clear:both;"></div> 
                </div>

<div style="clear:both;"></div>          
</div>
</body>
</html>

Wednesday, August 4, 2010

HTML & CSS practice




 /* CSS Document */
 
 .content
 {
 width:1014px;
 border:1px solid #0033CC;
 height:250px;
 
 }
 .box
 {
 width:225px;
 height:300px;
 float:left;
 border:1px solid #FF0000;
 padding-top:10px;
 
 
 
 }
 .icon
 {
 width:37px;
 height:47px;
 background-repeat:no-repeat;
 background-image: url(images/icon.jpg);
 }
 
 .button
 {
 width:180px;
 height:50px;
 background-image: url(images/button.jpg);
 background-repeat:no-repeat;
 margin-top:30px;
 }
 .myBox {
 margin: 0 auto;
 border: 0px solid #fff;
 color: #9966CC;
 width: 25%;
 padding: 20px;
 text-align: left;
 background-color: #f00;
 border-top: #FF0000;
 border-bottom:  #FF0000;
 
 border-left: #fff;
 border-right:  #fff;
 float:left;
 margin-left:10px;
 
 /* Do rounding (native in Firefox and Safari) */
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 }
 
 .small_logo
 {
 width:37px;
 height:46px;
 background-repeat:no-repeat;
 background-image: url(images/brwoser.jpg);
 float:left;
 margin-left:5px; 
 }
 
 ul#footerlinks {
 
 float:left;
 
 width:250px
 
 }
 
 #footerlinks li {
 
 color:#666;
 
 display:inline;
 
 list-style-type:none;
 
 font:11px Arial, Helvetica, sans-serif;
 
 }
 
 #footerlinks a {
 
 color:#666;
 
 text-decoration:none;
 
 font:11px Arial, Helvetica, sans-serif;
 
 }
 
 #footerlinks a:link, #navlist a:visited {
 
 color:#666;
 
 text-decoration:none;
 
 font:11px Arial, Helvetica, sans-serif;
 
 }
 
 #footerlinks a:hover {
 
 color:#ff9800;
 
 text-decoration:none;
 
 font:11px Arial, Helvetica, sans-serif;
 
 }

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript" src="js/curvycorners.src.js"></script>

</head>

 <body>
  <div class="content">
     
     <div class="box">
     <dd class="icon"></dd></br></br>
     <dd>Send the design</dd></br>
     <dd>send us your design in any common format</dd>
     </div>
     
     <div class="box">
     <dd class="icon"></dd></br></br>
     <dd>Send the design</dd></br>
     <dd>send us your design in
     any common format</dd>
        </div>
      
     <div class="box">
     <dd class="icon"></dd></br></br>
     <dd>Send the design</dd></br>
     <dd>send us your design in any common format</dd>
     </div> 
      
     <div class="box">
     <dd class="icon"></dd></br></br>
     <dd class="button"><span style="line-height:50px; text-align:center; margin-left:70px;">Home</span></dd>
     </div>
  </div>
  <div class="content">
        <div class="myBox">
      <dd>Welcome to Rakhi</dd>
      <dd><h5>{elcome to Rakhi}</h5></dd>
      <dd class="small_logo"></dd>
      <dd class="small_logo"></dd>
      <dd class="small_logo"></dd>
      <dd class="small_logo"></dd>
      <dd class="small_logo"></dd>
      <dd>Starting form -20$  90$</dd>
      <dd style="text-align:right;">Homepage   Innerpage</dd>
      
           </div>
      
     <div class="myBox">
      <dd>Welcome to Rakhi</dd>
      <dd><h5>{elcome to Rakhi}</h5></dd>
      <dd class="small_logo"></dd>
      <dd class="small_logo"></dd>
      <dd class="small_logo"></dd>
      <dd class="small_logo"></dd>
      <dd class="small_logo"></dd>
      <dd>Starting form -20$  90$</dd>
      <dd style="text-align:right;">Homepage   Innerpage</dd>
      
    </div>
    <div class="myBox">
 
    </div>
 
  </div>
  
     <div id="footerlinks">
       <ul>
         <li><a href="index.html" >Home</a> |</li>
    
         <li><a href="about.html">About</a> |</li>
    
          <li><a href="index.html" >Home</a> |</li>
    
         <li><a href="about.html">About</a> |</li>
    
          <li><a href="index.html" >Home</a> |</li>
    
         <li><a href="about.html">About</a> |</li>
    
        </ul>
        </div>
 
  <div class="content">
       <dd class="icon"></dd>
     <dd style="margin-left:5px; float: inherit;">wetreytyikjl</dd>
  </div> 
</body>
</html>

Sunday, August 1, 2010

Making hover effect in css & html

i use two jpg button for this implimentation.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Rollover Trifecta Buttons</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style media="screen" type="text/css">
   /* NAVIGATION BUTTONS */
   .menu {
      height: 44px;
      width: 844px;
   }
   .cssnav {
      position:relative;
      float: left;
      margin: 0; 
      padding: 0;
      font-family: arial, helvetica, sans-serif;
      background: url(images/button.jpg) no-repeat;
      width: 135px;
      height: 49px;
                     overflow:hidden;/* for ie to hide extra height*/
      text-align: center;
      line-height:49px; 
      
   }
   .cssnav a {
     
      color: #000000;
      font-size: 11px;
      width: 135px;
      height: 49px; 
      float: left;
      color: black; 
      text-decoration: none;
      overflow:hidden;/* for ie to hide extra height*/
      text-align: center;
   }
   .cssnav a:hover {
      color: #ffffff;
      text-align: center;
      background-image:url(images/button_hover.jpg);
   }
   

   

   
   /* END OF NAVIGATION */
</style>

<body>

<!--MAIN NAVIGATION START-->
<div class="menu">
<div class="cssnav"><a href="#" title="Search Engine Optimization">Home</a></div>
<div class="cssnav"><a href="#" title="Search Engine Submission">Search Engine Submission</a></div>

<div class="cssnav"><a href="#" title="Website Design">Website Design</a></div>
<div class="cssnav"><a href="#" title="Website Promotion">Website Promotion</a></div>
<div class="cssnav"><a href="#" title="Website Promotion">Website Promotion</a></div>
<div class="cssnav"><a href="#" title="Website Promotion">Website Promotion</a></div>

</div>
<!--MAIN NAVIGATION END-->


</body>
</html>

Blog Archive

Labels

Pages

Sromobazar.com

Askbazar.Com

LoginBD.Com

Labels

Followers

Sample Text

Labels

Tuesday, August 24, 2010

Monday, August 23, 2010

Wednesday, August 18, 2010

Tuesday, August 17, 2010

Thursday, August 12, 2010

Monday, August 9, 2010

Friday, August 6, 2010

Wednesday, August 4, 2010

Sunday, August 1, 2010

Blog Archive

About Me

Labels

Sromobazar

Share

About Me

Sromobazar

Search This Blog