Web Design HTML Basics

July 3, 2007

Learn Web Design HTML Basics

First Video

Second Video


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


Embedding a video in to a web page using Dreamweaver

May 20, 2007

This tutorial shows you how to embed a video in to a web page using dreamweaver 8

thanxs robotboy92


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


Define Local Root/Site Folder In Dream Weaver

May 10, 2007

Learn how to Define the Local Root folder, sometimes called the Local Site folder. Defining a “Site” in Dreamweaver is the best way to start building your websites, so watch, learn, and have fun!

thanxs tutvid


Simple Website with Dreamweaver 8

April 29, 2007

Learn how to create a very simple website in Dream Weaver 8.


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