CODEWITHSUNDEEP
htmlcsshyperlinkalignment
www.data-blogger.com
www.data-blogger.com

Reputation: 4164

Right align link

I now got some menu links (in the blue area) on http://beta.ovoweb.net/. Now I want one right aligned link, so the others are left aligned. I tried , but that didn't work. How can I get this working?

Upvotes: 11

Views: 126914

Answers (4)

ngen
ngen

Reputation: 8966

Create a child div for the right links. http://jsfiddle.net/A5em8/1/

HTML:

div id="ovoMenu">
    <a href="?i=1">Item 1</a>
    <a href="?i=2">Item 2</a>
    <a href="?i=3">Item 3</a>
    <div class="right">
        <a href="?i=4">Item 4</a>
    </div>
</div>

CSS:

.right {
    text-align: right;
    float: right;
}

#ovoMenu {
    margin: 0px;
    padding: 0px;
    /* Size properties */
    padding-top: 5px;
    /* Font properties */
    color: #FFFFFF;
    font-size: 80%;
    /* Create a gradient */
    background-color: #418CE5;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#418CE5', endColorstr='#256EC6');
    background: -webkit-gradient(linear, left top, left bottom, from(#418CE5), to(#256EC6));
    background: -moz-linear-gradient(top, #418CE5, #256EC6);
    /* Links are not allowed on another line */
    white-space: nowrap;
}

#ovoMenu a:link, #ovoMenu a:visited, #ovoMenu a:active, #ovoMenu a:hover {
    color: #FFFFFF;
    /* Corners */
    -moz-border-radius-topleft: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-topright: 4px;
    border-top-right-radius: 4px;
    /* Size */
    margin-left: 12px;
    padding-left: 12px;
    padding-right: 12px;
    /* Display it as a block */
    display: inline-block;
    /* Height of the link */
    height: 30px;
    line-height: 30px;
    /* No underline */
    text-decoration: none;
    /* No outline */
    outline: 0;
}

#ovoMenu a:hover {
    /* Other background */
    background-color: #13529E;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#13529E', endColorstr='#084084');
    background: -webkit-gradient(linear, left top, left bottom, from(#13529E), to(#084084));
    background: -moz-linear-gradient(top, #13529E, #084084);
}

#ovoMenu a.active:link, #ovoMenu a.active:visited, #ovoMenu a.active:active, #ovoMenu a.active:hover {
    color: #333333;
    font-weight: bold;
    background: none;
    background-color: #E9E9E9;
}

Upvotes: 23

kei
kei

Reputation: 20471

#ovoMenu, #ovoSubmenu { text-align: right; }

You mean this?

To move the third item to the right:

<a href="?i=3" style="float: right;">Item 3</a>

Upvotes: 10

yoel
yoel

Reputation: 409

i guess you can do it this way :

http://jsfiddle.net/yuliantoadi/gLpNf/1/

Upvotes: 2

Denis Biondic
Denis Biondic

Reputation: 8201

Set fixed height to ovoSubmenu, set anchors to float:right Is this what you want?

Upvotes: 0

Related Questions