how to make the title bar fixed

Raziel25 · Apr 9, 2013

i want to make the title bar fixed(the bar containing my profile,change password) and so for that i have created a class\[code\]p.pos_fixed{position:fixed;top:30px;right:5px;}\[/code\]but it is not working well i meant to say that the look and feel is not good.here is my code of index.html\[code\]<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>home</title> <link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/15894997/styles.css" /> </head> <body> <section id="page" >  <header>  <hgroup> <h1>Your Logo</h1> <h3>and a fancy slogan</h3> </hgroup> <nav class="clear">  <ul> <li><a href="http://stackoverflow.com/questions/15894997/#article1">My Profile</a></li> <li><a href="http://stackoverflow.com/questions/15894997/#article2">Change password</a></li> <li><a href="http://stackoverflow.com/questions/15894997/#article3">Navigation Menu</a></li> </ul> </nav> </header> <section id="articles">   <div class="line"></div>  <article id="article1">  <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 do you know?</b> </td> <td> <label for="HowDoYouKnow">How Do You 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>   <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="http://stackoverflow.com/questions/15894997/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="http://stackoverflow.com/questions/15894997/Submit" /></td> <td width="100" align="center"><input type="reset" class="button button-submit" value="http://stackoverflow.com/questions/15894997/Reset" /></td> </tr> </table> </div></p> <p></p> </div> </article>   <div class="line"></div>  </section> <footer>  <div class="line"></div> <p>Copyright 2013 - mysite.com</p> <a href="http://stackoverflow.com/questions/15894997/#" class="up">Go UP</a> <a href="http://stackoverflow.com/questions/15894997/www.df.com" class="by">dh</a> </footer> </section>   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="http://stackoverflow.com/questions/15894997/jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script> <script src="http://stackoverflow.com/questions/15894997/script.js"></script> </body></html>\[/code\]this is the style.css\[code\]*{ /* Universal reset: */ margin:0; padding:0;}header,footer,article,section,hgroup,nav,figure{ /* Giving a display value to the HTML5 rendered elements: */ display:block;}body{ /* Setting the default text color, size, page background and a 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;}a img{ border:none;}/* Headings: */h1,h2,h3{ font-family:"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif; text-shadow:0 1px 1px black;}h1{ /* The logo text */ font-size:3.5em; padding:0.5em 0 0; text-transform:uppercase;}h3{ /* The 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{ /* The dividing line: */ height:1px; background-color:#24404c; border-bottom:1px solid #416371; margin:1em 0; overflow:hidden;}article .line{ /* The dividing line inside of the article is 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;}/* The clearfix hack to clear the floats: */.clear:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}/* The 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;}\[/code\]please tell me how to do that.when i am clicking on my profile it is taking to the my profile page but the title bar disappears and similarily for the change password also

how to make the title bar fixed

Raziel25

New Member