Download pure css horizontal menus in 6 colors click here for demo (click on images to download particular menu) works in all browsers.
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.
30 Comments | 
Css, Dream Weaver, HTML, Web Designing | Tagged: css menu, css menubars, horizontal css menus, slide door menus, web 2.0 menus | 
Permalink
Posted by santosh setty
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″ width=”48px” height=”48px” border=”0″ /><span><img src=”http://www.stumbleupon.com/mainpics/2725502.jpg” /></span></a>
Browser Support: it works in all browsers.
Download this file
33 Comments | Css, Dream Weaver, HTML | Permalink
Posted by santosh setty
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>
<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>
</ul>
</div>
End Of HTML Code
………………………………………………………………………………………………………………………………………….
At The End It Should Like This
Download This File here
Looking for professional css menus for free then visit styledmenus.com
Leave a Comment » | Css, Dream Weaver, HTML | Permalink
Posted by santosh setty
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>
<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>
</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
Download This File here
For free css menus visit : http://www.styledmenus.com
7 Comments | Css, Dream Weaver, HTML | Permalink
Posted by santosh setty
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.
Leave a Comment » | Css, HTML | Permalink
Posted by santosh setty
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
You are currently browsing the archives for the Css category.
