התחבר | הרשמה | שאלות נפוצות
Anonymous

Margin question

+ פרסם תגובה

5 הודעות עמוד 1 מתוך 1


Margin question

על ידי SteveH » ג' אוקטובר 28, 2014 9:14 am

Hello

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

קוד: בחר הכל
.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:

קוד: בחר הכל
<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

קבצים מצורפים

  1. htmlNET.jpg (28.78 KiB) הורד 2323 פעמים

סמל אישי של המשתמש

SteveH

  • הודעות: 40
  • הצטרף: ב' פברואר 03, 2014 7:32 pm

Re: Margin question

על ידי XainPro » ה' אוקטובר 30, 2014 10:36 am

.login {
margin-left: 50px;
margin-top: 50px; }
סמל אישי של המשתמש

XainPro

  • הודעות: 3933
  • הצטרף: ו' פברואר 17, 2012 8:10 pm

Re: Margin question

על ידי SteveH » ה' אוקטובר 30, 2014 9:22 pm

Thanks again, Xian!
סמל אישי של המשתמש

SteveH

  • הודעות: 40
  • הצטרף: ב' פברואר 03, 2014 7:32 pm

Re: Margin question

על ידי Peterson » ו' נובמבר 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.
סמל אישי של המשתמש

Peterson

  • הודעות: 11
  • הצטרף: ו' אפריל 25, 2014 10:12 am
  • מיקום: Lagos, Nigeria

Re: Margin question

על ידי SteveH » ו' נובמבר 07, 2014 12:25 pm

Peterson כתב: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
סמל אישי של המשתמש

SteveH

  • הודעות: 40
  • הצטרף: ב' פברואר 03, 2014 7:32 pm


+ פרסם תגובה

עמוד 1 מתוך 1