Zaloguj | Zarejestruj | FAQ
Anonymous

Greater space between links?

+ Odpowiedz

Posty: 10 Strona 1 z 1


Greater space between links?

przez SteveH » Pn wrz 22, 2014 10:08 am

Hello

I have these two links at the top of my Web page (screenshot attached).

How would I increase the space between those two links, please, just to separate them a little? They are in a <UL> tag as follows in an ASP.NET project:

Kod: Zaznacz cały
<style>

a.link_white {
    color: #ffffff;
    font-size: 1.0em;
    font-weight: normal;
    text-decoration: none;
   }

a.link_white:hover {
    color: #ffffff;
    font-size: 1.0em;
    font-weight: normal;
    text-decoration: underline !important;
}
</style>

<a runat="server" class="link_white" href="~/Account/Register">Register</a>
                               
<a runat="server" class="link_white" href="~/Account/Login">Log-in</a>
                             
</ul>


I wasn't sure whether to use the CSS line-height attribute, or maybe padding, but if anyone can help out, I would be grateful.

Thank you!

Załączniki

  1. Spacing.jpg (8.56 KiB) Pobrane 1524 razy

Avatar użytkownika

SteveH

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

Re: Greater space between links?

przez XainPro » Pn wrz 22, 2014 11:14 am

use css margin option

ul { margin:10px; }
Avatar użytkownika

XainPro

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

Re: Greater space between links?

przez SteveH » Pn wrz 22, 2014 11:31 am

XainPro napisał(a):use css margin option

ul { margin:10px; }


Hello

Thank you for your reply.

Yes, with margin: 10px; those two links are now better separated!

However, what I have noticed is that I cannot move the two links into the centre of that purple bar. If I add margin-top or padding-top (10px or 50px just to test it), it has no effect on the text positioning.

This is the code I have now (with the 10px margin you kindly suggested):

Kod: Zaznacz cały
a.link_white {
    color: #ffffff;
    font-size: 1.0em;
    font-weight: normal;
    text-decoration: none;
    margin: 10px;
    /*padding: 10px;*/
    padding-top: 50px;
   
}

a.link_white:hover {
    color: #ffffff;
    font-size: 1.0em;
    font-weight: normal;
    text-decoration: underline !important;
    margin: 10px;
    /*padding: 10px;*/
    padding-top: 50px;


and this is how it looks (attached screenshot).

Thanks again.

Załączniki

  1. Spacing1.jpg (7.72 KiB) Pobrane 1503 razy

Avatar użytkownika

SteveH

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

Re: Greater space between links?

przez XainPro » Pn wrz 22, 2014 11:56 am

use separate margins

margin-top:
margin-left:
margin-bottom:
margin-right:


etc
Avatar użytkownika

XainPro

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

Re: Greater space between links?

przez XainPro » Pn wrz 22, 2014 11:57 am

or you can use padding as well
use
padding-left : 15px;
etc
Avatar użytkownika

XainPro

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

Re: Greater space between links?

przez SteveH » Pn wrz 22, 2014 12:35 pm

Hello

Thanks again for your reply.

When I use this:

[code]<style>

a.link_white {
color: #ffffff;
font-size: 1.0em;
font-weight: normal;
text-decoration: none;
/*margin: 10px;*/
/*padding: 10px;*/
padding-top: 20px;

margin-top: 20px;
margin-left: 10px;
margin-bottom: 10px;
margin-right: 10px;

}

a.link_white:hover {
color: #ffffff;
font-size: 1.0em;
font-weight: normal;
text-decoration: underline !important;
/*margin: 10px;*/
/*padding: 10px;*/
padding-top: 20px;

margin-top: 20px;
margin-left: 10px;
margin-bottom: 10px;
margin-right: 10px;

}
</style>

There is no change (screenshot), so is something preventing it from styling correctly:?

Załączniki

  1. Spacing2.jpg (8.42 KiB) Pobrane 1471 razy

Avatar użytkownika

SteveH

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

Re: Greater space between links?

przez XainPro » Śr wrz 24, 2014 11:19 am

share your complete css and html code lets see this in action together
Avatar użytkownika

XainPro

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

Re: Greater space between links?

przez SteveH » Śr wrz 24, 2014 1:32 pm

Hello XainPro

Thanks for your message.

The two links in question are these:

Kod: Zaznacz cały
<a runat="server" class="link_white" href="~/Account/Register">Register</a>
                               
<a runat="server" class="link_white" href="~/Account/Login">Log-in</a>


I have now changed the font colour to white using this:

Kod: Zaznacz cały
a.link_white {
    color: #ffffff;
    font-size: 1.0em;
    font-weight: normal;
    text-decoration: none;
    margin: 10px;
   }

a.link_white:hover {
    color: #ffffff;
    font-size: 1.0em;
    font-weight: normal;
    text-decoration: underline !important;
    margin: 10px;   
}


and they become underlined when the mouse hovers over them. So far so good. On page, they look like this:

Obrazek

However, both links really need to be lower down in the middle of the purple bar and closer to the right-hand side of the screen, and that is what I cannot change. I have tried to add margin-top and padding-top in the above CSS, but they have no effect: something is preventing me from changing the position of the links in that purple bar.

This is the CSS structure I have in a file called Site.master:

Kod: Zaznacz cały
<div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                   <!--<a class="navbar-brand" runat="server" href="~/">Application name</a>-->
                </div>
                <div class="navbar-collapse collapse">
                   <!--<ul class="nav navbar-nav">
                        <li><a runat="server" href="~/">Home</a></li>
                        <li><a runat="server" href="~/About">About</a></li>
                        <li><a runat="server" href="~/Contact">Contact</a></li>
                    </ul>-->
                    <asp:LoginView runat="server" ViewStateMode="Disabled">
                        <AnonymousTemplate>
                            <ul class="nav navbar-nav navbar-right">


<a runat="server" class="link_white" href="~/Account/Register">Register</a>
                               
<a runat="server" class="link_white" href="~/Account/Login">Log-in</a>
                             
                               
                            </ul>
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %>!</a></li>
                                <li>
                                    <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                                </li>
                            </ul>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </div>
            </div>
        </div>


I hope you can help out!

Many thanks
Avatar użytkownika

SteveH

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

Re: Greater space between links?

przez XainPro » Cz wrz 25, 2014 12:55 pm

ok now i understand what you want remove padding and margin etc and add
line-height: equal to the height of blue bar ;)
Avatar użytkownika

XainPro

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

Re: Greater space between links?

przez SteveH » Cz wrz 25, 2014 3:18 pm

Thanks again.

So if the bar is, say, 40px high, I would remove the margin (there is no padding) and use something like this:

Kod: Zaznacz cały
a.link_white {
    color: #ffffff;
    font-size: 1.0em;
    font-weight: normal;
    text-decoration: none;
   /*margin: 10px;*/
     line-height: 40px;
   }

a.link_white:hover {
    color: #ffffff;
    font-size: 1.0em;
    font-weight: normal;
    text-decoration: underline !important;
   /*margin: 10px;*/
    line-height: 40px;   
}


Thanks for your time.
Avatar użytkownika

SteveH

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


+ Odpowiedz

Strona 1 z 1