Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Editing Website

Posted on 2013-06-27
13
Medium Priority
?
217 Views
Last Modified: 2013-07-01
Hi

I have a problem on my website & i was hoping you would help me remove it because i do not know how. My website is (www.a1telecomms.za). There is an area where a client can log into their account using a username & password combination - however i want to separate the white tick square block from the submit button as to they are too close to each other  - therefore touching, how do i separate this??

TX
0
Comment
Question by:shaunwingin
  • 5
  • 4
  • 2
  • +1
13 Comments
 
LVL 42

Assisted Solution

by:Meir Rivkin
Meir Rivkin earned 500 total points
ID: 39280621
look for
<input name="Submit" class="button" type="submit" value="Login" />

and add this attribute:
style="margin-left: 10px;"

so u ended up:
<input name="Submit" class="button" type="submit" value="Login" style="margin-left: 10px;"/>

Open in new window

0
 
LVL 4

Expert Comment

by:ramyajanarthanan
ID: 39280858
Unable to view the link..
0
 

Author Comment

by:shaunwingin
ID: 39280914
sedgwick - Where can i find that code??


 ramyajanarthanan - Try just tying http://a1telecomms.co.za/
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 44

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 1000 total points
ID: 39280918
I would float the button right so it lines up with the Username and Password box. You would also need to remove the right margin for it to work properly.

You can do this within your CSS stylesheet (preferred):

#k2ModuleBox110 input.button { float:right; margin-right:0px; }

Open in new window

or inline:

<input type="submit" value="Login" class="button" name="Submit" style="float:right;margin-right:0px">

Open in new window

@ramyajanarthanan - the address is http://www.a1telecomms.co.za/
0
 

Author Comment

by:shaunwingin
ID: 39281251
ChrisStanyon - Thanks, either one of those two??
0
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 39281273
Both will achieve the same result, but keeping your CSS in an external stylesheet is preferred. As soon as you start littering your HTML files will CSS, it becomes a maintenance nightmare!
0
 
LVL 42

Expert Comment

by:Meir Rivkin
ID: 39281311
better use separate css, it will be easier to maintain without touching the actual html.
0
 
LVL 4

Assisted Solution

by:ramyajanarthanan
ramyajanarthanan earned 500 total points
ID: 39283724
Try this

<input class="button" type="submit" style="margin: 0 0 0 21px;" name="Submit" value="Login">

Open in new window

0
 

Author Comment

by:shaunwingin
ID: 39289802
Hi Guys,

This is my CSS Code - unfortunately i dont know which code to replace with the one you gave me. Please see code below:  TX,

/* LOGIN -----------------------------------------*/

#login-form p {
  margin-top: 5px;
}

.ct_loginHelpers {
  display: inline-block;
  margin-left: 0;
  padding-left: 21px;
  list-style: outside;
  list-style-image: url(../images/ul_arrow.png);
}

.ct_loginHelpers li {
  width: 100%;
}

.ct_loginHelpers li a {
  font-weight: bold;
  font-size: 12px;
  text-decoration: none;
}

#form-login-remember {
  display: block;
}

#form-login-remember label,
#form-login-remember input {
  float: left;
}

#form-login-remember label {
  line-height: 19px;
}

#form-login-remember input {
  clear: right;
}

#login-form .button {
  float: left;
  clear: left;
  margin-top: 10px;
  display: inline-block;
}

.login-fields {
  margin-bottom: 10px;
}

.login .button {
  margin-top: 5px !important;
}

.logout-button .button {
  margin: 0 !important;
  float: none !important;
}

.login-greeting {
  height: 25px;
  font-size: 14px;
  padding-top: 5px;
  margin-right:15px;
}

/* COMPACT VERSION FOR HEADER */

#login-form.compact,
#login-form.compact fieldset
{
  width: auto;
}

#login-form.compact p {
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  float: left;
  display: inline-block;
}

#login-form.compact #form-login-username label,
#login-form.compact #form-login-password label,
#login-form.compact #form-login-remember,
#login-form.compact .ct_loginHelpers
{
  display: none;
}

#login-form.compact input[type="text"],
#login-form.compact input[type="password"]
{
  width: 120px;
  height: 25px;
  margin-right:5px;
  padding-left: 7px;
}

#login-form.compact .button,
#ct_headerLogin input.button
{
  margin: 0;
  float: left;
  display: inline-block;
  margin:0 !important;
  text-indent: -9999px;
  overflow: hidden;
  width: 33px;
  padding: 0;
  padding-bottom: 1px;
  background-position: right;
  background-repeat: no-repeat;
}

#ct_headerLogin .login-greeting,
#ct_headerLogin .logout-button
{
  float:left;
}

#login-form.compact .button
{
  float: none;
  clear: none;
  margin-top: 0;
}

/*-----------------*/
0
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 39289816
Don't replace anything - just add it to the end of your CSS file:

#form-login input.button { float:right; margin-right:0px; }

Open in new window

0
 

Author Comment

by:shaunwingin
ID: 39289862
Great!

It has worked when i view via Mozilla Firefox Webrower & Internet Explorer BUT not Google Chrome - which happens to be my main browser that i use to operate. What could be the problem? I have attempted to clear cache but i can't find it - the only setting that i saw close to "clear cache" is clear browsing data - is that another wording for it??
0
 
LVL 44

Accepted Solution

by:
Chris Stanyon earned 1000 total points
ID: 39289867
clear cache / browser data is the same thing.

just checked in chrome and it looks good - the same as firefox :)
0
 

Author Comment

by:shaunwingin
ID: 39289875
Nevermind - it has worked.

Thank You!!!!!!!!!!!!!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

783 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question