text-align question

Discussion in 'Web Design and Development' started by olup, Mar 7, 2012.

  1. olup macrumors 6502

    Joined:
    Oct 11, 2011
    #1
    Hi, I have a really strange problem that I can't figure out.
    I'm fairly new to webdesign and am working on my website that I have yet to upload. Here's the deal:
    In the navigation bar I have three differently shaped elements as links with text in them. A square, a circle and a triangle. The link text lines up perfectly in the square and circle however not in the triangle.
    It aligns right for some reason,even though the css for all three elements in the navigation are the same. I tried adding some padding-right to the triangle, which of course doesn't stay the same shape anymore.
    I would greatly appreciate your input/help!

    Here's the css for the navigation links:

    nav a {
    text-decoration:none;
    text-transform:uppercase;
    font-weight:bold;
    font-size:20px;
    line-height:200px;
    color:#fff;
    }


    and here's the css for the triangle(the home button)

    .home{


    width:0;
    height:0;
    display:block;
    float:right;
    margin-left:20px;
    border-right:130px solid transparent;
    border-left:130px solid transparent;
    border-bottom:200px solid #778899;
    }


    [​IMG]
     
  2. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #2
    If you'll notice, in order to make that CSS triangle, the home link is defined as having a width and height of 0. If there's no width to the anchor tag, you can't very well center its text.

    I experimented with applying the home class to a span, then putting the link in the span and defining the link's width and margin to center it. I'm not sure how cross-compatible this is but it works in Safari.

    PHP:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <
    title>Untitled Document</title>
    <
    style type="text/css">
    #nav a {
    text-decoration:none;
    text-transform:uppercase;
    font-weight:bold;
    font-size:20px;
    line-height:200px;
    color:#fff;
    }
    .
    home{
    width:0;
    height:0;
    display:block;
    float:right;
    margin-left:20px;
    border-right:130px solid transparent;
    border-left:130px solid transparent;
    border-bottom:200px solid #778899;
    text-align:center;
    }
    #nav .home a {
    displayblock;
    width260px;
    margin-left: -130px;
    }
    </
    style>
    </
    head>

    <
    body>
    <
    div id="nav">
    <
    span class="home"><a href="#">Home</a></span>
    </
    div>
    </
    body>
    </
    html>
     
  3. olup thread starter macrumors 6502

    Joined:
    Oct 11, 2011

Share This Page