Adobe Community: Text Indent

kcfi

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.

1776 Views 25 Replies Latest reply: David_Powers, Jul 13, 2012 2:49 AM

Replies

Currently Being Moderated

1. osgood_,

Jul 12, 2012 12:22 AM in reply to kcfi

Report

Use a 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">Frequently Asked Questions</a></li>
 <li><a href="what/what.html">Use Tips</a></li>
<li><a href="who/who.html">Installation Tips</a></li>
 <li><a href="dealer/dealer.html">Detailed Instructions</a></ li>
</ul>
</body>
</html>

|
Mark as:
Currently Being Moderated

2. David_Powers,

Jul 12, 2012 2:36 AM in reply to kcfi

Report

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 s and such.

|
Mark as:
Currently Being Moderated

3. kcfi,

Jul 12, 2012 3:38 AM in reply to David_Powers

Report

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 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!

|
Mark as:
Currently Being Moderated

4. osgood_,

Jul 12, 2012 8:36 AM in reply to David_Powers

Report

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 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

5. kcfi,

Jul 12, 2012 9:12 AM in reply to osgood_

Report

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

|
Mark as:
Currently Being Moderated

6. David_Powers,

Jul 12, 2012 9:14 AM in reply to osgood_

Report

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

7. osgood_,

Jul 12, 2012 9:23 AM in reply to David_Powers

Report

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

8. David_Powers,

Jul 12, 2012 9:37 AM in reply to osgood_

Report

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

9. Al Sparber,

Jul 12, 2012 10:22 AM in reply to David_Powers

Report

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

10. osgood_,

Jul 12, 2012 10:23 AM in reply to David_Powers

Report

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

11. kcfi,

Jul 12, 2012 10:26 AM in reply to Al Sparber

Report

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

|
Mark as:
Currently Being Moderated

12. osgood_,

Jul 12, 2012 10:28 AM in reply to Al Sparber

Report

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

13. Nancy O.,

Jul 12, 2012 11:09 AM in reply to Al Sparber

Report

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

14. David_Powers,

Jul 12, 2012 2:53 PM in reply to Al Sparber

Report

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

15. David_Powers,

Jul 12, 2012 2:56 PM in reply to kcfi

Report

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

16. kcfi,

Jul 12, 2012 3:31 PM in reply to David_Powers

Report

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

|
Mark as:
Currently Being Moderated

17. David_Powers,

Jul 12, 2012 4:50 PM in reply to kcfi

Report

http://foundationphp.com/test/oval.html

|
Mark as:

Currently Being Moderated

18. Nancy O.,

Jul 12, 2012 4:58 PM in reply to kcfi

Report

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

19. Al Sparber,

Jul 12, 2012 5:27 PM in reply to Nancy O.

Report

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

20. Al Sparber,

Jul 12, 2012 5:35 PM in reply to David_Powers

Report

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

21. Nancy O.,

Jul 12, 2012 7:46 PM in reply to Al Sparber

Report

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

N

|
Mark as:
Currently Being Moderated

22. Al Sparber,

Jul 12, 2012 8:01 PM in reply to Nancy O.

Report

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

23. kcfi,

Jul 12, 2012 8:31 PM in reply to Al Sparber

Report

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.

|
Mark as:
Currently Being Moderated

24. David_Powers,

Jul 13, 2012 2:15 AM in reply to Al Sparber

Report

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

25. David_Powers,

Jul 13, 2012 2:49 AM in reply to kcfi

Report

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:

Forum guidelines

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

Dreamweaver CC

Text Indent

Jul 11, 2012 4:57 PM

More Like This

Bookmarked By (0)

Answers + Points = Status