Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Placing a button precisely?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 24, 2014 at 12:47 pm #168606
    Everton
    Participant

    Hello

    Where would I best start, please, to incorporate the following short script for a log-in button into my page here:

    Main page

    I am looking to place the log-in button alongside the RSS icon. I have stripped the code of meta tags and server side script for ease of reading:

    `<link rel="stylesheet" href="css/style1.css" />

<body>

    <div id="bar">

         <div id="container">

            <div id="loginContainer">

                 <a href="#" id="loginButton"><span>Login</span></a>

                   <div style="clear:both"></div>

                      <div id="loginBox">

<form id="loginForm" method="post" action="submit1.asp">

<fieldset id="body">

<fieldset><label for="UserID">Username</label>

<input type="text" name="UserID" id="UserID" />

</fieldset>


<fieldset><label for="Password">Password</label>

<input type="Password" name="Password" id="Password" />

</fieldset>

<input type="submit" name="Login" id="Login" value="Login" />

<label for="checkbox"><input type="checkbox" id="checkbox" name="checkbox" value="checkbox"  />Remember me</label>

</fieldset>

</form>   
                </div>
            </div>
           </div>

    </div>
</body>`

    Thank you for any pointers.

    Everton

    April 24, 2014 at 2:03 pm #168625
    Everton
    Participant

    Hello shaneisme

    Many thanks for getting back to me.

    I’ll try that and post back!

    April 24, 2014 at 2:22 pm #168627
    Everton
    Participant

    OK, so now I have this in my <head> tag:

    <style type="text/css">
.list-inline {
  list-style: none;
}

.list-inline > li {
  display: inline-block;
}
</style>

    And this in <body>

    <ul class="list-inline">

<li><img id="picright1" src="images/facebook.png" width="64" height="64" alt="Facebook" /></li>
<li><img id="picright2" src="images/twitter.png" width="56" height="56" alt="Twitter" /></li>
<li><img id="picright3" src="images/rss.png" width="56" height="56" alt="Rss" /></li>
</ul>

    I would normally just add another small image to that list, but the log-on button here Button is not an image as such.

    So at the moment, I have that list-inline style that you kindly posted in my <head> tags followed by:

    <div id="bar">
        <div id="container">
            <!-- Login Starts Here -->
            <div id="loginContainer">
                <a href="#" id="loginButton"><span>Login</span></a>
                <div style="clear:both"></div>
                <div id="loginBox">                
                    
<form id="loginForm" method="post" action="submit1.asp">

<fieldset id="body">

<fieldset>
<label for="UserID">Username</label>

<input type="text" name="UserID" id="UserID" />

</fieldset>
                            
<fieldset>
<label for="Password">Password</label>
<input type="Password" name="Password" id="Password" />
</fieldset>

<input type="submit" name="Login" id="Login" value="Login" />

<label for="checkbox"><input type="checkbox" id="checkbox" name="checkbox" value="checkbox"  />Remember me</label>
</fieldset>

<span><a href="http://www.bayingwolf.com/Dima_Login/password1.asp">Forgot your password?</a></span>
</form>

                </div>
            </div>
            <!-- Login Ends Here -->

 <% If Session( "loginFailure" ) = True Then %>

<div class="center">
<p><span style="color:#BD2CBB;">Invalid password</span></p>

<p>Click <a href="password1.asp">here</a> to request your password</p>

</div>                                     
             <% End If %>

        </div>

    </div>

<div id="main"> 
<div id="site_content">
<div id="site_heading">
<div id="logo">
<div id="logo_text0">
<!-- class="logo_colour", allows you to change the colour of the text -->

<h1>dima <span class="logo_colour">dayoub</span></h1>

<ul class="list-inline">

<li><img id="picright1" src="images/facebook.png" width="64" height="64" alt="Facebook" /></li>
<li><img id="picright2" src="images/twitter.png" width="56" height="56" alt="Twitter" /></li>
<li><img id="picright3" src="images/rss.png" width="56" height="56" alt="Rss" /></li>
</ul>

</div>

</div>
</div><!--close site_heading-->
    April 24, 2014 at 5:57 pm #168633
    Everton
    Participant

    Hello shaneisme

    Thanks again for your help.

    I now have this: <li><a><span>Login</span></a></li> as part of my unordered list and if I click on the button at the top it produces the drop-down form as it should, so thanks for that (the log-in button to the right is redundant).

    However, it seems to have dislodged other items on the page including the background image, and the button appears twice. It seems to be getting quite complicated!

    The page is here if you don’t mind taking a look:
    <a href="http://www.bayingwolf.com/DimaWeb/index1.asp" title="Here">Here</a>

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.