Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    64
    Thanks
    0
    Thanked 1 Time in 1 Post

    Login Box, Top of header positioning

    I would like to add either a "If you already have an application Sign In" Or a simple login at the top. Floating it right and giving it margin-top seems to work in everything but IE ( haven't checked 7 ) Here's my approach what should i modify

    XHTML
    Code:
    	<div id="header">
    	  <div id="login">Login Goes Here</div>
    		<div id="nav_container">	
    		<ul id="nav">
    			<li id="nhome"><a class="selected" href="#">Home</a></li>
    			<li id="npurch"><a href="#">Home Purchase</a></li>
    			<li id="nrefi"><a href="#">Refinance</a></li>
    			<li id="nequity"><a href="#">Equity</a></li>
    			<li id="nbeta"><a href="#">Beta</a></li>
    		</ul>	
    		</div>
    	</div><!--end header-->
    Here's the pertaining CSS..

    Code:
    #header{
    	width:800px;
    	height: 120px;
    	background: url(../images/header_BG.jpg) no-repeat;
    	}
    
    #login{
    	float:right;
    	margin-top: 45px;
    	margin-right: 10px;
    	}
    #nav_container {padding-top: 90px; padding-left: 20px;}
    #nav {margin: 0; padding: 0;height: 30px;list-style: none;display: inline;overflow: hidden; border:none;}
    #nav li {margin: 0;padding: 0; list-style: none;display: inline;}
    #nav a {float: left;padding: 30px 0 0 0;overflow: hidden; border:none; height: 0px !important; height /**/:30px;}	
    #nav a:hover {background-position: 0 -30px;}
    #nav a.selected {background-position: 0 -60px;}
    #nhome a  { width: 72px; background: url(../images/TAB_home.jpg) top left no-repeat;}/*the other tabs follow suit*/

    The tabbing goes across the bottom of the header... In IE it displays all the tabs properly except the #login pushes all the tabs on the left side down... I understand what is causing it, I am unsure how to fix, or a better way to mark it up..

    Thanks
    Last edited by jayemvee; 01-27-2007 at 08:57 PM.
    No trees were harmed in the transmission of this message.
    However, a rather large number of electrons were temporarily
    inconvenienced.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •