25 Replies Latest reply: Jul 13, 2012 2:49 AM by David_Powers RSS

    Text Indent

    kcfi Community Member

      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.

        • 1. Re: Text Indent
          osgood_ MVP

          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>

          • 2. Re: Text Indent
            David_Powers ACP

            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.

            • 3. Re: Text Indent
              kcfi Community Member

              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.

              That does work. I came to the same conclusion last night that I needed to shift the background, but while I was messing with everything, somehow I got it shifted using padding and margin adjustments. I can't say exactally how, but it's working!

              • 4. Re: Text Indent
                osgood_ MVP

                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.

                • 5. Re: Text Indent
                  kcfi Community Member

                  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 that's why I introduced a span tag.

                   

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

                  I keep changing my code on the test page, so please don't assume you are seeing it the way it was previously. I added the background-position property to the rule, and it does seem to work. I exaggerated it on the test page so you can see. Even so, like I said, I did end up with a different solution that works. My pages are done now. Thanks to everyone for their help.

                   

                  My test setup page:

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

                   

                  My final page:

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

                  • 6. Re: Text Indent
                    David_Powers ACP

                    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.

                    • 7. Re: Text Indent
                      osgood_ MVP

                      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.

                      • 8. Re: Text Indent
                        David_Powers ACP

                        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.

                        • 9. Re: Text Indent
                          ALsp Community Member

                          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

                          • 10. Re: Text Indent
                            osgood_ MVP

                            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.

                            • 11. Re: Text Indent
                              kcfi Community Member

                              Nice! I do want to keep my ovals. Maybe someday an oval shape can be created using CSS.

                              • 12. Re: Text Indent
                                osgood_ MVP

                                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.

                                • 13. Re: Text Indent
                                  Nancy O. MVP

                                  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.

                                  • 14. Re: Text Indent
                                    David_Powers ACP

                                    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.

                                    • 15. Re: Text Indent
                                      David_Powers ACP

                                      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;

                                      }

                                      • 16. Re: Text Indent
                                        kcfi Community Member

                                        I can't make the oval rule work. Please add some body html to complete the example. Thanks.

                                        • 18. Re: Text Indent
                                          Nancy O. MVP

                                          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.

                                          • 19. Re: Text Indent
                                            ALsp Community Member

                                            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

                                            • 20. Re: Text Indent
                                              ALsp Community Member

                                              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

                                              • 21. Re: Text Indent
                                                Nancy O. MVP

                                                @Al,

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

                                                 

                                                N

                                                • 22. Re: Text Indent
                                                  ALsp Community Member

                                                  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

                                                  • 23. Re: Text Indent
                                                    kcfi Community Member

                                                    I appreciate all the input. Early on I had my ovals and text all images. I asked how to make things simpler because I was having trouble with what seemed like a lot of code to make my images swap (Sprites). I'm comfortable with the way I have things now. One thing I have realized by using this forum is that everyone has a different way of doing things. That's how we all learn. Thanks again.

                                                    • 24. Re: Text Indent
                                                      David_Powers ACP

                                                      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.

                                                      • 25. Re: Text Indent
                                                        David_Powers ACP

                                                        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.