HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
Need to make space between wrapped text in a table narrower
Post new topic   Reply to topic    HTML Help Forum Index -> HTML Table
View previous topic :: View next topic  
Author Message
katie_c_s



Joined: 04 Dec 2007
Posts: 4

PostPosted: Tue Dec 04, 2007 9:33 am     Need to make space between wrapped text in a table narrower Reply with quote

Visit www.theroyalgazette.com for an example of the menu I am having trouble with. On the left of the page is a narrow menu with topics all the way down the page. When one of the topics is too long to fit, it wraps to the next line. I need to make the spaced between the wrapped lines narrower than the space between the topics. Here is the code. I have emitted the table attributes and other data as well as the java between the html for clarity, fyi. So this is only the data for the topics in the menu.

<td>
<a class="menu" href="<%= link %>"
target="_blank"
><b><%= subSections[j].getLongDisplay() %></b></a>
</td>

Thanks so much!
sticks464



Joined: 31 Dec 2006
Posts: 1116

PostPosted: Tue Dec 04, 2007 10:27 am     Reply with quote

Create a class and apply it to each <td> that has a link that wraps (give it a new name)

Code:
.class {
line-height:75%;
}

Adjust the percentage to your liking, not to exceed 100% (which is the default line-height).
katie_c_s



Joined: 04 Dec 2007
Posts: 4

PostPosted: Tue Dec 04, 2007 6:12 pm     Reply with quote

I made a class in a css sheet (I assumed that's what you meant), but I don't know how I can distinguish between the wrapped text and non-wrapped text in the jsp. Can you please explain that to me? Thank you. Here's from the css:

.wrap {
font-family:Verdana, Arial, sans-serif;
font-weight:bold;
font-size:8pt;
text-decoration:none;
color:#000000;
line-height: 75%;
}
sticks464



Joined: 31 Dec 2006
Posts: 1116

PostPosted: Tue Dec 04, 2007 8:10 pm     Reply with quote

This is one of your links that wraps the text
Code:
<td>
<a class="menu" href="./section.jsp?sectionId=7">
<b>Endurance World Cup 2007</b></a><br />
</td>


It should look like this
Code:
<td class="wrap">
<a class="menu" href="./section.jsp?sectionId=7">
<b>Endurance World Cup 2007</b></a><br />
</td>


You only have to apply a style that is not already defined. It will inherit all other styling.
Code:
.wrap {
line-height: 75%;
}
katie_c_s



Joined: 04 Dec 2007
Posts: 4

PostPosted: Wed Dec 05, 2007 8:48 am     Reply with quote

See the problem is that this is a jsp and the html is actually part of a loop, so if I put the wrap class at the top, it just changes all of the lines. You can see the java in the code:

<a class="menu" href="<%= link %>"
><b><%= subSections[j].getLongDisplay() %></b></a>


So I don't know how to specify when the text is wrapped or not. I've found out that wrapping is usually done by the browser, so I don't know where to go from here. I really appreciate your help!
sticks464



Joined: 31 Dec 2006
Posts: 1116

PostPosted: Wed Dec 05, 2007 1:37 pm     Reply with quote

If you apply the class to each <td> on each page that you want the text closer together in it will not effect the rest of the table elements. If you were to apply it globally to the table, then yes it would effect all table elements.
The only other way to remove the wrapping is to make the table wider to accomadate the longest text link.
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> HTML Table All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 

 
HOSTING / DESIGN
MAKE MONEY

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial