Topic: Critique use of <br/> (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=30927" title="Pages that link to Topic: Critique use of &amp;lt;br/&amp;gt; (Page 1 of 1)" rel="nofollow" >Topic: Critique use of &lt;br/&gt; <span class="small">(Page 1 of 1)</span>\

 
Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 03-23-2009 06:15 Edit Quote

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

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

IP logged posted posted 03-23-2009 10:19 Edit Quote

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,

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 03-23-2009 12:01 Edit Quote

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

html:

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


css:

code:
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)

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 03-23-2009 17:37 Edit Quote

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

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 03-23-2009 17:48 Edit Quote

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

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 03-23-2009 18:30 Edit Quote

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

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

css

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



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

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 03-23-2009 19:27 Edit Quote

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
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 03-23-2009 20:45 Edit Quote
code:
float: left;
width: 0;
text-align: center;

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 03-23-2009 21:52 Edit Quote

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:

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

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 03-24-2009 02:05 Edit Quote

Muah!

code:
a {
	display: block;
	text-align: center;
	white-space: pre;
}

				<a href="#">blah
<!--					 -->asdfasdfblah
<!--					 -->blah</a>

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 03-24-2009 02:14 Edit Quote

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



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu