javascript - how to make the title bar fixed -
i want make title bar fixed(the bar containing profile,change password) , have created class ![when clicking on change password not take change password][1] p.pos_fixed { position:fixed; top:30px; right:5px; } not working meant , feel not good.
here code of index.html
<!doctype html> <!-- new doctype --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>home</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <section id="page" > <!-- defining #page section section tag --> <header> <!-- defining header section of page appropriate tag --> <hgroup> <h1>your logo</h1> <h3>and fancy slogan</h3> </hgroup> <nav class="clear"> <!-- nav link semantically marks main site navigation --> <ul> <li><a href="#article1">my profile</a></li> <li><a href="#article2">change password</a></li> <li><a href="#article3">navigation menu</a></li> </ul> </nav> </header> <section id="articles"> <!-- new section articles --> <!-- article 1 start --> <div class="line"></div> <!-- dividing line --> <article id="article1"> <!-- new article tag. id supplied can scrolled view. --> <h2>dr. sukant kumar nayak</h2> <div class="line"></div> <div class="articlebody clear"> <div > <div align="center" style="padding-top: 30px"> <table align="center" > <tr > </tr> </table> </div> <div style="float: left; padding-left: 50px; padding-top: 5px"> <table cellspacing="10" cellpadding="10" > <tr> <td width="200" height="30"> <b>last name</b> </td> <td> <label for="lastname">lastname</label> </td> </tr> <tr> <td height="30"> <b>first name</b> </td> <td> <label for="firstname">first name</label> </td> </tr> <tr> <td height="30"> <b>date of birth</b> </td> <td> <label for="dateofbirth">date of birth</label> </td> </tr> <tr> <td height="30"> <b>qualification</b> </td> <td> <label for="lastname">qualification</label> </td> </tr> <tr> <td height="30"> <b>registration. no.</b> </td> <td> <label for="registrationno">registration no</label> </td> </tr> <tr> <td height="30"> <b>country of registration</b> </td> <td> <label for="countryofregistration">country of registration</label> </td> </tr> <tr> <td height="30"> <b>practice name</b> </td> <td> <label for="practicename">practice name</label> </td> </tr> <tr> <td height="30"> <b>phone</b> </td> <td> <label for="phone">phone</label> </td> </tr> <tr> <td height="30"> <b>email</b> </td> <td> <label for="email">email</label> </td> </tr> </table> </div> <div style="float: right;padding-right: 50px;padding-top: 50px"> <table> <tr> <td width="160" height="30"> <b>address</b> </td> <td> <label for="address">address</label> </td> </tr> <tr> <td height="30"> <b>street</b> </td> <td> <label for="street">street</label> </td> </tr> <tr> <td height="30"> <b>city</b> </td> <td> <label for="city">city</label> </td> </tr> <tr> <td height="30"> <b>state</b> </td> <td> <label for="state">state</label> </td> </tr> <tr> <td height="30"> <b>country</b> </td> <td> <label for="country">country</label> </td> </tr> <tr> <td height="30"> <b>pin code</b> </td> <td> <label for="pincode">pin code</label> </td> </tr> <tr> <td height="30"> <b>how know?</b> </td> <td> <label for="howdoyouknow">how know</label> </td> </tr> <tr> <td height="30"> <b>comment</b> </td> <td> <label for="comments">comments</label> </td> </tr> </table> </div> </div> </div> </article> <!-- article 1 end --> <!-- article 2 start --> <div class="line"></div> <article id="article2"> <h2>change password</h2> <div class="line"></div> <div class="articlebody clear"> <figure> <a href="http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/"><img src="medical.jpg" width="620" height="340" /></a> </figure> <p><div align="center" style="padding-top: 30px"> <table cellspacing="10" cellpadding="10"> <tr> <td width="200" height="30"><h5>old password</h5></td> <td height="30"><input name="old" type="password"></td> </tr> <tr> <td height="30"><h5>new password</h5></td> <td height="30"><input name="newpsw" type="password"></td> </tr> <tr> <td height="30"><h5>confirm password</h5></td> <td height="30"><input name="confirm" type="password"></td> </tr> </table> </div> <div class="footer-bar" align="center" style="padding-top: 30px"> <table align="center" > <tr > <td width="100" align="center"><input type="submit" class="button button-submit" value="submit" /></td> <td width="100" align="center"><input type="reset" class="button button-submit" value="reset" /></td> </tr> </table> </div></p> <p></p> </div> </article> <!-- article 2 end --> <!-- article 3 start --> <div class="line"></div> <!-- article 3 end --> </section> <footer> <!-- marking footer section --> <div class="line"></div> <p>copyright 2013 - mysite.com</p> <a href="#" class="up">go up</a> <a href="www.df.com" class="by">dh</a> </footer> </section> <!-- closing #page section --> <!-- javascript includes --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="jquery.scrollto-1.4.2/jquery.scrollto-min.js"></script> <script src="script.js"></script> </body> </html> this style.css
*{ /* universal reset: */ margin:0; padding:0; } header,footer, article,section, hgroup,nav, figure{ /* giving display value html5 rendered elements: */ display:block; } body{ /* setting default text color, size, page background , font stack: */ font-size:0.825em; color:#fcfcfc; background-color:#355664; font-family:arial, helvetica, sans-serif; } /* hyperlink styles: */ a, a:visited { color:#0196e3; text-decoration:none; outline:none; } a:hover{ text-decoration:underline; } img{ border:none; } /* headings: */ h1,h2,h3{ font-family:"myriad pro","helvetica neue",helvetica,arial,sans-serif; text-shadow:0 1px 1px black; } h1{ /* logo text */ font-size:3.5em; padding:0.5em 0 0; text-transform:uppercase; } h3{ /* slogan text */ font-family:forte,"myriad pro","helvetica neue",helvetica,arial,sans-serif; font-size:2em; font-weight:normal; margin:0 0 1em; } h2{ font-size:2.2em; font-weight:normal; letter-spacing:0.01em; text-transform:uppercase; } p{ line-height:1.5em; padding-bottom:1em; } .line{ /* dividing line: */ height:1px; background-color:#24404c; border-bottom:1px solid #416371; margin:1em 0; overflow:hidden; } article .line{ /* dividing line inside of article darker: */ background-color:#15242a; border-bottom-color:#204656; margin:1.3em 0; } footer .line{ margin:2em 0; } nav{ background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8; padding:0 5px; position:absolute; right:0; top:4em; border:1px solid #fcfcfc; -moz-box-shadow:0 1px 1px #333333; -webkit-box-shadow:0 1px 1px #333333; box-shadow:0 1px 1px #333333; } /* clearfix hack clear floats: */ .clear:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* navigation styling: */ nav ul li{ display:inline; } nav ul li a, nav ul li a:visited{ color:#565656; display:block; float:left; font-size:1.25em; font-weight:bold; margin:5px 2px; padding:7px 10px 4px; text-shadow:0 1px 1px white; text-transform:uppercase; } nav ul li a:hover{ text-decoration:none; background-color:#f0f0f0; } nav, article, nav ul li a,figure{ /* applying css3 rounded corners: */ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } /* article styles: */ #page{ width:960px; margin:0 auto; position:relative; } article{ background-color:#213e4a; margin:3em 0; padding:20px; text-shadow:0 2px 0 black; } figure{ border:3px solid #142830; float:right; height:300px; margin-left:15px; overflow:hidden; width:500px; } figure:hover{ -moz-box-shadow:0 0 2px #4d7788; -webkit-box-shadow:0 0 2px #4d7788; box-shadow:0 0 2px #4d7788; } figure img{ margin-left:-60px; } /* footer styling: */ footer{ margin-bottom:30px; text-align:center; font-size:0.825em; } footer p{ margin-bottom:-2.5em; position:relative; } footer a,footer a:visited{ color:#cccccc; background-color:#213e4a; display:block; padding:2px 4px; z-index:100; position:relative; } footer a:hover{ text-decoration:none; background-color:#142830; } footer a.by{ float:left; } footer a.up{ float:right; } please tell me how that. when clicking on profile taking profile page title bar disappears , similarily change password also
put in css file
.pp { position:fixed; top: 30px; width: 944px; z-index:1; top:5px; } in body set header class pp
<header class="pp"> <!-- defining header section of page appropriate tag --> <hgroup style="float:left"> <h1>your logo</h1> <h3>and fancy slogan</h3> </hgroup> <nav class="clear"> <!-- nav link semantically marks main site navigation --> <ul> <li><a href="#articles">my profile</a></li> <li><a href="#line1">change password</a></li> <li><a href="#article3">navigation menu</a></li> </ul> </nav> </header> set line1 id class above of articale2
<div class="line" id="line1"></div>
Comments
Post a Comment