Showing posts with label CSS. Show all posts

Simple Menu Creation Using CSS

This is example of simple menu creation using CSS. Save as html and view a menu.

<html>
<head>
<title>Menu bar</title>
<style>
body {
font: normal 11px verdana;
}
ul
{
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */

border-bottom: 1px solid #ccc;
}
ul li
{
position: relative;
}
ul li a
{
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

ul li a:hover
{
color:#e21444; background:#f9fff9
}

/* horizontal Menu */
a
{ text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 1px solid #ccc;
width:150px;
text-align:center;
font-size:11;
}
a:hover
{
color:#e21444; background:#f9fff9
}

</style>
</head>
<body onload="document.getElementById('id1').style.visibility='hidden';document.getElementById('id2').style.visibility='hidden';">

<p> Click Me</p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

<td>
<a href="#" onMouseOver="javascript:document.getElementById('id1').style.visibility='visible';" onMouseOut="javascript:document.getElementById('id1').style.visibility='hidden';">Home</a>  
<ul id="id1">
<li><a href="#" onMouseOver="javascript:document.getElementById('id1').style.visibility='visible';" onMouseOut="javascript:document.getElementById('id1').style.visibility='hidden';">First</a></li>
<li><a href="#" onMouseOver="javascript:document.getElementById('id1').style.visibility='visible';" onMouseOut="javascript:document.getElementById('id1').style.visibility='hidden';">Second</a></li>
<li><a href="#" onMouseOver="javascript:document.getElementById('id1').style.visibility='visible';" onMouseOut="javascript:document.getElementById('id1').style.visibility='hidden';">Third</a></li>
</ul>
<br><br>
</td>

<td>
<a href="#" onMouseOver="javascript:document.getElementById('id2').style.visibility='visible';" onMouseOut="javascript:document.getElementById('id2').style.visibility='hidden';">About Us</a>  
<ul id="id2">
<li><a href="#" onMouseOver="javascript:document.getElementById('id2').style.visibility='visible';" onMouseOut="javascript:document.getElementById('id2').style.visibility='hidden';">First</a></li>
<li><a href="#" onMouseOver="javascript:document.getElementById('id2').style.visibility='visible';" onMouseOut="javascript:document.getElementById('id2').style.visibility='hidden';">Second</a></li>
</ul>
<br><br>
</td>

<td>
<a href="#">Contact Us</a>
</td>

</tr></table>
</body>
</html>

The menu looks like below

00:45 | Category: CSS | 1 comments

Example of Design Box using CSS

Images must be in RoundedImages Folder. It is very simple design for shape.

<html>
<body margin="2px">
<STYLE>
BODY { SCROLLBAR-FACE-COLOR: #edf0d9; SCROLLBAR-HIGHLIGHT-COLOR: #edf0d9; SCROLLBAR-SHADOW-COLOR: #cccccc; SCROLLBAR-3DLIGHT-COLOR: #808080; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #808080; SCROLLBAR-DARKSHADOW-COLOR: #e6f2ff }
.subtitle
{
FONT-SIZE: 10pt;
COLOR: #ffffff;
font-weight:bold;
    FONT-STYLE: normal;
    padding-top:2;
    padding-bottom:2;
    FONT-FAMILY: Verdana, Arial, Arial, Helvetica;
}
td
{
FONT-FAMILY: Verdana, Arial, Arial, Helvetica;
font-size:12;
font-weigth:bold;
}
.spacing
{
padding:2;
}
.graybgfill
{
background-color: #919191;
}
.bluebgfill
{
background-color: #86bdf5;
}
</style>
<table cellSpacing="0" cellPadding="5" width="50%" align="center" border="0">
<tr>
  <td bgcolor="#6699cc">
   <table width="100%" cellspacing="0" cellpadding="0">
    <tr>
     <td align="left" valign="top" bgcolor="#FFFFFF"><img src="RoundedImages/ctl.gif" bgcolor="#FFFFFF"></td>
     <td bgcolor="#FFFFFF"></td>
     <td align="right" valign="top" bgcolor="#FFFFFF"><img src="RoundedImages/ctr.gif"></td>
    </tr>
    <tr>
     <td align="left" valign="top" bgcolor="#FFFFFF" colspan="3" height="50">

</td>
    </tr>
    <tr>
     <td align="left" valign="bottom" bgcolor="#FFFFFF"><img src="RoundedImages/cbl.gif" bgcolor="#FFFFFF"></td>
     <td bgcolor="#FFFFFF"></td>
     <td align="right" valign="bottom" bgcolor="#FFFFFF"><img src="RoundedImages/cbr.gif"></td>
    </tr>
   </table>
  <td>
</tr>
</table>
<br>
<table cellSpacing="0" cellPadding="0" width="50%" align="center" border="0">
<tr>
  <td style="WIDTH: 2%" vAlign="top" align="left" bgColor="#86bdf5"><IMG height="11" src="RoundedImages\Hctl.gif" width="11"></td>
  <td class="subtitle" align="center" bgColor="#86bdf5">
  Sub Title</td>
  <td style="WIDTH: 2%" vAlign="top" align="right" bgColor="#86bdf5"><IMG height="11" src="RoundedImages\Hctr.gif" width="11"></td>
</tr>
<tr>
  <td class="bluebgfill" vAlign="top" align="left" colSpan="3">
   <table style="WIDTH: 100%" cellSpacing="0" cellPadding="1" border="0">
    <tr>
     <td class="bluebgfill">
      <table style="WIDTH: 100%" cellSpacing="0" cellPadding="0" border="0">
       <tr>
        <td bgColor="#ffffff">
        
        <table cellSpacing="2" cellPadding="1" width="100%" border="0">
         <tr id="trDept">
          <td class="FooterLabelMandatory" align="right" width="30%" colSpan="1" rowSpan="1">
          Name <br>
          </td>
          <td class="spacing" align="left" width="65%" colSpan="1" rowSpan="1"><input name="txtAcronymName" type="text" maxlength="50" id="txtAcronymName" class="TextControl" style="width:200px;" /> </td>
         </tr>
         <tr id="trDept">
          <td class="FooterLabelMandatory" align="right" width="30%" colSpan="1" rowSpan="1">
          Age <br>
          </td>
          <td class="spacing" align="left" width="65%" colSpan="1" rowSpan="1"><input name="txtAcronymName" type="text" maxlength="50" id="txtAcronymName" class="TextControl" style="width:200px;" /> </td>
         </tr>
        </table>
        </td>
       </tr>
      </table>
     </td>
    </tr>
   </table>
  </td>
</tr>
</table>
</body>
</html>

This HTML Page looks like,

00:17 | Category: CSS | 0 comments

Example of simple Design in HTML

This is a simple Table Design for beginners, i will get this from some site.

<html>
<head>
<style type="text/css">
td
{
font-family: Verdana, Tahoma;
font-size:10;
}
input
{
font-family: Verdana, Tahoma;
font-size:10;
}
th
{
font-family: Verdana, Tahoma;
font-size:11;
}
div
{
font-family: Verdana, Tahoma;
font-size:11;
font-weight:bold;
}
</style>
</head>
<div>Creating Border Using border Color Property</div>
<br>
   <table width="80%"   cellspacing="0" cellpadding="4" border="0" style="border: navy 1px solid;">

    <tr>
     <td bgcolor="white">Name : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Age : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Mobile : </td><td bgcolor="white"><input type="text" name="txtName"</td>
                </tr>
                </table>
<br>
<div>Creating Border Using CellPadding =1 with nested Table</div>
<br>
<table width="80%"   cellspacing="0" cellpadding="1" border="0">
<tr>
  <td bgcolor="navy">
   <table width="100%"   cellspacing="0" cellpadding="4" border="0" >

    <tr>
     <td bgcolor="white">Name : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Age : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Mobile : </td><td bgcolor="white"><input type="text" name="txtName"</td>
                </tr>
                </table>
  </td>
</tr>
</table>
<br>
<div>Creating Inner Border Using Border=1</div>
<br>
   <table width="80%"   cellspacing="0" cellpadding="2" border="1" bordercolor="navy">
    <tr>
     <th bgcolor="#EFEFEF">Name</th><th bgcolor="#EFEFEF">AGE</th><th bgcolor="#EFEFEF">Mobile</th>
               </tr>
    <tr>
     <td bgcolor="#FFFFFF">Ram</td><td bgcolor="#FFFFFF">25</td><td bgcolor="#FFFFFF">9855555525</td>
                </tr>
    <tr>
     <td bgcolor="#FFFFFF">Raju</td><td bgcolor="#FFFFFF">23</td><td bgcolor="#FFFFFF">9445545625</td>
                </tr>
    <tr>
     <td bgcolor="#FFFFFF">Sam</td><td bgcolor="#FFFFFF">24</td><td bgcolor="#FFFFFF">9444145285</td>
                </tr>
                </table>
<br>
<div>Creating Inner Border Using Cellspacing =1 with nested Table</div>
<br>
<table width="80%"   cellspacing="0" cellpadding="0" border="0">
<tr>
  <td bgcolor="navy">
   <table width="100%"   cellspacing="1" cellpadding="2" border="0" >
    <tr>
     <th bgcolor="#EFEFEF">Name</th><th bgcolor="#EFEFEF">AGE</th><th bgcolor="#EFEFEF">Mobile</th>
               </tr>
    <tr>
     <td bgcolor="#FFFFFF">Ram</td><td bgcolor="#FFFFFF">25</td><td bgcolor="#FFFFFF">9855555525</td>
                </tr>
    <tr>
     <td bgcolor="#FFFFFF">Raju</td><td bgcolor="#FFFFFF">23</td><td bgcolor="#FFFFFF">9445545625</td>
                </tr>
    <tr>
     <td bgcolor="#FFFFFF">Sam</td><td bgcolor="#FFFFFF">24</td><td bgcolor="#FFFFFF">9444145285</td>
                </tr>
                </table>
  </td>
</tr>
</table>
<br>
<div>Creating Double Border Using border Color Property</div>
<br>
<table width="80%"   cellspacing="0" cellpadding="2" border="0" style="border: navy 1px solid;">
<tr>
  <td bgcolor="#FFFFFF">
   <table width="100%"   cellspacing="0" cellpadding="4" border="0" style="border: navy 1px solid;">

    <tr>
     <td bgcolor="white">Name : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Age : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Mobile : </td><td bgcolor="white"><input type="text" name="txtName"</td>
                </tr>
                </table>
  </td>
</tr>
</table>
<br>
<div>Creating Double Border Using border Color Property</div>
<br>
<table width="80%"   cellspacing="0" cellpadding="2" border="0" style="border: navy 1px solid;">
<tr>
  <td bgcolor="#FFFFFF">
   <table width="100%"   cellspacing="0" cellpadding="4" border="0" style="border: navy 1px solid;">
    <tr>
     <td bgcolor="white">Name : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Age : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Mobile : </td><td bgcolor="white"><input type="text" name="txtName"</td>
                </tr>
    <tr>
     <td bgcolor="white">Name : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Age : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Mobile : </td><td bgcolor="white"><input type="text" name="txtName"</td>
                </tr>
                </table>
  </td>
</tr>
<tr>
  <td bgcolor="#FFFFFF">
   <table width="100%"   cellspacing="0" cellpadding="4" border="0" style="border: navy 1px solid;">
    <tr>
     <td bgcolor="white">Name : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Age : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Mobile : </td><td bgcolor="white"><input type="text" name="txtName"</td>
                </tr>
    <tr>
     <td bgcolor="white">Name : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Age : </td><td bgcolor="white"><input type="text" name="txtName"</td>
     <td bgcolor="white">Mobile : </td><td bgcolor="white"><input type="text" name="txtName"</td>
                </tr>
                </table>
  </td>
</tr>
</table>
<br>

The design looks like below,

00:08 | Category: CSS | 0 comments

CSS Examples

background-color

{

background-color: yellow;

background-color: #00ff00;

background-color: transparent;

background-color: rgb(250,0,255)

}

background-image

{

background-image:url('bgdesert.jpg')

}

background-repeat

{

background-image: url('bgdesert.jpg');

background-repeat: repeat;

background-repeat: no-repeat;

background-repeat: repeat-y;

background-repeat: repeat-x;

}

Position the background

{

background-image: url('smiley.gif');

background-repeat: no-repeat;

background-attachment:fixed;

background-position: 30% 20%;

}

Single declaration

{

background: #00ff00 url('smiley.gif') no-repeat fixed center;

}

Text

{

color: #00ff00;

background-color:yellow;

letter-spacing: 0.5cm;

line-height: 90%;

text-align: center;

text-decoration: overline; text-decoration: line-through; text-decoration: underline;

text-decoration: blink; text-decoration: none;

text-indent: 1cm;

text-transform: uppercase;

text-transform: lowercase;

text-transform: capitalize;

direction: rtl;

direction: ltr;

word-spacing: 30px;

white-space: nowrap;

}

Font

{

font-style: italic,normal,oblique;

font-family: courier;

font: caption;

font-size: 150%;

font-size-adjust: 0.40;

font-variant: small-caps,normal;

font-weight: bold;

font-weight: 900;

}

Font declaration in one line – {font: italic small-caps 900 12px arial}

Border

Different borders on each line:

{

border-style: solid double;

border-style: double solid;

border-style: groove double;

border-style: solid double groove;

}

{

border-top: medium solid #ff0000;

border-bottom: medium solid #ff0066;

border-left: medium solid #ff0021

border-Right: medium solid #ff2221

}

{

border-style: solid inset outset groove double dotted;

border-top-style: solid; border-bottom-style: solid; border-Right-style: solid; border-Left-style: solid}

{

border-width: 5px;

border-width: 5px 10px;

border-top-width: thin; border-bottom-width: 15px; border-Left-width: thin; border-Right-width: thin;

border-color: #0000ff;

border-Left-color: #ff0000; border-Left-color: #ff0000; border-Left-color: #ff0000; border-Left-color: #ff0000;

}

Padding in Table cell

{

padding-left: 2cm;

padding-right: 5cm;

padding-top: 5cm;

padding-bottom: 5cm;

padding: 1.5cm;

}

List

{

list-style-type: disc;

list-style-type: circle;

list-style-type: square;

list-style-type: none;

}

Classification

img

{

float:right;

clear:both;

border:1px dotted black;

margin:0px 0px 15px 20px;

width:0.7em;

z-index:-1; z-index:1

bottom:0px

}

Display

{

display: inline;

display: none;

display: block;

position:relative;

position:fixed;

position:absolute;

left:20px;

visibility:hidden;

visibility:Visible;

}

Cursor

{

cursor:auto;

cursor:crosshair;

cursor:default;

cursor:pointer;

cursor:move;

cursor:e-resize;

cursor:ne-resize;

cursor:nw-resize;

cursor:n-resize;

cursor:se-resize;

cursor:sw-resize;

cursor:s-resize;

cursor:w-resize;

cursor:text;

cursor:wait;

cursor:help;

}

Simple Menu

{

float:left;

width:100%;

padding:0;

margin:0;

list-style-type:none;

}

{

float:left;

width:6em;

text-decoration:none;

color:white;

background-color:purple;

padding:0.2em 0.6em;

border-right:1px solid white;

}

a:hover {background-color:#ff3300}

li {display:inline}

</style>

<ul>

<li><a href="#">Link three</a></li>

</ul>

Div with scroll

div

{

background-color:#00FFFF;

width:150px;

height:150px;

overflow: scroll

}

Different color hyper link

a:link {color: #FF0000}

a:visited {color: #00FF00}

a:hover {color: #FF00FF}

a:active {color: #0000FF}

First – child of Tags

p:first-child

{

color:blue

}

p > i:first-child – Ex: <p>dfdkfj<I>dkfjdk</I>dfsdkj</p>

{

color:blue

}

p:first-child i

{

color:blue

}

First Letter

p:first-letter

{

color: #ff0000;

font-size:xx-large

}

First Line

p:first-line

{

color: #ff0000;

font-variant: small-caps

}

Simple Menu

ul#cssnav {
margin:0 0 2em 17px;
padding:0;
list-style-type:none;
}
ul#cssnav li {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background: url(images/rollover2.gif) no-repeat left top;/* over state of image*/
float:left;
width: 8em;
height: 2em;
line-height:2em;
text-align:center;
margin-left:-17px;
}
#cssnav li a {
display:block;
width: 8em;
height: 2em;
display: block;
color: #FFF;
text-decoration: none;
background: url(images/rolloff2.gif) no-repeat left top;/* normal state of image*/
}
#cssnav li a:hover,#cssnav li.current a {background:transparent;color:#000} /* hide anchor on hover (and set current tab)*/

Scroll bar colors

body, html

  scrollbar-face-color: ThreeDFace !important;

  scrollbar-shadow-color: ThreeDDarkShadow !important;

  scrollbar-highlight-color: ThreeDHighlight !important;

  scrollbar-3dlight-color: ThreeDLightShadow !important;

  scrollbar-darkshadow-color: ThreeDDarkShadow !important;

  scrollbar-track-color: Scrollbar !important;

  scrollbar-arrow-color: ButtonText !important;

03:55 | Category: CSS | 0 comments

Small Drops Make Ocean

Simple Menu Creation Using CSS

Example of Design Box using CSS

Example of simple Design in HTML

CSS Examples

Position the background

Single declaration

Text

Padding in Table cell

List

Display

Cursor

Simple Menu

Different color hyper link

First – child of Tags

First Letter

First Line

Simple Menu

Search

List

Monthwise View

Followers

Quick Links