homepage Welcome to WebmasterWorld Guest from 54.204.127.191
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

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




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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved