Ad: Manage updates with the Download App
ie8 fix

Coding & scripting forum: I want horizontal squishy, no_wrap behavior for my Table

by: vmars956 April 16, 2010 9:58 PM PDT

Like this

0 people like this thread

Staff pick

I want horizontal squishy, no_wrap behavior for my Table

by vmars956 - 4/16/10 9:58 PM

I have a webPage of nothing but DropDown Menus each containing links of a specific Category. Typically it shows 4 DropDowns per page.
The height="100%" for TABLE works fine: as I manually shrink the window height, the DropDowns get closer and closer together, vertically.
But how can I get this same squishy behavior for the Table_width, maybe I could call it Squishy_No_wrap behavior. Where: as I shrink the window width, the DropDowns get narrow-er and narrow-er, from right to left? Below is an mini-sampling of what my code looks. If you's like me to post the whole thing, let me know. (I say no_wrap because I don't think its possible to wrap a DropDown_Menu.)
Thanks...vmars

<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">

<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"><col width=10<>
<center>
<tr><td width="15%" align="center" valign="middle">
<form name="HotBasic">
<select style="font-size:14px;color:#000000;font-family:Verdana;background-color:#ffffff;" name="menu" onChange="location=this.options[this.selectedIndex].value;">
<option value="">HotBasic</option>
<option value="http://tech.groups.yahoo.com/group/hotbasic/">HotBasic Support Group @ Yahoo</option>
<option value="http://mypages.cwdom.dm/keenej/hotbasic.html">HotBasic Home Page</option>
</select></form>
</td><td width="15%" align="center" valign="middle">
<form name="Miscellaneous">


Reply
Report offensive post
Email to friend

How to Truncate_Rightmost content of a given cell? Html

by vmars956 - 4/17/10 10:02 AM

In Reply to: I want horizontal squishy, no_wrap behavior for my Table by vmars956

winXP sp2, chrome
Maybe i am using the wrong words, squishy/nowrap.
The effect i am after is for example, Notepad.
Where if i have noWrap on, and the notepadWindow is set to maybe ~50%.
If i have long lines of text, with noWrap, the rightmost portions of those long lines gets TRUNCATED.
That's the effect i am after. Where the DropDown_Menus is (purposely) to large for the TD cell.
Maybe this is a better way to say: How to Truncate_Rightmost content of a given cell?
Thanks...vmars


Was this reply helpful? (0)   (0)

Staff pick

Reply
Report offensive post
Email to friend

If you have not resolved the issue yet...

by John.Wilkinson Moderator - 4/20/10 10:36 AM

In Reply to: I want horizontal squishy, no_wrap behavior for my Table by vmars956

Note that you can stylize nearly any element using CSS, making it possible to set a variable width (example: width:25%) for the select/option tags. Note that you should also set a minimum width (example: min-width:100px), for if the browser window is too small, the content may 'squish' to a width at which no text is visible.

John


Was this reply helpful? (0)   (0)

Staff pick

Reply
Report offensive post
Email to friend

I didn't know abour min-width.

by vmars956 - 4/20/10 1:55 PM

In Reply to: If you have not resolved the issue yet... by John.Wilkinson Moderator

Here's pretty much what I wanted:

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>No title</title>
</head>

<body vlink="purple" alink="red" bgcolor="white" link="blue" text="black">

<table width="624" border="1">
<tbody>
<tr>
<td width="200">
<select
style="width: 150px; font: 14px verdana; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"
name="menu" onchange="location=this.options[this.selectedIndex].value;">
<option selected="selected" value="">Financial_Banking</option>
<option
value="http://venturebeat.com/2009/02/06/obama-appoints-john-doerr-to-economic-advisory-board/">Obama
appoints John Doerr to economic advisory board</option>
<option
value="http://www.cbsnews.com/video/watch/?id=6228923n">BloomBox
Oxide-Air/battery @ 60minutes</option>
</select>
</td>
<td width="200">
<select
style="width: 150px; font: 14px verdana; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"
name="menu" onchange="location=this.options[this.selectedIndex].value;">
<option selected="selected" value="">Financial_Banking</option>
<option
value="http://venturebeat.com/2009/02/06/obama-appoints-john-doerr-to-economic-advisory-board/">Obama
appoints John Doerr to economic advisory board</option>
<option
value="http://www.cbsnews.com/video/watch/?id=6228923n">BloomBox
Oxide-Air/battery @ 60minutes</option>
</select>
</td>
<td width="200">
<select
style="width: 150px; font: 14px verdana; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"
name="menu" onchange="location=this.options[this.selectedIndex].value;">
<option selected="selected" value="">Financial_Banking</option>
<option
value="http://venturebeat.com/2009/02/06/obama-appoints-john-doerr-to-economic-advisory-board/">Obama
appoints John Doerr to economic advisory board</option>
<option
value="http://www.cbsnews.com/video/watch/?id=6228923n">BloomBox
Oxide-Air/battery @ 60minutes</option>
</select>
</td>
</tr>
</tbody>
</table>

<p></p>
</body>
</html>


Thanks for this:
(example: min-width:100px)
I didn't know abour min-width.
Can you aim me at a list of css properties such as min-width?

Thanks....vmars


Was this reply helpful? (0)   (0)

Staff pick

Reply
Report offensive post
Email to friend

Reference guide...

by John.Wilkinson Moderator - 4/21/10 9:49 AM

In Reply to: I didn't know abour min-width. by vmars956

W3Schools is a good place for introductory information and tutorials for a variety of languages, including CSS and HTML. Once you get comfortable with CSS, you can use it to reduce/eliminate your reliance on the table-based layout as well as attributes (such as width, border, bgcolor, etc.) and tags (such as center) that have been deprecated (should no longer be used) under XHTML1.0/1.1 and HTML5. You can also use classes to eliminate the repeated application of inline CSS rules using the style attribute.

Hope this helps,
John


Was this reply helpful? (0)   (0)

Staff pick

Reply
Report offensive post
Email to friend

More Discussions

Forum Icon Legend

  • UnreadUnread
  • ReadRead
  • Locked threadLocked thread
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  • ModeratorModerator
  • CNET StaffCNET Staff
  • Samsung StaffSamsung Staff
  • Norton Authorized Support TeamNorton Authorized Support Team
  • AVG StaffAVG Staff
  • avast! Staffavast! Staff
  • Webroot Support TeamWebroot Support Team
  • Acer Customer Experience TeamAcer Customer Experience Team
  • Windows Outreach TeamWindows Outreach Team
  • DISH staffDISH staff
  • Dell StaffDell Staff
  • Intel StaffIntel Staff
  • QuestionQuestion
  • Resolved questionResolved question
  • General discussionGeneral discussion
  • TipTip
  • Alert or warningAlert or warning
  • PraisePraise
  • RantRant

You are e-mailing the following post: Post Subject

Your e-mail address is used only to let the recipient know who sent the e-mail and in case of transmission error. Neither your address nor the recipient's address will be used for any other purpose.

Sorry, there was a problem emailing this post. Please try again.

Submit Email Cancel

Thank you. Sent email to

Close

Thank you. Sent email to

Close

You are reporting the following post: Post Subject

If you believe this post is offensive or violates the CNET Forums' Usage policies, you can report it below (this will not automatically remove the post). Once reported, our moderators will be notified and the post will be reviewed.

Offensive: Sexually explicit or offensive language

Spam: Advertisements or commercial links

Disruptive posting: Flaming or offending other users

Illegal activities: Promote cracked software, or other illegal content

Sorry, there was a problem submitting your post. Please try again.

Submit Report Cancel

Your message has been submitted and will be reviewed by our staff. Thank you for helping us maintain CNET's great community.

Close

Your message has been submitted and will be reviewed by our staff. Thank you for helping us maintain CNET's great community.

Close

You are posting a reply to: Post Subject

The posting of advertisements, profanity, or personal attacks is prohibited. Please refer to the CNET Forums policies for details. All submitted content is subject to CBS Interactive Site Terms of Use.

You are currently tracking this discussion. Click here to manage your tracked discussions.

If you're asking for technical help, please be sure to include all your system info, including operating system, model number, and any other specifics related to the problem. Also please exercise your best judgment when posting in the forums--revealing personal information such as your e-mail address, telephone number, and address is not recommended.

Sorry, there was a problem submitting your post. Please try again.

Sorry, there was a problem generating the preview. Please try again.

Duplicate posts are not allowed in the forums. Please edit your post and submit again.

Submit Reply Preview Cancel

Thank you, , your post has been submitted.

> Click here to view your post. > Manage your tracked discussions. > Track this discussion. Close

Thank you, , your post has been submitted and will appear on our site shortly.

Close