Pure Css Horiontal Menus

October 2, 2007

Download pure css horizontal menus in 6 colors click here for demo (click on images to download particular menu) works in all browsers.

Red Css Menu

blue Css Menu

Green Css Menu

Orange Css Menu

Purple Css Menu

More Menu Styles to come please let me know if you face any problem in browsers you can also leave your suggestions and you can also mail me for psd files.


creating popup image viewer in css

May 26, 2007

Easy and simple way to create popup in css, let’s create popup for an image. Click here for demo.

Css Code

<style type=”text/css”>
.spiderpic{
position: relative;
z-index: 0;
}

.spiderpic:hover{
background-color: transparent;
z-index: 50;
}

.spiderpic span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 1px solid black;
visibility: hidden;
color: black;
text-decoration: none;
}

.spiderpic span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.spiderpic:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>

HTML code

<a class=”spiderpic” href=”https://webdesigninfo.wordpress.com”><img src=”http://a.wordpress.com/avatar/settysantu-48.jpg?1180110315&#8243; width=”48px” height=”48px” border=”0″ /><span><img src=”http://www.stumbleupon.com/mainpics/2725502.jpg&#8221; /></span></a>

Browser Support: it works in all browsers.

Download this file


Creating Simple Vertical Css Menu Bar

May 12, 2007

In My Previous Post (i.e..,on april 04,2007) I Explain U How To Create Simple Css Horitzontal Menu Bar After That I Got Many Mails For Requesting Tutorial On Vertical Css Menu Bar So Here Is Ur Request Friends I Hope This Helps You

Css Code(Place It In Header Part)

<style type=”text/css”>

#verticalmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 180px;
padding: 0px;
margin: 0px;
}

#verticalmenu h1 {
display: block;
background-color:#658CCF;
font-size: 90%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #ffffff;
text-align:center;
margin: 0px;
width:179px;
}

#verticalmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#verticalmenu ul li a {
font-size: 80%;
display: block;
border:1px dashed #658CCF;
border-bottom: 1px dashed #658CCF;
padding: 5px 0px 2px 4px;
text-decoration: none;
text-align:center;
color: #666666;
width:178px;
}

#verticalmenu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
font-weight:bold;
letter-spacing:1px;
}

</style>

End Of Css Code

…………………………………………………………………………………………………………………………………………

HTML Code (Place This Code In Ur Body Tag)

<div id=”verticalmenu”>
<h1>MENU BAR</h1>
<ul>
<li><a href=”https://webdesigninfo.wordpress.com”>Home</a></li&gt;
<li><a href=”https://webdesigninfo.wordpress.com/about/”>About Me</a></li>
<li><a href=”https://webdesigninfo.wordpress.com/web-templates/”>Web Templates</a></li>
<li><a href=”https://webdesigninfo.wordpress.com/contact-me/”>Contact Us</a></li>
<li><a href=”https://webdesigninfo.wordpress.com”>Downloads</a></li&gt;
</ul>
</div>

End Of HTML Code

………………………………………………………………………………………………………………………………………….

At The End It Should Like This

Vertical Css Menu Bar
Download This File here

Looking for professional css menus for free then visit styledmenus.com


Creating Simple CSS Menu Bar

April 28, 2007

Easy Way To Create A Simple And Easy Css Menubar

Easy Step 1:open note pad or dream weaver or any editorial you have

if you are using editorials then copy and past this code in to ur header part if not just open note pad and place this code

______________________________________________________________

Code For Note Pad

______________________________________________________________

< html>

<title>

Creating Simple And Easy Css Menu Bar

</title>

<head>

</head>

<body>

</body >

</html>

______________________________________________________________

END OF THE CODE

______________________________________________________________

Below Code Should Be Placed In Between Head Tags

—————————————————————————————–

Code Begins Place This Code In Head Part
—————————————————————————————–
<style type=”text/css”>

.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.hovermenu ul li{
list-style: none;
display: inline;
}

.hovermenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #e1e1e1; /* You Can Change this color */
border: 2px solid #e1e1e1; /*You can change this color*/
}

.hovermenu ul li a:hover{
background-color: #e5e5e5; /*You Can Change This Color*/
border-style: outset;
}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>

—————————————————————————————–

END OF THE CODE

—————————————————————————————–

Easy Step 2: Copy And Paste This Code In Your Body Tag

______________________________________________________________

Code Begins

______________________________________________________________

<div class=”hovermenu”>
<ul>
<li><a href=”https://webdesigninfo.wordpress.com”>Home</a></li&gt;
<li><a href=”https://webdesigninfo.wordpress.com/about/”>About Me</a></li>
<li><a href=”https://webdesigninfo.wordpress.com/web-templates/”>Web Templates</a></li>
<li><a href=”https://webdesigninfo.wordpress.com/contact-me/”>Contact Us</a></li>
<li><a href=”https://webdesigninfo.wordpress.com”>Downloads</a></li&gt;
</ul>
</div>

______________________________________________________________

END OF THE CODE

______________________________________________________________

Easy Step 3: Now Save Your Files As Menu.html Or Any Other Name u Like But It Should Be .html Extenstion

Now U Can See Ur Menu Bar In Any Browser

It Should Look Like This

Css Menu Bar

Download This File here

For free css menus visit : http://www.styledmenus.com


Basic HTML and CSS Intro

April 23, 2007

hi friends,

Today will see a basic video tutorial on HTML and CSS as i got many request to my mails to place a video tutorial on basics of HTML and CSS so here is ur request friends.


Digg!


CSS Tutorial -Div Layers, Classes

April 14, 2007

This is a CSS Tutorial that will help you position an image using a div layer so go through it,div tags are more imortant in css

thanxs lifeg0eson666

Digg!