| 4-col layout with text underlined?
|
badams1
msg:1184093 | 10:04 pm on Jan 11, 2005 (gmt 0) |
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
msg:1184094 | 10:21 am on Jan 12, 2005 (gmt 0) |
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
msg:1184095 | 4:43 pm on Jan 12, 2005 (gmt 0) |
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
msg:1184096 | 4:51 pm on Jan 12, 2005 (gmt 0) |
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
msg:1184097 | 4:55 pm on Jan 12, 2005 (gmt 0) |
from your description, it dsounds like tabular data, therefore, use a table!
|
badams1
msg:1184098 | 5:56 pm on Jan 12, 2005 (gmt 0) |
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
msg:1184099 | 7:15 pm on Jan 12, 2005 (gmt 0) |
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
msg:1184100 | 2:23 pm on Jan 13, 2005 (gmt 0) |
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
msg:1184101 | 9:28 pm on Jan 13, 2005 (gmt 0) |
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
msg:1184102 | 9:58 pm on Jan 13, 2005 (gmt 0) |
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 & 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 & 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 & 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 & 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 & 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"> </td>
<td bgcolor="#E8E8E8"> </td>
</tr>
<tr>
<td>HELP Center</td>
<td><div align="center">229</div></td>
<td> </td>
<td> </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
msg:1184103 | 3:44 pm on Jan 14, 2005 (gmt 0) |
I set the height of the menu div to 25px and that fixed firefox's issue with the table not lining up.
|
|
|
