|
HTML - Menu.style.width = Text.length Gives Number Of Letters But I Need The Actual Width
im creatinh a box containing a text. The box must be wide enough to fill a text.
menu.style.width = tekst.length - this functioin gives the number of letters in text. So if the text is "hello" then the width is 5 pixels. But i need the widith of pixels needed to fit the text in a box. How can i do that? Similar TutorialsHi, I am new in web designing. I need your guidance. I want to break a word if it is longer than table width. May be I am not good at Engilsh. So I'll explain it using example. Following is my code. Code: <html> <body> <table align="justify" width="100" border"3"> <tr> <td> TE-sdf-sdf-hkjd </td> </tr> </table> </body> </html> As here you can see the word "TE-sdf-sdf-hkjd" length is more than 100px. So the width of table becomes more than 100px. I want to break the word and fix the width of table to 100px. How can I achieve that? Waiting for your reply. Hi, Is there away to force my website to fit an Iphone screen when viewed on the iphone. At the moment the width doesn't full span the Iphones screen so it looks bad. http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Thanks alot Joe Hi, I have a website at http://www.homecookingdiary.com with a drop down menu on the right side. The problem I am having is that once you click on the arrow, the size of the table containing the words isn't consistent on Firefox and IE. On Firefox, the width automatically changes according to the length of the submenu. On IE, the width is fixed so that any long subtitles are cut off. I want to fix this problem so that on IE, the width automatically adjusts according to the words. I used this code below. <select onchange="self.location.href=''+this.options[this.selectedIndex].value+''" style="font-size:12px;color:#006699;font-family:verdana;background-color:#ffffff;width:140px" name="menu"> Please let me know how I can fix this problem. Thank you. Does anyone have an idea how I can make the text in the TD-tags fit 100% in its cell. Help would be highly appreciated. Quote: <html> <style> .text {text-transform: uppercase; } </style> <body> <center> <table width="500" border="1"> <tr> <td> <span class="text">Text nrjkfb bfd df bfdfbhj</span> </td> </tr> <tr> <td> <span class="text">Text hjkbjkbjk</span> </td> </tr> </table> Hi, In my site: www.theticketsguide.com I am trying to set the width of the text "This is a test. Sample content..." to only span about half the page. This is the code I have so far: <font style="color: rgb(204, 204, 204);" size="6" width="440" ><span style="font-family: Arial,Helvetica,sans-serif;">This is a test. Sample content will go here. Sample content will go here. Sample content will go here.</span></font></h1> The width function isn't working. What am I doing wrong? Thanks, Brandon Reference: http://test5.waltonstreetwebdesign.com/contact.php So there are 3 text inputs there and 1 textarea, I need them to be the same width. The thing that I don't get is that each input has the same CSS class giving it a width. So why aren't my text inputs the same length as the textarea? I'm looking at this on a Mac, it's not the same width in both FF and safari. Thank you for the help! Hi All, Nice site BTW, my problem is i want to add some text with a background colour behind it but i want the background colour to stretch the full width of the page ? Can anybody help me out Thanks Here is a (very trimmed-down) version of my site: http://www.nceccec.com/en_us/css_test.html At least in IE6 and IE7, the top field does not display the specified left margin, while the bottom one correctly shows the left margin. There is only one difference between these two fields: the CSS property width is set on the first field, while no width is set on the second field. Here is all the code for this page in case someone wants to view it he HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style rel="stylesheet" type="text/css">
.fielditself {
font-weight : normal;
display : block;
margin-left : 5%;
}
</style>
<body>
<table style="width : 100%;">
<tr>
<td>
<form method="post" action="check_order.php">
<div><div>Year</div><div class="fielditself"><input style="width : 9ex;" type="text" name="year" /></div></div>
<div><div>Make</div><div class="fielditself"><input type="text" name="make" /></div></div>
</form>
</td>
</tr>
</table>
</body>
</html>
Thanks for any guidance! Jason Hi there, I am currently building a website in dreamweaver. It's going slow but so far I have overcome ever problem with the help of people like you! The problem I'm at at the moment is pretty tricky. If you visit. http://aquariusspa.co.uk/flw%5Fver2/flw_ver2.html This site I built with photoshop and then exported as html. Now i'm adding content and the nav bar (which isn't quite working right!). So what i'm looking to do is have the main box (one with welcome in it) change height depending on what i enter in to it. Every page has different amount of text. Now I could just build every page in photoshop for the desired page height but surely there must be a way of stretching what i've got with out wreaking the graphics. Thanks in advance. S I have a menu made up of one div and within that div are more divs to make up the separate menu items. I am trying to add a background colour to the holding div but it's not having any effect. When I investigate the div order in web developer it shows that it's not extending to the height of the menu divs inside it. Please help. It's menu_nav I am trying to put a background on. HTML: HTML Code: <div id="menu_nav">
<div class="mainMenu">
<a href="#">HOME</a>
</div>
<div class="mainMenu">
<a href="services.html" onmouseover="mopen('servicesSub')" onmouseout="mclosetime()">SERVICES</a>
<span id="servicesSub" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Website Production</a>
<a href="#">Hosting & Domains</a>
<a href="services.html#design">Design & Branding</a>
<a href="video.html">Video Production</a>
<a href="#">Interactive Media</a>
</span>
</div>
<div class="mainMenu">
<a href="portfolio.html" onmouseover="mopen('portSub')" onmouseout="mclosetime()">PORTFOLIO</a>
<span id="portSub"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="portfolio.html#websites">Websites</a>
<a href="portfolio.html#programs">Programs</a>
<a href="#">Video</a>
<a href="#">Animation</a>
<a href="#">Design</a>
<a href="#">Web solutions</a>
</span>
</div>
<div class="mainMenu">
<a href="info.html" onmouseover="mopen('aboutSub')" onmouseout="mclosetime()">INFO</a>
<span id="aboutSub" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="prices.html">Prices</a>
<a href="sitemap.html">Sitemap</a>
<a href="aboutUs.html">About Us</a>
<a href="contact.html">Contact</a>
</span>
</div>
</div>
CSS: Code: * MAIN MENU NAVIGATION*/
#menu_nav a, #servicesSubMenu a
{
text-decoration:none;
color:black;
}
#menu_nav
{
width:950px;
background-color:#E6E6E6;
height:auto;
margin-top:0px;
font-size:11pt;
margin:auto;
}
.mainMenu
{
float:left;
float: left;
margin: 0px 75px 0px 75px;
background-color:#E6E6E6;
line-height:30px;
}
.mainMenu a
{
line-height:20px;
display: block;
font-size:11pt;
text-align: left;
text-decoration: none;
background-color:#E6E6E6;
}
#menu_nav a:hover, #footer a:hover, #left_menu_column a:hover
{
color:RGB(5,127,204);
}
/*DROPDOWN MENU*/
#servicesSub, #portSub, #aboutSub
{
visibility:hidden;
position:absolute
}
#servicesSub a, #portSub a, #aboutSub a
{
width:150px;
border-bottom:1px solid white;
color:grey;
padding-left:4px;
padding-right:4px;
padding:5px;
}
hi, I have this:<form > <input id="Email" maxlength="40" name="Email" size="40" type="text" value=""><br /> <input id="pwd" maxlength="40" name="pwd" size="40" type="password" value=""> <label for="Submit"> </label> <input id="Submit" name="Submit" type="submit" value="Submit"> </form> In Safari and Firefox, the two boxes look the same length, you can see from diff_ff.jpg, but in IE, it looks different(please see diff.jpg), if I change "password" to "text" they will look the same in length, any solution to this? Thanks, A.C. Does anyone know the average width of a screen in html code? I'm using a widescreen labtop to create a website, and I'd like to design it for the normal size screen. Here at ultdmovies.com, I need to find the width I made the whole thing, and plus the width of the forum at ultdmovies.com/forum. Thanks! How do I get an image to be 100% of the screen width, without creating a sideways scroll bar in lower screen resolution displays? Cheers _____________ Affordable Home Insurance bedroom furniture Hey all. This is my first post on this forum and I'm new to HTML and CSS, so please bear with me. I apologize if it's in the wrong forum. I've got a problem with my HTML code (I combine HTML with CSS). Imagine I have a navigation bar on the left that takes up 10 'em's. Just to the right of that navigation bar is the space that contains the actual content of the page (separated by <div id="actualcontent"> </div> tags. Works just fine... till I define a table within that content tags. The table is almost always too large (a horizontal scroll bar appears) or too small. I want the table to fill exactly 100% of the width of the "<div id="actualcontent"> </div>" tags, not 100% of the width of the whole window (which would include the navigation bar). Code: <table width="100%"> </table> makes the table as wide as the window. Yet, I want it to be only as wide as its parent (the actual content). I do not want to set the width to something like "80%" and HOPE that the size is okay and no horizontal scroll bar shows up. Because it could be too much or too less once the user resizes the window. However, if I specify the width in pixels or 'em's (in CSS) I'll have the same problem: I can never be sure that the table will fill out EXACTLY 100% of its parent, the width you specify seems to always be the width in relation to the whole window. Is there a solution to my problem? Thanks in advance , AvoC Hi, I have a question to all. How can I made 100% header (bg only), normal content area (fixed width) then 100% box and below normal content area (fixed wifth and at last 100% footer. Please check my new website at http://www.lombrozo.co.uk the main part of each page is a table with width set to 100%, but as you can see, it doesn't quite fill the width of the browser, you can see this by the thick grey line on the right side... Any ideas? any help much appreciated. Thanks, Simon. Hello! I am trying to figure out how sites makes banners that are always 100% of the screen width no matter what resolution. I tried <table width=100% border=0> but there is still some white space around the edges so its not really 100%. Is it a style sheet command that does this? Thanks! I don't know if this is supposed to be posted here or in the css forum - so correct me if I'm doing it wrong. I'm making a table with a variable number of colums. The first column should be allowed to have a width of 30 % if it is needed by the text, but less if it is not needed. (This can style="max-width:30%" do for me). The rest of the columns can use the space that the first columns doesn't use, but shouldn't be able to force the first column to be smaller. If I use max-width the first column might be smaller than 30% because of the rest of the columns forces it to be so, and if I use width=30% the width will be 30% even if the text in the first column doesn't need 30%. Can anyone help me? Hi, ive been trying to solve the image in the table but couldnt get it right.. I need help from you guys.. kindly see the attached image for the error: and this is the HTML code HTML Code: <table cellpadding="0" cellspacing="0" border="0" width="600px" bgcolor="#FFFFFF">
<tr>
<td width="34">
<img src="{/document/config/static-image-url}3_1_3.gif" alt="" border="0" width="34" height="116" />
</td>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="268" bgcolor="#FFFFFF" height="116">
<tr>
<td align="left" width="268" bgcolor="#FFFFFF">
<span class="price1" style="color:#000000;font-size:12px;font-family:Arial;font-weight:bold">
<xsl:call-template name="fixLines">
<xsl:with-param name="inText" select="/document/page/field-set/field[tagname = 'text_15']/value" />
</xsl:call-template>
</span>
</td>
</tr>
<tr>
<td align="left" width="268" bgcolor="#FFFFFF">
<span class="price1" style="color:#000000;font-size:12px;font-family:Arial">
<xsl:call-template name="fixLines">
<xsl:with-param name="inText" select="/document/page/field-set/field[tagname = 'text_16']/value" />
</xsl:call-template>
</span>
</td>
</tr>
</table>
</td>
<!-- the error image which needs to be aligned-->
<td>
<img src="{/document/config/static-image-url}3_1_5.gif" alt="" border="0" width="61" height="116" />
</td>
<!--END OF the error image which needs to be aligned-->
<td align="left" width="290" bgcolor="#FFFFFF" valign="top">
<span class="price1" style="color:#000000;font-size:12px;font-family:Arial;font-weight:bold">
<xsl:call-template name="fixLines">
<xsl:with-param name="inText" select="/document/page/field-set/field[tagname = 'text_17']/value" />
</xsl:call-template>
</span>
</td>
<td>
<img src="{/document/config/static-image-url}3_0.gif" alt="" border="0" width="100" height="116" />
</td>
<td>
<img src="{/document/config/static-image-url}3_1_4.gif" alt="" border="0" width="32" height="116" />
</td>
</tr>
</table>
Hope to get a response asap.. thank you guys, Regards, Ed |
|||||||