Web Technologies

Thursday, April 7, 2011

Web Technologies: Horizontal Menu with Subnav w/ CSS & jQuery

Web Technologies: Horizontal Menu with Subnav w/ CSS & jQuery: "Great Menu with sub-menu using jQuery <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xh..."

Web Technologies: Play MOV file in your HTML

Web Technologies: Play MOV file in your HTML: " Someone asked me today how we can play MOV file. Below is the code. Enjoy! <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transi..."

Play MOV file in your HTML

Someone asked me today how we can play MOV file. Below is the code.

Enjoy!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="256" width="320">

<param name="src" value="http://ia600407.us.archive.org/10/items/gspmovvideotestIMG0021mov/IMG_0021.mov">
<param name="autoplay" value="true">
<param name="type" value="video/quicktime" height="256" width="320">

<embed src="http://ia600407.us.archive.org/10/items/gspmovvideotestIMG0021mov/IMG_0021.mov" height="256" width="320" autoplay="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/">

</object>
</body>
</html>

Download the code from here:

http://bestwebpartners.com/BlogData/video.html

Web Technologies: Horizontal Menu with Subnav w/ CSS & jQuery

Horizontal Menu with Subnav w/ CSS & jQuery

Great Menu with sub-menu using jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu 3</title>
<style type="text/css">
body {
    font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
h1 {
    font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
    color: #333;
    margin: 0;
    padding: 5px 0;
}
h1 small {
    font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    letter-spacing: 1.5em;
    display: block;
    color: #fff;
}
.container {
    width: 970px;
    margin: 0 auto;
}
ul#topnav {
    margin: 0;
    padding: 0;
    float: left;
    width: 970px;
    list-style: none;
    position: relative;
    font-size: 1.2em;
    background: url(topnav_stretch.gif) repeat-x;
}
ul#topnav li {
    float: left;
    margin: 0;
    padding: 0;
    border-right: 1px solid #555;
}
ul#topnav li a {
    padding: 10px 15px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
}
ul#topnav li:hover {
    background: #1376c9 url(topnav_active.gif) repeat-x;
    text-decoration:blink;

}
ul#topnav li span {
    float: left;
    padding: 15px 0;
    position: absolute;
    left: 0;
    top:35px;
    display: none;
    width: 970px;
    background: #DDCCCC;
    color: #000000;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span {
    display: block;
    font-weight:bold;
    color: #000000;
}
ul#topnav li span a {
    display: inline;
}
ul#topnav li span a:hover {
    color: #000000;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item
    $(this).css({ 'background' : '#DDCCCC url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
    $(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
    $(this).css({ 'background' : 'none'}); //Ditch the background
    $(this).find("span").hide(); //Hide the subnav
});

$("ul#topnav li a").hover(function() { //Hover over event on list item
    $(this).css({ 'color' : '#000000' });
} , function() { //on hover out...
    $(this).css({ 'color' : '#f0f0f0' });
});

});
</script>
</head>

<body>
<div class="container">
<h1>Horizontal Menu with Subnav w/ CSS & jQuery</h1>
<ul id="topnav">
    <li> <a href="#">Home</a></li>
    <li> <a href="#">About</a> <span> <a href="#">The Company</a> | <a href="#">The Team</a> | <a href="#">Careers</a> </span> </li>
    <li> <a href="#">Services</a> <span> <a href="#">What We Do</a> | <a href="#">Our Process</a> | <a href="#">Testimonials</a> </span> </li>
    <li> <a href="#">Portfolio</a> <span> <a href="#">Web Design</a> | <a href="#">Development</a> | <a href="#">Identity</a> | <a href="#">SEO & Internet Marketing</a> | <a href="#">Print Design</a> </span> </li>
    <li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>

Sunday, April 3, 2011

Web Technologies: CSS Div, style and Div layout

Web Technologies: CSS Div, style and Div layout: "If you learning HTML and building table is very easy but tables are not as good for search engines as Div Tags are. Div - is a block of HTM..."

CSS Div, style and Div layout

If you learning HTML and building table is very easy but tables are not as good for search engines as Div Tags are.

Div - is a block of HTML and data to be displayed.
Table is created to display mainly TEXT and in fewer cases images also.

DIV is floating type, however Table is Fixed type.

I am really recommending to use Div Tag only!

Below is a little example on creating Main Header div and 3 divs inside:

HTML Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Questions And Answers</title>
<link href="css/aANDq.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="TopDiv" id="TopDiv">
<div class="leftDiv" id="leftDiv">Content for class "leftDiv" id "leftDiv" Goes Here</div>
<div class="centerDiv" id="centerDiv">Content for class "centerDiv" id "centerDiv" Goes Here</div>
<div class="rightDiv" id="rightDiv">Content for class "rightDiv" id "rightDiv" Goes Here</div>
</div>
</body>
</html>

And style.aANDq.css - style sheets file

@charset "utf-8";
#TopDiv {
    position:relative;
    border: 1px solid red;
    width:100%;
    height:150px;
    margin:0px auto;
    max-width:1024;
}
#leftDiv, #rightDiv, #centerDiv {
    position: absolute;
    border: 1px solid red;
}
#leftDiv {
    top:10px;
    left: 10px;
    bottom: 10px;
    width:200px;
}
#centerDiv {
    text-align:center;
    left:220px;
    right:220px;
    top:10px;
    bottom: 10px;
}
#rightDiv {
    top:10px;
    right: 10px;
    bottom: 10px;
    width:200px;
}