Topic: Critique use of <br/>

I feel like the slum of the earth when I lay down a <br/> tag. But should I? Please consider the following, a link which I desire to contain 3 distinct lines:

<li class="nav">
<a href="/Event.Registration.Edit.aspx#aEVENT_LOGON">
Manage<br/>Your<br/>Event
</a>
</li>


Now the problem is this, what If don't want 3 distinct lines, what markup/style suggestion do you have to break up the content above into 3 distinct lines, that would not object to the content laying out nicely in a single line? Am I forced to put another list inside the <a> tag who's properties are to float in the case that they should appear on a single line?

Karl..

Hmm, I guess I'm not sure of what your question really is, but your use of the <br /> tag is fine, and if you don't want the lines to wrap then don't use the <br /> tag.

Also you could play with the layout of your text by setting the width of the areas they are in, then text will wrap to a new line based on the natural flow of the document, this can be tweaked some more if you don't want the text to wrap by using the White-space property.

Cheers,

Actually you can also use the white-space:pre-something; to break the text on the \n characters and have the following markup:

html:

<li class="nav"><a href="#">Manage
your
event</a></li>

css:

li.nav a
{
white-space:pre;
text-transform:capitalize;
}

Btw I really doubt the class="nav" makes any sense. Surely this LI is in a UL or OL that only contains "nav" items.

HTH



(Edited by poi on 03-23-2009 12:04)

white-spacere is the answer! I'm hoping there is wide support for this css property.
Ahh, poi, excellent point on the additional "nav" class on LI, and certainly the parent UL is classed with "navigation", and then again with "navigation-main".

Karl..

Dohh! as quickly as I love that solution poi, i hate it. I failed to mention that the text needs to be centered, but now I have a jagged arrangment of words on each line. This is not going to work. It seems I am forced to go with something like:

<ul class="navigation">
<li>
<a>
<ul class="link-title">
<li>Create</li>
<li>New</li>
<li>Event</li>
</a>
<li>
. . .
</ul>

A lot of markup, but does what I need it to. Any other suggestions? Again, I'm searching for a solution which is both semantic in nature, and style independent of markup (which rules out the good'ole <br> tag)

Karl..

Sorry but the semantic of that last snippet of HTML is rubbish. Plus I'm pretty sure that you can't put a block element such as a UL inside an A element.


white-space: pre; is what makes the PRE tags wrap on the \n and show tabulations and so one. It's widely supported. I see no reason to bloat your markup.


At worst, you could go for something like:
html

<li class="nav"><a href="#">Manage <span>your</span> event</a></li>

css

li.nav span{ display:block; clear:both; }

Sorry, if I sound rude. I'm having a Monday

Hmmm... I like the use of Span! Bettern than <br/> in my opinion, and can be styled from CSS, and eliminates the extra UL LI markup, which I agree is horrid.

By the way, since IE doesn't respect:
ul.navigation>li

Requiring styling for the first descendant li element and not all descendant li elements, I had to give the immediate descendant li a class name of "navigation" in order to style it differently than the deeper nested li elements so CSS was looking like:

ul.navigation li.navigation

This of course is also YUCK!

Karl..

reisio: not sure which tag you intend to apply your style to, if the <li> tag, the width is a requirement (I have a border around the object, and equally width spaced box like appearance). Hmm, maybe the <a> tag. Let me try that.

Hmm, seems that alignment center does not work as expected, the elements are left aligned. I had to style the <a> tag as a block for it to work in FF and Chrome. Here is what I have:

ul.navigation li a
{
	display:block;
	width:0;
	text-align:center;
}
ul.na

Muah!

a {
	display: block;
	text-align: center;
	white-space: pre;
}
?
				<a href="#">blah
<!--					 -->asdfasdfblah
<!--					 -->blah</a>

Just use display: block; text-align: center; and set the width to be smaller than the length of the shortest word.