Entrar | Registrar | FAQ
Anonymous

Margin question

+ Postar uma resposta

5 Mensagens Página 1 de 1


Margin question

por SteveH » Ter Out 28, 2014 9:14 am

Hello

I have two links at the top of a page. The CSS looks like this:

Código: Selecionar tudo
.register, .login {
        color: #ffffff;
        float: left;
        font-family: 'Droid Sans', 'Trebuchet MS', Arial, sans-serif;
        font-size: 14px;
        }

    .register {
        margin-left: 200px;
        margin-top: 50px;
        }

    .login {
        margin-left: 230px;
        margin-top: 50px;


and the HTML for the two links is:

Código: Selecionar tudo
<div class="register"><a href="Register.aspx">Register</a></div>
<div class="login"><a href="Login.aspx">Login</a></div>


The two links are NOT in a list. The two links are on the same horizontal level (both 50px from the top), and one link, 'Register' is 200px from the left while the other link, 'Login', is 230px from the left. However, this is what I can see on the Web page (please see screenshot).

I am happy with the placement of the 'Register' link, but how can I narrow the distance between both links, please?

Thank you.

Steve

Anexos

  1. htmlNET.jpg (28.78 KiB) Baixado 2329 vezes

Avatar de usuário

SteveH

  • Mensagens: 40
  • Data de registro: Seg Fev 03, 2014 7:32 pm

Re: Margin question

por XainPro » Qui Out 30, 2014 10:36 am

.login {
margin-left: 50px;
margin-top: 50px; }
Avatar de usuário

XainPro

  • Mensagens: 3933
  • Data de registro: Sex Fev 17, 2012 8:10 pm

Re: Margin question

por SteveH » Qui Out 30, 2014 9:22 pm

Thanks again, Xian!
Avatar de usuário

SteveH

  • Mensagens: 40
  • Data de registro: Seg Fev 03, 2014 7:32 pm

Re: Margin question

por Peterson » Sex Nov 07, 2014 11:09 am

better still use convert the div's to ul's and float the li's to the left, then apply your margin's just like this:
The HTML
<ul>
<li> <a href="(your login link)"> Login </a> </li>
<li> <a href="(your register link)"> Register </a> </li>
</ul>

The CSS
* {
margin:0;
padding:0;
}

ul {
margin:0;
padding:0;
}
ul li {
float:left;
margin-right:5px;
}

ul li a {
/* Apply your custom anchor links style-rules here */
}


I hope this solves your problem, besides this is the best option and it can save you a lot of trouble, its more semantic and very clean.
Avatar de usuário

Peterson

  • Mensagens: 11
  • Data de registro: Sex Abr 25, 2014 10:12 am
  • Localização: Lagos, Nigeria

Re: Margin question

por SteveH » Sex Nov 07, 2014 12:25 pm

Peterson escreveu:better still use convert the div's to ul's and float the li's to the left, then apply your margin's just like this:
The HTML
<ul>
<li> <a href="(your login link)"> Login </a> </li>
<li> <a href="(your register link)"> Register </a> </li>
</ul>

The CSS
* {
margin:0;
padding:0;
}

ul {
margin:0;
padding:0;
}
ul li {
float:left;
margin-right:5px;
}

ul li a {
/* Apply your custom anchor links style-rules here */
}


I hope this solves your problem, besides this is the best option and it can save you a lot of trouble, its more semantic and very clean.


Thank you for your reply.

I tried the code but it distorted the image slider that I have next to the Register and Login links, so I have left it the way it is.

Thanks again.

Steve
Avatar de usuário

SteveH

  • Mensagens: 40
  • Data de registro: Seg Fev 03, 2014 7:32 pm


+ Postar uma resposta

Página 1 de 1