Solved

Editing Website

Posted on 2013-06-27
13
210 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:sedgwick
sedgwick earned 125 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
 
LVL 42

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 250 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 42

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 42

Expert Comment

by:sedgwick
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 125 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 42

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 42

Accepted Solution

by:
Chris Stanyon earned 250 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

Easy Project Management (No User Manual Required)

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

744 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now