Skip navigation
Currently Being Moderated

Text Indent

Jul 11, 2012 4:57 PM

Tags: #adobe #cs5.5 #code #dw

How do I indent both lines of text on this page?

 

http://lash-it.com/nav_matrix_faq_sample.html

 

Text-indent -10px on the #nav rule only indents the first line. I want to shift both lines of text slightly to the left so they look centered in the ovals.

 
Replies
  • Currently Being Moderated
    Jul 12, 2012 12:22 AM   in reply to kcfi

    Use  a <span></span> tag inside the anchor tag (see code and css below)

     

     

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Lash-it Menu Example</title>

    <style>

    #nav {

        padding: 0;

        list-style-type: none;

        font-family: Verdana, Geneva, sans-serif;

        font-size: 14px;

        width: 880px;

    }

    #nav li {

        float: left;

        margin: 0 0 0 20px;

    }

    #nav li a {

        display: block;

        text-transform: uppercase;

        width: 196px;

        height: 62px;

        text-decoration: none;

        background-image: url(http://www.lash-it.com/images/nav_matrix_faq.png);

        background-repeat: no-repeat;

        color: #FFF;

        padding-top: 15px;

    }

    #nav li a span {

        display: block;

    width: 187px;

    text-align: center;

    }

    #nav li a:hover, #nav li a#current:hover {

        background-position: 0 -78px;

        color: #FFF;

        font-family: Verdana, Geneva, sans-serif;

    }

    </style>

    </head>

     

    <body>

    <ul id="nav">

        <li><a href="buy/buy.html"><span>Frequently<br>Asked Questions</span></a></li>

        <li><a href="what/what.html"><span>Use<br>Tips</span></a></li>

      <li><a href="who/who.html"><span>Installation<br>Tips</span></a></li>

        <li><a href="dealer/dealer.html"><span>Detailed<br>Instructions</span></a></ li>

    </ul>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2012 2:36 AM   in reply to kcfi

    You're using text-align: center. So the text is centered. The problem lies with the background position of your ovals.

     

    I did a quick experiment, adding background-position: 10px 0; to your #nav li a rule. It needs some fine tuning, but I think that's where the best solution lies. Get the position of the image right rather than mess around with <span>s and such.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2012 8:36 AM   in reply to David_Powers

    David_Powers wrote:

     

    You're using text-align: center. So the text is centered. The problem lies with the background position of your ovals.

     

    I did a quick experiment, adding background-position: 10px 0; to your #nav li a rule. It needs some fine tuning, but I think that's where the best solution lies. Get the position of the image right rather than mess around with <span>s and such.

    There is  a drop shadow on the image so no way can you have text-align center on the anchor tag and have both the text and image centered using the anchor tag that's why I introduced a span tag.

     

    background-position 10px 0; doesnt move the image left of right either which is needed to compensate for the drop shadow.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2012 9:14 AM   in reply to osgood_

    osgood_ wrote:

     

    There is  a drop shadow on the image so no way can you have text-align center on the anchor tag and have both the text and image centered using the anchor tag

    You can if you design the background image to take the drop shadow into consideration. I just moved the background position of the image to demonstrate the effect of shifting the image.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2012 9:23 AM   in reply to David_Powers

    David_Powers wrote:

     

    You can if you design the background image to take the drop shadow into consideration. I just moved the background position of the image to demonstrate the effect of shifting the image.

     

     

     

    If the width of the 'a' tag is the same width as the oval (minus the drop shadow) then you can use text-align center. BUT the 'a' tag needs to be wider to show the drop shadow, then the text is off center horizontally. You can't move the background image left because that would cut off part of the image.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2012 9:37 AM   in reply to osgood_

    Take a look at the rough example I created for the OP yesterday: http://foundationphp.com/test/lashit.html. The background image (http://foundationphp.com/test/images/nav_matrix.png) has a slightly wider blue margin on the left to compensate for the drop shadow. The padding provides sufficient width for the whole of the background image to be displayed.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2012 10:22 AM   in reply to David_Powers

    In the interests of modern CSS and progressive enhancement, I would consider this a far better approach:

    http://www.projectseven.com/testing/fubar-109/

     

    No images were harmed - or hacked

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2012 10:23 AM   in reply to David_Powers

    Ok, I guess there is more than one way to skin a cat. Wasn't looking into it too deeply just what came into my mind at the time, which also works.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2012 10:28 AM   in reply to Al Sparber

    Al Sparber wrote:

     

    In the interests of modern CSS and progressive enhancement, I would consider this a far better approach:

    http://www.projectseven.com/testing/fubar-109/

     

    No images were harmed - or hacked

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     

     

    OOOO!

     

    Thats a bit crazy. Neat.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2012 11:09 AM   in reply to Al Sparber

    I'm in 100% agreement with you Al. I made a similar suggestion in a related thread but the OP didn't go for it.  

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2012 2:53 PM   in reply to Al Sparber

    Al Sparber wrote:

     

    In the interests of modern CSS and progressive enhancement, I would consider this a far better approach:

    http://www.projectseven.com/testing/fubar-109/

    A great solution -- as long as you don't mind it not looking so great in IE 8.

     

    Not quite your usual colour scheme though, Al.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2012 2:56 PM   in reply to kcfi

    kcfi wrote:

     

    Maybe someday an oval shape can be created using CSS.

    It already can, at least in modern browsers (doesn't work in IE 8 or earlier):

     

    .oval {

        width: 200px;

        height: 100px;

        border-radius: 50%;

        background-color: #F00;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2012 4:50 PM   in reply to kcfi
     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2012 4:58 PM   in reply to kcfi

    If you're using this as a menu system, you would want to put links into unordered lists <ul> <li> tags.

     

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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">
    
    ul#oval {margin:0; padding:0; list-style:none;}
    
    #oval li a {
    margin:0 12px 0 12px; /**space between links**/
    width: 250px;
    height: 75px;
    border-radius: 50%;
    background-color: #F00;
    /**shadow**/
    -webkit-box-shadow: inset 2px 2px 10px #900;
    -moz-box-shadow: inset 2px 2px 10px #900;
    box-shadow: inset 2px 2px 10px #900;
    display:block;
    float:left;
    line-height: 75px; 
    font-size: 16px; 
    font-weight: bold; 
    color: #000;
    text-align:center;
    text-decoration:none;
    }
    
    #oval li a:hover, 
    #oval li a:active,
    #oval li a:focus {background-color: #FFF;}
    
    </style>
    </head>
    
    <body>
    <ul id="oval">
    <li><a href="#">Some link</a></li>
    <li><a href="#">Another link</a></li>
    <li><a href="#">Some more links</a></li>
    <li><a href="#">A link with very long text...</a></li>
    </ul>
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2012 5:27 PM   in reply to Nancy O.

    The earlier examples are unordered lists:

    http://www.projectseven.com/testing/fubar-109/

     

    The last thing you would want to do, though, is assign a height on text

    link. Different computers and different people have a nasty habit of

    rendering or setting font sizes that are not default on your computer or

    mine

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    since 1998

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2012 5:35 PM   in reply to David_Powers

    A great solution as long as you don't mind it not looking so great in IE8

     

    Progressive enhancement, which can also mean design to your client's computer

     

    Not quite your usual colour scheme though, Al.

     

    If you hadn't left our beta team, you would know my palette has expanded

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2012 7:46 PM   in reply to Al Sparber

    @Al,

    MIN-HEIGHT  would work but be an atrocity with increased text-size, yes??

     

    N

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2012 8:01 PM   in reply to Nancy O.

    I'm pretty sure I just used line-height on my little example page. At

    least that way, if the user has a custom font set for computer or

    browser, the box will expand instead of the text breaking out of the

    box. I would never fix width on a menu as the original poster seemed to

    want to do. If there was a design mandated by a client I would likely

    have done the links as embedded images instead of text.

     

    The Web design community has slowly come to its senses (at least the

    smart ones) and understands that there is absolutely nothing wrong with

    using images - rather than image replacement, backgrounds, or worse -

    sprites.

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    Dreamweaver Menus | Galleries | Widgets

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 13, 2012 2:15 AM   in reply to Al Sparber

    Al Sparber wrote:

     

    If you hadn't left our beta team, you would know my palette has expanded

    'Twas nothing personal. Just phenomenally busy. Glad to know you've discovered new shades of grey.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 13, 2012 2:49 AM   in reply to kcfi

    kcfi wrote:

     

    One thing I have realized by using this forum is that everyone has a different way of doing things.

    That's very true. If you're interested in good techniques, you'll learn a lot from Al Sparber. Although the forum shows him as a member since only 2009, he's been an active participant for about 10 years longer. Al runs Project Seven, a very successful business creating excellent templates and extensions for Dreamweaver. We don't always agree, but Al's knowledge of CSS is second to none, and he offers a lot of free advice.

     

    Nancy O's a pretty smart cookie too.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points