Line Breaking Spans with CSS

[dismayldream]

I am trying to add line breaks via CSS inline styles so as to omit presentational markup from my XHTML document. Basically, I've got a simple block of code like so:



<div id="ctl00_MainContentPlaceHolder_OpAdminDisplayCtrl1_UpdatePanel1">
<span id="ctl00_MainContentPlaceHolder_OpAdminDisplayCtrl1_Who1Label">Region:</span>
<span id="ctl00_MainContentPlaceHolder_OpAdminDisplayCtrl1_Who1Text" title="Read: Right granted to user directly in operation 'ORANGE'.">Blurtal Region</span>
<span id="ctl00_MainContentPlaceHolder_OpAdminDisplayCtrl1_Who2Label">Branch:</span>
<span id="ctl00_MainContentPlaceHolder_OpAdminDisplayCtrl1_Who2Text" title="Read: Right granted to user directly in operation 'ORANGE'.">Internal Investigations</span>
<span id="OpName">Operation Name:</span>
<span id="ctl00_MainContentPlaceHolder_OpAdminDisplayCtrl1_OpNameLabel" title="Read: Read right granted as can administer rights">ORANGE</span>
<span id="OpCode">Operation Code:</span>
<span id="ctl00_MainContentPlaceHolder_OpAdminDisplayCtrl1_OpCodeLabel" title="Read: Right granted to user directly in operation 'ORANGE'.">BO 12 N003</span>
</div>



and I am trying to use CSS application to cause each pair of spans to co-exist on a single line, with a break - like so:

Region: Blurtal Region
Branch: Internal Investigations
Operation Name: ORANGE
Operation Code: BO 12 N003

Originally, this had been accomplished via the addition of extraneous <table><tr><td> elements, which led to some very cluttered code. I've experimented with CSS inline styles (only inline until they work) using the display:inline, display:block; properties, but I can't seem to get everything to exist in the requisite value pair.

Could someone point out how I can accomplish this task via CSS? Or if I'm going to need to add xhtml <br /> tags to accompish this task.

Thanks!

 

[Vragabond]

I would actually not use the div and spans and would opt for the definition list.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[IceDude]

Why not do what Vragabond suggested in the following style:

<li id="whatever"><span id="title">Region:</span> Blurtal Region</li>
<li id="whatever"><span id="title">Branch:</span> Internal Investigations</li>
<li id="whatever"><span id="title">Operation Name:</span> ORANGE</li>
<li id="whatever"><span id="title">Operation Code:</span> BO 12 N003</li>

your style can be:

#whatever { your styling }
#title { your styling }

Hope that helps.

 

[Vragabond]

Why use so much code and tags that mean nothing when you can have it as simple as:

<dl>
  <dt>Region:</dt>
  <dd>Blurtal Region</dd>
  <dt>Branch:</dt>
  <dd>Internal Investigations</dd>
  <dt>Operation Name:</dt>
  <dd>ORANGE</dd>
  <dt>Operation Code:</dt>
  <dd>BO 12 N003</dd> 
</dl>

To me, much neater.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[dismayldream]

Thanks for your replies. Vragabond: I've tested the <dl><dt> code suggested, but the result is an indented list. Typically, the idea is to replace cumbersome <td><tr> syntax ala:

<tr>
<td><span ID="myspan">CONTROL NAME:</span><input type="textbox" ID="mycontrol" /></td>
</tr>

The span's are all automatically generated via an ASP backend - hence the reason it's a little verbose. Span's encased in <ul /> <li /> tags seem to provide more flexibility then <dt />'s which would have to wrap a <span /> anyway. What I'm still unsure about though is how I can fix the width of the <span>'s inside the <li>. Currently, unless the first span is exactly the same length as the second span - it looks all wrong:

li
{
   list-item: none none inside;
   display: inline;
}

<ul>
<li>
<span>MYSPAN</span>
<span>MYSECONDSPAN</span>
</li>
<li>
<span>MYTHIRDSPAN</span>
<span>MYFOUTHSPAN</span>
</li>
</ul>

This yields something like:

MYSPAN MYSECONDSPAN
MYTHIRDSPAN MYFOURTHSPAN

which is kinda poo if you want to reflect a form style fixed width for each element, e.g.:

MYSPAN MYSECONDSPAN
MYTHIRDSPAN MYFOURTHSPAN

Any idea how I'd accomplish this? Thanks again!

 

[traingamer]

Using Vragabonds layout and some css (adapted from some working code, but not tested):

dl {
  	float: left;
  	width: 600px;
  	margin: 10px 20px;
  	padding: 0;
  	display: inline; /* fixes IE/Win double margin bug */
}
dt {
  	float: left;
  	width: 260px;
  	}
dd {
        float: right;
  	width: 260px;
  	  	}

Use floats and specific widths. Am I missing something?

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[traingamer]

After testing - it looks even better if you float both dt and dd with float: left;.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[dismayldream]

That's cool, and it works - but is there any way to get it working with ul/li/span's also? I thought I'd grasped the css 'float' style but obviously not.