No replies
jakeoh
Offline
newbie
Last seen: 6 years 25 weeks ago
Joined: 2008-05-07
Posts: 1
Points: 0

Hi,

I'm quite a newbie regarding CSS, I used to design everything with tables. For a new project, I am trying to do everything with CSS. So far so good, but I'm having difficulty with this one. I have a login bar that I want to reproduce in CSS, but I'm having problems. You can see the image in attachment.

The code I have so far is as follows:

You'll notice the elements are in reversed order; that's the only way I found to display them in order when floating right.

and in the CSS;

#loginBar{ width:100%; height:17px; padding:6px 14px 0px 0px; float:left; background-image: url(http://www.beta.mespe*beep*.com/images/bande_login.gif); background-repeat: no-repeat; text-align:right; } div.login_label { float:right; position:relative; top:-5px; font-weight:bold; margin: 4px 4px 0 0; padding: 0 0 0 0; }

div.login_input {
float:right;
position:relative;
top:-5px;
margin: 0 4px 0 0;
padding: 0 0 0 0;
}

div.login_input input
{
font-size: 9px;
background: #F7F4EC;
border: 1px solid #534A3D;
padding: 2px;
color:#999999;
margin-bottom: 6px;
}

div.login_button {
float:right;
position:relative;
top:-5px;
width: 50px;
margin: 0 0 0 0;
padding: 0 14px 0 0;
}

With this code, the login bar looks okay but the problem is that because of the reverse order in the form, then when using the TAB button, the navigation is screwed up.

Any advice or alternate way to achieve this layout?

AttachmentSize
login.jpg5.13 KB