2 Column List - Need a Line

csa · #1 Dec 12th, 2005, 15:43

I'm using the following code to create a two column list. The list needs to line up so that the text is align left and fits nicely next to each other no matter how long the text is. I've managed this, but I would like to include a line under each item, so for example a line would reach horizontally from Name of Client to the end of Somewhere Street as this is longest line of text. Any ideas?

Example
Name of client Peter
Address Somewhere Street

Code: Select all

<div id="aktiv">
<ul>
  <li class="col1"><a class="aktiv">Interior Length</a></li>
  <li class="col1"><a class="aktiv">Overall Length </a></li>
  <li class="col1"><a class="aktiv">Overall Width </a></li>
  <li class="col1"><a class="aktiv">Interior Height </a></li>
  <li class="col1"><a class="aktiv">Mass in running order </a></li>
    <li class="col1"><a class="aktiv">Mass in running order </a></li>
  <li class="col2 coltopper"><a class="aktivpano">5376mm/17'8&quot;</a></li>
  <li class="col2"><a class="aktivpano">7216mm/23'8&quot;</a></li>
  <li class="col2"><a class="aktivpano">229mm/7'6&quot;</a></li>
  <li class="col2"><a class="aktivpano">1950mm/6'4&quot;</a></li>
  <li class="col2"><a class="aktivpano">1175kg</a></li>
    <li class="col2"><a class="aktivpano">1390kg</a></li>
</ul>

Code: Select all

#aktiv {
font: 12px normal Arial, Helvetica, sans-serif;
width: 240px;
}
a.aktiv{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
font-weight:bold;
color:#163A78;
}
a.aktiv:hover{
color:#163A78;
text-decoration:underline;
font-weight:bold;
}
#aktivlist {
margin: 0;
padding: 0;
padding-left: 20px;
}
#aktivlist li {
display:inline;
list-style-type: none;
padding: 80px;
padding-left: 0px;
padding-right: 20px;
}
.col1 {margin-left: 0em;
 list-style: none;
}
 
.col2 {margin-left: 15em;
 list-style: none;
}
 
.col3 {margin-left: 23em;
 list-style: none;
}
 
.coltopper {margin-top: -7.7em;}

Pheonix · #2 Dec 12th, 2005, 21:25

I don't realy understand what you are trying to do...

However if you wish to brake a list item into multipule lines without another bullet you can use a simple line brake
<br />

benbramz · #3 Dec 14th, 2005, 14:33

or could you apply a border on the bottom of the list item....and padd it a few pixles away from the text...

csa · #4 Dec 14th, 2005, 15:54

I got this to work with a bit of help. Thank you for looking at my post.

Code: Select all

dl:after { 
  content: '.'; 
  display: block; 
  clear: both; 
  height: 0; 
  visibility: hidden; 
} 
  
dt { 
  clear: left; 
  margin-top: 0.5em; 
} 
  
dt a { 
  float: left; 
  width: 17.5em; 
   border-bottom: solid #E8EBF1 1px;  
} 
  
dd { 
  margin-left: 2.3em; 
  padding-left: 3.8em; 
   border-bottom: solid #E8EBF1 1px;  
} 
* html dl { height: 1px; }

benbramz · #5 Dec 14th, 2005, 19:11

o well glad you go a solution..

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Using a list for navigation, can you center a list?	tonyb	Web Page Design	4	May 9th, 2008 16:26
2 Drop down list - auto select depending on choice from first list	ciaranleeper	JavaScript Forum	0	Mar 26th, 2008 10:38
Unknown column in 'field list'	Emzi	PHP Forum	4	Dec 19th, 2007 19:38
Spacing between list items incorrect when span tag is used in a list item...	MikeTheVike	Web Page Design	5	Apr 18th, 2007 01:52
..copy data from column A in Table A to column B in Table B?	gecastill	Databases	10	Jun 23rd, 2005 18:27

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
2 Column List - Need a Line