Zaloguj | Zarejestruj | FAQ
Anonymous

Margin question

+ Odpowiedz

Posty: 5 Strona 1 z 1


Margin question

przez SteveH » Wt paź 28, 2014 9:14 am

Hello

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

Kod: Zaznacz cały
.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:

Kod: Zaznacz cały
<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

Załączniki

  1. htmlNET.jpg (28.78 KiB) Pobrane 1823 razy

Avatar użytkownika

SteveH

  • Posty: 40
  • Dołączył(a): Pn lut 03, 2014 7:32 pm

Re: Margin question

przez XainPro » Cz paź 30, 2014 10:36 am

.login {
margin-left: 50px;
margin-top: 50px; }
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm

Re: Margin question

przez SteveH » Cz paź 30, 2014 9:22 pm

Thanks again, Xian!
Avatar użytkownika

SteveH

  • Posty: 40
  • Dołączył(a): Pn lut 03, 2014 7:32 pm

Re: Margin question

przez Peterson » Pt lis 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 użytkownika

Peterson

  • Posty: 11
  • Dołączył(a): Pt kwi 25, 2014 10:12 am
  • Lokalizacja: Lagos, Nigeria

Re: Margin question

przez SteveH » Pt lis 07, 2014 12:25 pm

Peterson napisał(a):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 użytkownika

SteveH

  • Posty: 40
  • Dołączył(a): Pn lut 03, 2014 7:32 pm


+ Odpowiedz

Strona 1 z 1