Hello every one ,
This is my first time i am posting my doubts in any of the web development forum.
I am a newcomer in web designing and web development …
Actually i am having some problem to design a slide down or slide toggle effect for a div area .
As i don’t know much about java script or jQuery so please any body help me to sort out my problem .
HTML CODE
<!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>Demo</title>
<!-- stylesheets -->
<link rel=“stylesheet” type=“text/css” href=“css/style.css” />
<!-- end of stylesheets -->
</head>
<body>
<!-- Body -->
<div class=“body”>
<!-- Start Of div Banner -->
<div class=“banner”>
<div id=“banner”>Section A
<p><i><b>Some Text Here !</b></i></p>
</div>
</div>
<!-- End Of div Banner -->
<!-- Login Box -->
<div class=“login”>
<div id=“left_login”>LogIn
</div>
<div id=“right_login”>
<form class=“user”>
User Name: <input type=“text” name=“firstname” />
Password: <input type=“password” name=“pwd” />
</form>
<form class=“hopin”>
<input type=“button” class=“hop” value=“Hop In”>
</form>
</div>
</div>
<!-- End Of Login Box -->
<!-- Search Box -->
<div class=“search”>
<div id=“search”>Search
</div>
</div>
<!-- End Of Search Box -->
<!-- Register Box -->
<div class=“register”>
<div id=“sign”>SignUp
</div>
</div>
<!-- End Of Search Box -->
<!-- Footer -->
<div class=“footer”>
</div>
<!-- End Of Footer -->
</div>
</body>
<!-- End Of Body -->
</html>
CSS CODE
@charset “utf-8”;
/* CSS Document */
/--------------------------------------------------------------------------
######################## Style Of Div Body #################################
---------------------------------------------------------------------------/
.body
{
position:absolute;
top:0;
left:0;
width:100%;
height:auto;
}
/---------------------------------------------------------------------------
######################### Style Of Banner Area ##############################
----------------------------------------------------------------------------/
.banner
{
width:100%;
height:180px;
background-color:#411d67;
font-family:“Eras Bold ITC”;
font-size:99px;
color:#FFF;
}
.banner p
{
font:18px normal Verdana, Geneva, sans-serif;
margin-top:-20px;
margin-left:90px;
}
#banner
{
width:100%;
height:170px;
padding:10px 0px 0px 80px;
}
/---------------------------------------------------------------------------
######################### Style Of Login Area ###############################
----------------------------------------------------------------------------/
.login
{
width:100%;
height:100px;
background-color:#feac58;
font-family:“Eras Bold ITC”;
font-size:50px;
color:#FFF;
}
#left_login
{
width:40%;
height:99px;
float:left;
text-align:center;
line-height:90px;
}
#right_login
{
width:60%;
height:99px;
float:right;
color:#000;
}
.user
{
float:left;
width:490px;
line-height:80px;
margin-top:10px;
padding-left:50px;
font-size:15px;
font-family:“Palatino Linotype”, “Book Antiqua”, Palatino, serif;
border-left:2px solid #FFF;
}
.hopin
{
float:left;
margin-top:10px;
}
.hop
{
background:#feac58;
}
#click
{
font:10px normal Georgia, “Times New Roman”, Times, serif;
margin-top:-10px;
}
/---------------------------------------------------------------------------
######################### Style Of Search Area ##############################
----------------------------------------------------------------------------/
.search
{
width:100%;
height:100px;
background-color:#d82545;
font-family:“Eras Bold ITC”;
font-size:50px;
color:#FFF;
}
#search
{
width:100%;
height:80px;
padding:15px 0px 0px 180px;
}
/---------------------------------------------------------------------------
######################### Style Of Register Area ##############################
----------------------------------------------------------------------------/
.register
{
width:100%;
height:100px;
background-color:#273c67;
font-family:“Eras Bold ITC”;
font-size:45px;
color:#FFF;
}
#sign
{
width:100%;
height:80px;
padding:15px 0px 0px 180px;
}
These are the codes which i have used in my web page and one more thing i dont want to slide the "SECTION A’ area it should be remain constant …
“NEW IDEAS WILL BE APPRECIATED”
[COLOR=#282828][FONT=proxima-nova]And Here is the link in which i have uploaded all my files …[/FONT][/COLOR]
[COLOR=#282828][FONT=proxima-nova] [/FONT][/COLOR]
[COLOR=#282828][FONT=proxima-nova]download Link -------------------- > " http://www.2shared.c…jkwcI/Demo.html " [/FONT][/COLOR]
