Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 385
www.data-blogger.com Avatar asked Jun 14 '11 14:06

www.data-blogger.com


People also ask

How do you add a link to a right in HTML?

To create the right align menu links you just need HTML and CSS. Menu links should contain an important menu list that you want to display on the right side.

How do you right align an element in HTML?

HTML | <div> align Attribute left: It sets the content to the left-align. right: It sets the content to the right-align. center: I sets the div element to the center. By default, it is set to center.

How do you change the alignment of an HTML link?

The align Attribute in HTML is used to specify the alignment of text content of The Element. this attribute is is used in all elements. The Align attribute can also be set using CSS property “text-align: ” or in <img> “vertical-align: “.


1 Answers

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;
}
like image 125
ngen Avatar answered Sep 24 '22 20:09

ngen