Wanting to change Vertical Login to Horizontal Login

HTML & CSS
1

I am wanting to remove the vertical sidebar Login, and place it Horizontally under my Top Nav Bar.

you can see my test/demo I am working with here: dating-asian-singles.com

I have the Login code placed below the Top Nav Bar, But can not align in Horizontally using CSS

all help appreciated :slight_smile:

<div id="toplogin_wrap">
            <div id="toploginnav">
            <h5><span>{lang:"core","login_header"}</span></h5>
                <form method="post" name="login" action="{virtual_path}{ifelse:settings.fancy_urls,"1","account/login/","index.php?m=account_login"}">
                    
                            <dt><label for="loginbox_username">{lang:"core","login_username"}</label></dt>
                            <dd><input id="loginbox_username" maxlength="64" size="10" type="text" name="username" value="" class="text username" /></dd>
                            <dt><label for="loginbox_password">{lang:"core","login_password"}</label></dt>
                            <dd><input id="loginbox_password" maxlength="32" size="10" type="password" name="password" value="" class="text password" /></dd>
                            <dt><label for="loginbox_nonxpcookie"><input type="checkbox" name="nonxpcookie" value="1" class="checkbox" id="loginbox_nonxpcookie" /> {lang:"core","login_remember_me"}</label></dt>
                            <dd class="submit"><input type="submit" name="login" value="{lang:"core","login_submit"}" class="submit" /></dd>
                        
                    <input type="hidden" name="islogin" value="1" />
                    <div class="lostpass">{anchor:url1="account/lostpass/",url2="index.php?m=account_lostpass",name="core|login_forgot_pass"}</div>
                </form>
            
        </div>
2

Ray, it might be best if you post a link to your site. We cannot do much without the CSS that goes with the HTML. I pasted your HTML code in an HTML page and this is what I see. Not sure what it is supposed to look like:

900Ă—290 8.96 KB

3

Hello ronpat,

Thank you for your fast reply,

4

I wish that were the first time I’ve done that. :sigh:

5

We have all done it :slight_smile: your help greatly appreciated

6

CSS that I am using:

/* ********** [ TOP NAV LOGIN ] ********** */

div#toplogin_wrap {
    margin: 0px auto;
    width: 1010px;
    height: 36px;
    background: #ffffff; }

    div#toploginnav {
        margin: 0px auto;
        width: 940px;
        padding-left: 8px; }

EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.

7

This is unstyled. Give it a quick double-click and see if you think you can style it to suit your needs. If you need more help, you have my attention .

<!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 charset="utf-8">
    <title>template</title>
<!--
http://www.sitepoint.com/community/t/wanting-to-change-vertical-login-to-horizontal-login/116534
RayWilk
-->
    <style type="text/css">
label {display:inline-block;}
.lostpass {display:inline-block;}
    </style>
</head>
<body>

<div id="toplogin_wrap">
    <div id="toploginnav">
    <h5><span>Member login</span></h5>
        <form method="post" name="login" action="http://www.dating-asian-singles.com/index.php?m=account_login">
            <label for="loginbox_username">Username or email
                <input id="loginbox_username" maxlength="64" size="10" type="text" name="username" value="" class="text username" />
            </label>
            <label for="loginbox_password">Password
                <input id="loginbox_password" maxlength="32" size="10" type="password" name="password" value="" class="text password" />
            </label>
            <label for="loginbox_nonxpcookie"><input type="checkbox" name="nonxpcookie" value="1" class="checkbox" id="loginbox_nonxpcookie" /> Remember me?
                <input type="submit" name="login" value="Login" class="submit" />
            </label>
            <input type="hidden" name="islogin" value="1" />
            <div class="lostpass"><a href="http://www.dating-asian-singles.com/index.php?m=account_lostpass" title="Forgot password?">Forgot password?</a></div>
        </form>         
    </div>
</div>

</body>
</html>
8

Wow! Fantastic! Thank you ronpat :smile:

Looks great … but! I almost hesitate to ask more from you, if you look at the site you will see that the “Member Login” text sits above rather than to the left.

how to align it with the rest?

9

How about this:

fieldset {display:inline-block;}

<form ... >
    <fieldset>Member Login</fieldset>
    <label for="loginbox_username">Username or email
    ...
10

Thank you ronpat :slight_smile: yes perfect alignment now.

I am also wanting to stop this Login Bar displaying once Loggedin

I tried <!– IF loggedin == "0" –> before <body> and <!-- ENDIF --> after </body>

As the script uses these to display, or not display menus through the site,

But no it does not like my code.

11

There are a couple of significant stray tags on the page…
(line 41) has a stray <body> tag, and
(line 60) has a stray </body> tag.

Someone else will have to help with any scripts.

12

Hi ronpat, oh yes that is me copying across your code including the <body> tags … newby :slight_smile:

Ok <body> tags removed, yet still displaying when Loggedin

13

Ray, I don’t see anything now except a page with two divs both of which are assigned {display:none;}.

I’m going to bed now (it`s 4am my time). Someone else will chip in and help with your script/code needs.

14

Hello ronpat, ok yes understand, happy dreams, many thank yous for all your help :smile:

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.