Html and Css Initiation

CMS and Website Html and Css Initiation

Skip to end of metadata

Go to start of metadata

Overview


In every  CMS and Website we implement this step

Back to top

Zen Cart


We  follow the  following table step

NO File Name Description
1 sample.psd At first design this “sample.psd” page
2 common.html Design This page
3 popup.html Design This page
4 index.html Design This page
5 product_listing.html Design This page
6 product_details.html Design This page
7. zen_cart_btn_all.psd Design all button

Download

zen_cart_html_css.zip

Back to top

Joomla


We  follow the  following table step

NO File Name Description
1 sample.psd At first design this “sample.psd” page
2 common.html Design This page
3 popup.html Design This page
4 index.html Design This page
5 product_listing.html Design This page
6 product_details.html Design This page

Download

joomla_html_css.zip

Back to top

WordPress


We  follow the  following table step

NO File Name Description
1 sample.psd At first design this “sample.psd” page
2 common.html Design This page
3 popup.html Design This page
4 index.html Design This page

Download

wordpress_html_css.zip

Back to top

Naming Convention in CSS


sidebar-left
sidebar-right
main-content
main-content-with-left-bar
main-content-with-right-bar
main-content-with-left-right-bar

Frequent use html and css


Menu

1.Horigantale menu

1. Example

CSS

ul {
 margin: 0;
 padding: 0;
 list-style:none;
}
li {
 margin: 0;
 padding: 0;
 list-style:none;
 display: inline;
 float:left;
 padding-right:48px;
}
li a {
 color: #ffffff;
 text-decoration:none;
 font-size:12px;
 font-weight:normal;
 text-transform:uppercase;
}
ul li a:hover {
 text-decoration:none;
 color:#000;
}
li.active a {
 color: #000;
 text-decoration:none;
 font-size:12px;
 font-weight:normal;
 text-transform:uppercase;
}

HTML

<ul>
 <li class="active"><a href="#"><span>Home</span></a></li>
 <li><a href="#"><span>About Us</span></a></li>
 <li><a href="#"><span>Product</span></a></li>
</ul>

Back to top

2. Example

CSS

 ul {
 margin: 0;
 padding: 0;
 list-style:none;
}
li {
 margin: 0;
 padding: 0;
 list-style:none;
 display: inline;
 float:left;
 padding-right:20px;
}
li a {
 color: #868686;
 text-decoration:none;
 font-size:11px;
 font-weight:normal;
}
li a:hover {
 text-decoration:underline;
}

HTML

 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Log In</a></li>
</ul>

Back to top

3. Example

CSS

 ul {
 margin: 0;
 padding: 0;
 list-style:none;
 float:right;
 text-align:right;
}
li {
 margin: 0;
 padding: 0;
 list-style:none;
 display: inline;
 float:left;
 text-align:right;
 background:url(../images/menu_separator.gif) no-repeat 100% 11px;
 padding:0 10px 0 10px;
}
li ul li {
 background:none;
}
li.last_item {
 background:none;
 padding-right:0;
}
ul li a {
 display:block;
 width:auto;
 color:#ffffff;
 text-decoration:none;
 font-size:15px;
 padding:7px 10px 10px 10px;
}
ul li a:hover {
 color:#ffffff;
 background:#0084d7 url(../images/menu_hover_bg.gif) repeat-x 0 0;
 -webkit-border-radius-topleft:8px;
 -webkit-border-radius-topright:8px;
 -moz-border-radius-topleft:8px;
 -moz-border-radius-topright:8px;
 -khtml-border-radius-topleft:8px;
 -khtml-border-radius-topright:8px;
 border-top-left-radius:8px;
 border-top-right-radius:8px;
}

HTML

 <ul>
 <li><a href="#"><span>Home</span></a></li>
 <li><a href="#"><span>Contact Us</span></a></li>
 <li class="last_item"><a href="#"><span>Login</span></a></li>
</ul>

Back to top

4. Example

CSS

 ul {
 margin: 0;
 padding: 1px 0 0 0;
}
ul li {
 margin: 0;
 padding: 0;
 float: left;
 list-style: none;
}
ul li a {
 font-size: 12px;
 font-weight: normal;
 color: #d0ea7e;
 float: left;
 padding:0 10px 0 16px;
 text-decoration: none;
}
ul li a:hover {
 color: #c1ed87;
}
ul li a.active {
 color: #c1ed87;
}
ul li.first_item {
 background: none;
}

HTML

 <ul>
 <li class="first_item"><a href="#">Home</a></li>
 <li><a href="#">Log In</a></li>
 <li class="last_menu"><a href="contact-us">Contact Us</a></li>
</ul>

topBack to top

2.Vertical Menu

1. Example

CSS

ul{
 margin:0px;
 padding:0px;
 list-style:none;
}
ul li{
 margin:0px;
 padding:6px 0 6px 0;
 list-style:none;
 border-bottom:1px solid #bbcdcf;
 color: #4e4e4e;
 text-decoration:none;
 font-size:11px;
 font-weight:normal;
}
ul li a{
 color: #4e4e4e;
 text-decoration:none;
 font-size:11px;
 font-weight:normal;
}
ul li a:hover{
 color:#12ADC8;
}

HTML

 <ul>
 <li><a href="#"><span>Home</span></a></li>
 <li><a href="#"><span>Product</span></a></li>
 <li><a href="#"><span>About Us</span></a></li>
 <li><a href="#"><span>Shipping</span></a></li>
 <li><a href="#"><span>FAQ's</span></a></li>
</ul>

Back to top

2. Example

CSS

 #follow_us h2 {
 color: #34B0C0;
 font-family: 'Cuprum',serif;
 font-size: 19px;
 font-weight: normal;
 margin: 0;
 padding: 0 0 22px 0;
 text-decoration: none;
}
#follow_us img{
 margin:0 0 10px 0;
 padding:0px;
 position:relative;
 left:0px;
 top:0px;
}

HTML

 <div class="follow_us">
 <h2>Follow us</h2>
 <a target="_blank" href="#"><img width="76" height="24" alt="" src="includes/templates/wa_theme/images/twitter.png"></a>
 <a target="_blank" href="#"><img width="87" height="25" alt="" src="includes/templates/wa_theme/images/facebook.png"></a>
 <a target="_blank" href="#"><img width="75" height="24" alt="" src="includes/templates/wa_theme/images/linkdin.png"></a>
 <a target="_blank" href="#"><img width="82" height="24" alt="" src="includes/templates/wa_theme/images/email_us.png"></a>
</div>

Back to top

3. Example

CSS

 ul {
 margin: 0;
 padding: 0;
 list-style:none;
 width:100%;
}
ul li {
 margin: 0;
 padding:0;
 list-style:none;
}
ul li a{
 display:block;
 margin: 0;
 padding:9px 0 6px 0;
 list-style:none;
 color: #474747;
 font-size:12px;
 background-image:url(../images/cat_menu_arrow.gif);
 background-repeat:no-repeat;
 background-position: 24px 14px;
 background-color: #ffffff;
}
ul li a span{
 padding-left:40px;
}
ul li a:hover{
 color:#40b9ce;
 background-image:url(../images/cat_menu_arrow_hover.gif);
 text-decoration:none;
}
ul li.even a{
 background-color: #F9F9F9;
}
ul li.parent a{
 background-image:url(../images/cat_menu_arrow_hover.gif);
 background-repeat:no-repeat;
 background-position: 24px 14px;
 color:#40b9ce;
}
ul li.active a{
 background-image:url(../images/cat_menu_arrow_hover.gif);
 background-repeat:no-repeat;
 background-position: 24px 14px;
 color:#40b9ce;
}
ul ul {
 margin: 0;
 padding: 0;
 list-style:none;
 width:100%;
}
ul li.parent ul li {
 margin: 0;
 padding:0;
 list-style:none;
}
ul li.parent ul li a{
 display:block;
 margin: 0;
 padding:9px 0 6px 0;
 list-style:none;
 color: #474747;
 font-size:12px;
 background-image:url(../images/cat_menu_arrow.gif);
 background-repeat:no-repeat;
 background-position: 41px 14px;
 background-color: #ffffff;
}
ul li.parent ul li a span{
 padding-left:55px;
}
ul li.parent ul li a:hover{
 color:#40b9ce;
 background-image:url(../images/cat_menu_arrow_hover.gif);
 text-decoration:none;
}
ul li.parent ul li.even a{
 background-color: #F9F9F9;
}
ul li.parent ul li.parent a{
 background-image:url(../images/cat_menu_arrow_hover.gif);
 background-repeat:no-repeat;
 background-position: 41px 14px;
 color:#40b9ce;
}
ul li.parent ul li.active a{
 background-image:url(../images/cat_menu_arrow_hover.gif);
 background-repeat:no-repeat;
 background-position: 41px 14px;
 color:#40b9ce;
}

HTML

 <ul>
 <li class="citem1 parent"><a href="#"><span>Bedding &amp; Bath</span></a>
 <ul>
 <li class="citem2 even"><a href="#"><span>Bath Accessories</span></a></li>
 <li class="citem3"><a href="#"><span>Towels &amp; Robes</span></a></li>
 </ul>
 </li>
 <li class="citem4 even"><a href="#"><span>Kitchen &amp; Dining</span></a></li>
 <li class="citem5"><a href="#"><span>Lighting</span></a></li>
 <li class="citem6 even"><a href="#"><span>Decor</span></a></li>
 <li class="citem7"><a href="#"><span>Desk &amp; Stationery</span></a></li>
 <li class="citem8 even"><a href="#"><span>Laundry</span></a></li>
</ul>

Back to top

4. Example

CSS

  ul {
 margin:0px;
 padding:0px;
 list-style:none;
}
 ul li {
 margin:0px;
 padding:7px 0 7px 0;
 list-style:none;
 background:url(../images/category_menu_arrow.gif) no-repeat 1px 9px;
 border-bottom:1px solid #e5e0dd;
 color:#3b3937;
 font-size:13px;
 font-weight:normal;
}
 ul li a {
 color:#3b3937;
 font-size:13px;
 font-weight:normal;
 padding:0 0 0 22px;
}
 ul li.active a {
 color:#8D0712;
}
 ul li ul {
 margin:0px;
 padding:5px 0 0 0;
 list-style:none;
}
 ul li ul li {
 margin:0px;
 padding:7px 0 7px 0;
 list-style:none;
 background:url(../images/sub_category_menu_arrow.gif) no-repeat 17px 11px;
 border:none;
 border-top: 1px solid #E5E0DD;
 color:#3b3937;
 font-size:13px;
 font-weight:normal;
}
 ul li ul li a, ul li.active ul li a {
 color:#3b3937;
 font-size:13px;
 font-weight:normal;
 padding:0 0 0 36px;
 display:block;
}
 ul li ul li.active a {
 color:#8D0712;
}
 ul a:hover {
 color:#8D0712;
 text-decoration:none;
}

HTML

 <ul>
 <li class="active"> <a href="#"><span>Portuguese Ceramics</span></a>
 <ul>
 <li><a href="#"><span>Fantasia Collection</span></a></li>
 <li><a href="#"><span>Cabbage Collection</span></a></li>
 <li><a href="#"><span>Hunting</span></a></li>
 </ul>
 </li>
 <li><a href="#"><span>Portugese Glassware</span></a></li>
 <li><a href="#"><span>Portuguese Pewter</span></a></li>
</ul>

Back to top

FORM

1. Example

CSS

 #newsletter_box {
 background: url("../images/newslatter_subscription_input_bg.gif") no-repeat 82px 0;
 height: 32px;
 position: absolute;
 right: 1px;
 top: 22px;
 width: 400px;
}
#newsletter_box .nl_texrt {
 color: #0088A2;
 font-family: 'Cuprum',serif;
 font-size: 19px;
 font-weight: normal;
 left: 0;
 line-height: 32px;
 padding: 0;
 position: absolute;
 text-decoration: none;
 top: 0;
}
#newsletter_box .nl_input {
 background-color: #FFFFFF;
 border: medium none;
 color: #B7B7B7;
 font-size: 12px;
 height: 26px;
 left: 94px;
 position: absolute;
 top: 3px;
 width: 200px;
}
#newsletter_box .nl_submit{
 position:absolute;
 left:303px;
 top:6px;
}

HTML

<div id="newsletter_box">
 <form>
 <label class="nl_texrt">Newsletter</label>
 <input type="text" value="Enter your email address" onfocus="if (this.value == 'Enter your email address') this.value = '';" onblur="if (this.value == '') this.value = 'Enter your email address';" name="email" class="nl_input">
 <input width="91" type="image" height="21" alt="" src="subscribe_btn.gif" class="nl_submit">
 </form>
</div>

Back to top

2. Example

CSS

 #search_box{
 position:absolute;
 right:10px;
 top:120px;
 width:267px;
 height:32px;
 background:url(../images/search_input_bg.gif) no-repeat 0 0;
 
}
#search_box input.search_input_box{
 position:absolute;
 left:17px;
 top:3px;
 width:145px;
 height:26px;
 border:none;
 background-color:#ffffff;
 font-size:12px;
 color:#b7b7b7;
 padding:0 15px 0 0;
}
#search_box input.search_submit_img{
 position:absolute;
 left:186px;
 top:6px;
 cursor:pointer;
}

HTML

 <div id="search_box">
 <form>
 <input type="text" onblur="if (this.value == '') this.value = 'Enter search keywords here';" onfocus="if (this.value == 'Enter search keywords here') this.value = '';" value="Enter search keywords here" class="search_input_box" name="keyword">
 <input width="76" type="image" height="21" alt="SEARCH" src="search_btn.gif" class="search_submit_img">
 </form>
</div>

Back to top

3. Example

CSS

 fieldset {
 border: 1px solid #C7C7C7;
 margin: 10px 0 5px;
 padding: 10px;
}
legend {
 color: #04509B;
 font-size: 16px;
 font-weight: normal;
 margin: 0;
 padding: 0 5px;
 text-align: left;
}
.reg_img img{
 background: none repeat scroll 0 0 #FFFFFF;
 border: 1px solid #CCCCCC;
 padding: 10px;
 }
div.row {
 margin:auto auto 5px;
 line-height:131%;
}
div.row p.error {
 background:transparent url(../images/error/icon_error.gif) no-repeat scroll left top;
 color:#EE2037;
 display:none;
 margin:0 10px 5px 200px;
 overflow:hidden;
 padding-bottom:4px;
 padding-left:17px;
}
div.row label {
 float:left;
 text-align:right;
 color:#444444;
}
div.row input {
 margin-left:5px;
 line-height:1.1em;
}
div.row #radiotbl {
 border:medium none;
 border-collapse:collapse;
}
div.row #radiotbl td {
 border:medium none;
 padding:0;
}
div.row label.radiolabel {
 float:none;
 text-align:left;
 width:auto;
}
div.row input.radio {
 width:auto;
}

HTML

 <fieldset>
 <legend>Contact Us</legend>
 <div class="row">
 <label>Name</label>
 <input type="text" name="" value="Sample Text"/>
 </div>
 <div class="row error">
 <label>Name</label>
 <input type="text" name="" value="Sample Text"/>
 <p>Name is invalid</p>
 </div>
 <div class="row">
 <label>Country</label>
 <select>
 <option>Select Box 1</option>
 <option>Select Box 1</option>
 <option>Select Box 1</option>
 </select>
 <p class="info">Name is invalid</p>
 </div>
 <div class="row">
 <label>Select Checkbox</label>
 <input type="checkbox" name="" />Test 1
 <input type="checkbox" name="" />Test 1
 <input type="checkbox" name="" />Test 1
 </div>
 <div class="row">
 <label>Select Radio</label>
 <input type="radio" name="" />Test 1
 <input type="radio" name="" />Test 1
 <input type="radio" name="" />Test 1
 </div>
 <div class="row">
 <label>Message</label>
 <textarea name="">Sample text Textarea</textarea>
 </div>
 <div class="row">
 <a class="button">Button</a>
 <input type="button" name="" value="Button"/>
 </div>
</fieldset>

Back to top

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s