4-col layout with text underlined?

[badams1]

Right now I have a 4-column layout (previously was a table) and I need some sort of underline to go from colum 1 to 2 and then from column 3 to 4. I realize I will probably have to do away with the 4-col layout, but I didn't know of any other way to make it underline the text. What it is is different areas and their extensions. Like when it was in a table I alternated the colors between the rows to make it easier to read.

Is this one of those instances where it would be more logical/easier to use a table (and/or is this considered tubular data)?

thanks.

[ahmedtheking]

In each column or set of columns, call them into a class (then you can create a class style for them in CSS), for eg:

your 2 left columns can be called .leftc and the right .rightc

give them some css

.leftc {

border-bottom: 1px solid #000000;

} and so on

and see what happens!

[badams1]

Either I'm doing it wrong or it didn't work. the first is probably the case. It put the line but only at the very bottom, where I need it after each line break.

I've probably got it setup wrong, but it seemed logical to me. Here is how I have it: Left column 1 - has the departments, left colum 2 has their extensions, right colum 1 has the departments, right colum 2 has their extensions. Now in the html I call the div id, then typed in all the departments using <br> to go to the next line, then when I finish that column I close the div. The same thing goes for the other 3 columns.

[ahmedtheking]

Ok if you change the id for each div, or give the left divs a class seprate to the right divs. with that, you apply a border (like i showed you!) If this doesnt work, paste in the related CSS and HTML to these areas!

[benihana]

from your description, it dsounds like tabular data, therefore, use a table!

[badams1]

It probably should be used in a table, but the combining the table with the css creates a bigger problem for some reason. The table gets shifted to right. Got the banner/menu system, then a big blank space where the table should be and if you look to the right the table is there but it needs to be centered underneath the menu/banner. I'll post the code/css when I get back from lunch.

[badams1]

html code (partial):

<all the basic html stuff>
<div id="wrapper">
<div id="menu">menu system</div>
<table>all the table code</table><br>
<table> another table</table></div><br>
<div id="wrapper2">consists of 3 div id with copyright, site map, and contact info</div>
</end all html stuff>

css code:

#wrapper{
position: relative;
display: block;
width:751px;
margin:0px auto;
margin-top: 0;
text-align: justify;
}
#headerpicture {
left: 0px;
margin-top: 0px;
border: 0px;
padding: 0px;
/*position: relative;*/
}
#menu {
/*position: relative;*/
top: 0px;
z-index: 5;
clear:both;
}
 

I didn't include the wrapper2 code cause I don't think it is relevant since the table is not within it. I know it looks like I just kind of slapped it up here, but it was far easier than editing out all of the info about us.

[badams1]

ok it seems to be only firefox that is having the issue with the table. Opera and IE6 has the table centered like it is supposed to be. Anyone care to explain?

[supermanjnk]

From the code you posted I really can't even tell what it is you are trying to do, I have no clue how many <tr>'s you have in your table, and how many <td>'s It could also be a problem with your doctype (if your using one) it may take a little time, but it would be nice if you could post all of your code, or at least all of the code in the section thats giving your the problem.

[badams1]

ok i'll post the code, but leaving in all the names and extensions since that part really won't matter since you all won't have the main phone number.

<table width="90%" border="1" align="center" bordercolor="#000099">
 <tr> 
 <td height="60" colspan="4"> <p align="center"><strong>title<br>
  city, state, zip<br>
  Phone: (---)--------<br>
  Fax: (---)--------<br>
  2003-2004 Directory</strong><br>
  <br>
  <strong>Extensions by General Area</strong><br>
  (Unless otherwise stated, all phone numbers listed are within 
  the --- area code.)</p></td>
 </tr>
 <tr> 
 <td><div align="center"><strong>Area</strong></div></td>
 <td><div align="center"><strong>Extension</strong></div></td>
 <td><div align="center"><strong>Area</strong></div></td>
 <td><div align="center"><strong>Extension</strong></div></td>
 </tr>
 <tr> 
 <td height="22">Affirmative Action Office</td>
 <td> 
 <div align="center">191</div></td>
 <td>Horse Barn</td>
 <td> 
 <div align="center">262</div></td>
 </tr>
 <tr> 
 <td bgcolor="#E8E8E8">Agriculture Program</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">104,105</div></td>
 <td bgcolor="#E8E8E8">Human Resources</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">118</div></td>
 </tr>
 <tr> 
 <td>Athletic Director</td>
 <td><center>
  161</center></td>
 <td>Library</td>
 <td> <div align="center">205, 208 </div></td>
 </tr>
 <tr> 
 <td bgcolor="#E8E8E8">Auditorium</td>
 <td bgcolor="#E8E8E8"> 
 <center>
  164 </center></td>
 <td bgcolor="#E8E8E8">Lifelong Learning</td>
 <td bgcolor="#E8E8E8"> 
 <center>
  104, 105 </center></td>
 </tr>
 <tr> 
 <td>Ballroom</td>
 <td><div align="center">167</div></td>
 <td>McKee Hall</td>
 <td><div align="center">177</div></td>
 </tr>
 <tr> 
 <td bgcolor="#E8E8E8">Baseball Coach</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">166</div></td>
 <td bgcolor="#E8E8E8">Maintenance</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">247, 221, 250</div></td>
 </tr>
 <tr> 
 <td>Basketball (Men's)</td>
 <td><div align="center">161</div></td>
 <td>Management &amp; Finance Executive Vice President</td>
 <td><div align="center">117, 121</div></td>
 </tr>
 <tr> 
 <td bgcolor="#E8E8E8">Basketball (Women's)</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">160</div></td>
 <td bgcolor="#E8E8E8">Nursing &amp; Allied Health </td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">191, 194, 337, 339</div></td>
 </tr>
 <tr> 
 <td>Bookstore</td>
 <td><div align="center">168</div></td>
 <td>Outreach Office</td>
 <td><div align="center">106, 154</div></td>
 </tr>
 <tr> 
 <td bgcolor="#E8E8E8">Business Office</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">117, 119, 121</div></td>
 <td bgcolor="#E8E8E8">Physical Fitness Center</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">163</div></td>
 </tr>
 <tr> 
 <td>Business &amp; Technology</td>
 <td><div align="center">194</div></td>
 <td>Physical Therapist Assistant Director</td>
 <td><div align="center">191, 194, 337, 339</div></td>
 </tr>
 <tr> 
 <td bgcolor="#E8E8E8">Cafeteria</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">169, --------</div></td>
 <td bgcolor="#E8E8E8">Planning, Technology &amp; Facilities Vice President</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">111, 112</div></td>
 </tr>
 <tr> 
 <td>Campus Police (8:00am - 5:00pm)</td>
 <td><div align="center">181, 192</div></td>
 <td>Preschool</td>
 <td><div align="center">222</div></td>
 </tr>
 <tr> 
 <td bgcolor="#E8E8E8">After 5:00pm - Sheriff's Office</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">--------</div></td>
 <td bgcolor="#E8E8E8">President's Office</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">101, 103</div></td>
 </tr>
 <tr> 
 <td>Community Services</td>
 <td><div align="center">104, 105</div></td>
 <td>Public Information Office</td>
 <td><div align="center">153</div></td>
 </tr>
 <tr> 
 <td bgcolor="#E8E8E8">Complex Manager</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">289</div></td>
 <td bgcolor="#E8E8E8">Registrar's Office</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">108, 172, 173</div></td>
 </tr>
 <tr> 
 <td>Computer Lab (CR Building)</td>
 <td><div align="center">259</div></td>
 <td>Snack Bar</td>
 <td><div align="center">170</div></td>
 </tr>
 <tr> 
 <td bgcolor="#E8E8E8">Computer Services (AD Building)</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">131, 133, 134</div></td>
 <td bgcolor="#E8E8E8">Softball Coach</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">160</div></td>
 </tr>
 <tr> 
 <td>Copy Center</td>
 <td><div align="center">197, 199</div></td>
 <td>Sports Complex</td>
 <td><div align="center">289</div></td>
 </tr>
 <tr> 
 <td bgcolor="#E8E8E8">Dark Room</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">141</div></td>
 <td bgcolor="#E8E8E8">Stage - Auditorium</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">165</div></td>
 </tr>
 <tr> 
 <td>Dean of Instruction and Arts &amp; Sciences</td>
 <td><div align="center">104, 105</div></td>
 <td>Student Activities</td>
 <td><div align="center">146</div></td>
 </tr>
 <tr> 
 <td bgcolor="#E8E8E8">Dean of Student Affairs and Applied Science</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">191, 194, 339</div></td>
 <td bgcolor="#E8E8E8">Student Government</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">146</div></td>
 </tr>
 <tr> 
 <td height="22">Development Office</td>
 <td><div align="center">136, 137</div></td>
 <td>Student Support Services</td>
 <td><div align="center">203</div></td>
 </tr>
 <tr> 
 <td bgcolor="#E8E8E8">Director of Student Life</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">180, 177</div></td>
 <td bgcolor="#E8E8E8">TANF/Moving Into Tomorrow</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">280, 285</div></td>
 </tr>
 <tr> 
 <td>Distance Education Coordinator</td>
 <td><div align="center">244</div></td>
 <td>TV Studio</td>
 <td><div align="center">109</div></td>
 </tr>
 <tr> 
 <td bgcolor="#E8E8E8">Farm</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">274</div></td>
 <td bgcolor="#E8E8E8">Upward Bound</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">--------</div></td>
 </tr>
 <tr> 
 <td>Financial Aid</td>
 <td><div align="center">143, 144</div></td>
 <td>Veterinary Technology</td>
 <td><div align="center">270, 272</div></td>
 </tr>
 <tr> 
 <td bgcolor="#E8E8E8">Grant Writer</td>
 <td bgcolor="#E8E8E8"> 
 <div align="center">110</div></td>
 <td bgcolor="#E8E8E8">&nbsp;</td>
 <td bgcolor="#E8E8E8">&nbsp;</td>
 </tr>
 <tr> 
 <td>HELP Center</td>
 <td><div align="center">229</div></td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
</table>

i hope that is right since it wouldn't allow me to paste it all in at once.

edit: just a side question. why would this table not line up correctly, but the other one I have would? (i didn't paste its code since it is behaving like it should).

[badams1]

I set the height of the menu div to 25px and that fixed firefox's issue with the table not lining up.