Can I indent after a line break?

HTML & CSS
1

http://www.photoshop.com/users/tehprince/assets/72dfd5a6651a4c448e399f3f3ceeea32

The following code produces the image above:

.ms-navheader a {
color: #fff;
line-height: 240%;
background-image: url(‘starbullet.gif’);
background-repeat:no-repeat;
padding-left: 26px;
margin-left: 4px;
}

What I’m looking to do is indent the text that happens after a line break, for example:

Quick Links / How Do I?

The “Do I” falls on the next line, I was looking to have the “Do I” line up right underneath the Q in the word Quick.

Can this be done?

Any help would be most appreciated.

2

The only line within a paragraph that can be aligned differently to the rest of the paragraph is the first line. You can move the start of that line to the left or right of the rest of the paragraph using text-indent.

That doesn’t relate specifically to <br> tags though since the browser itself can break the text based on what will fit on a line.

3

You could just wrap the indented part in a span then saying the following should do it…

p span {
display:block;
margin-left:30px;
}

Edit: or text-indent. Or prob ten other ways too.

4

If you use a list for your links, they would indent automatically for you when the width was limited. Then you just use your image as the list-style-image.

for example

#tester {
width:100px;
}

#tester li {
list-style-image:url(“images/modular_l.gif”);
}

where #tester was applied to a div containing the list.

5
  1. the problem with eric suggestion is that if the design is fluid OR if the user changes font size the STAN itself might wrap around.

Dr. John suggestion is close. You can apply the #tester to the UL(instead of a container DIV).

#tester {
width:130px; /* I addex 30px for you bullet graphic;*/
margin:0;
padding:0;
}
#tester li {
list-style-image:url(“images/modular_l.gif”) no-repeat 0 0;
padding-left:30px;
}