volitics
-
Posts
32 -
Joined
-
Last visited
volitics's Achievements
Newbie (1/7)
0
Reputation
-
dsonesuk; Thank you for responding to my problem. I appreciate the help. That's what I was beginning to think. I have been tinkering with this problem since yesterday evening.
-
Basically, all I am asking is: When displaying the <span> tag as a block element can the sum total of the margins, borders, padding, and width exceed the width of the <li> tag in which it is enclosed? With the above example the widths of each of the <span> tags exceed the widths of the <li> tags in which they are enclosed. If I open the above code in a browser window both <li> tags stay on the same line. Are they supposed to do that? Why are the <li> tags not breaking to the second line? ---- I've got the above figured right. Span <span> tags don't figure into the total width calculations of the <ul> tags. The <li> tags do. ((40+2) + (40+2)) = 84 Summary of widths from first post: ul.Legend{width: 84px;} li.Win{margin: 0px 0px 0px 0px;border: 1px solid purple; /* 1px times 2 sides equals 2px */padding: 0px 0px 0px 0px;width: 40px;} li.Loss{margin: 0px 0px 0px 0px;border: 1px solid purple; /* 1px times 2 sides equals 2px */padding: 0px 0px 0px 0px;width: 40px;}
-
Hello W3Schools; I am making an inline list using float left. It is for a baseball score table. Inside each of the list items I want to put <span> tags so each the winning and losing scores can have different colored backgrounds. The <span> tags need to be centered. Using just "display: block;" the "text-align: center;" directive in the <li> tag won't work. It won't center the <span> tag. It may not be proper coding technique, since <span> tags are already inline tags, but have found that using "display: inline-block;" will center the <span> tags. I am a little bit confused about setting the widths of the <span> tags. The other day I set the Win <span> tag class [see html below] at a width of 50px when the <li> tag in which it was enclosed was set at a width of 40px. The second <li> tag broke onto the second line. Today, I have set the Win <span> tag class to 50px and it simply pushes the text further to the right; and does not cause the second <li> tag to break to the second line. I can't remember what I did different the other day compared to today. I am familiar with the W3Schools "CSS Box Model." I have been using it.http://www.w3schools...ss_boxmodel.asp Question 1: a. When using "display: inline-block;" are the sum total of the <span> tags' left and right margins, borders, and padding plus the content supposed to be less than or equal to the content width of the <li> tag in which the <span> tag is enclosed? Question 1: b. When using "display: block;" are the sum total of the <span> tags' left and right margins, borders, and padding plus the content supposed to be less than or equal to the content width of the <li> tag in which the <span> tag is enclosed? Question 2. a. When using "display: inline-block;" or "display: block;" for <span> tags do the left and right margins, borders, and padding plus the content for a <span> tag impact the <li> tag in which the <span> tag is enclosed? Question 2. b. If so, how. I would appreciate any help with my problem. Thanks. ------- html code ----------<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><style type="text/css"> ul.Legend{padding: 0px;margin: 0px;list-style-type: none;border: 1px solid black;width: 84px;overflow: hidden;clear: both;} li.Win{margin: 0px 0px 0px 0px;border: 1px solid purple;padding: 0px 0px 0px 0px;width: 40px;background-color: lightblue;float: left;text-align: center;} li.Loss{margin: 0px 0px 0px 0px;border: 1px solid purple;padding: 0px 0px 0px 0px;width: 40px;background-color: lightblue;float: left;text-align: center;} span.Win{margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;width: 50px;background-color: tan;display: inline-block;} span.Loss{margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;width: 60px;background-color: grey;display: inline-block;} </style></head><body> <ul class="Legend"> <li class="Win"><span class="Win">Win</span></li> <li class="Loss"><span class="Loss">Loss</span></li> </ul> </body></html>--------------
-
I'm thinking about scrapping the JavaScript method for setting the cell widths and using CSS instead.My question is which is the best way of setting column widths - JavaScript or CSS?It looks the CSS method is the best method because of its simplicity. But I'm not sure if CSS is the overall best method rather than JavaScript.In the example below I have got the first column set to a width of 50 pixels and the second column set to a width of 400 pixels. The table has a width of 450 pixels just like the JavaScript example above.If I add a 25px padding to the first column it seems to automatically subtract the 25 pixels from the 400 pixel width specified for the second column.I've been tinkering with the CSS method. If I specify or change the cell padding and then set the cell widths using CSS it looks exactly the same in the browser window as with the identical settings using JavaScript. <head><style type="text/css">td.col01{width: 50px;}td.col02{width: 400px;}</style></head><body><table width="450"> <tr> // If I add a 25px padding here it seems to narrow // the width of the second column by 25px. <td class="col01" style="padding-left: 25px"> </td> <td class="col02"> </td> </tr></table> I would appreciate any input or opinions.Thanks.
-
Hello;I've noticed from the Html tutorial that sometimes the front slash is used when using form input tags and at other times the front slash is not used with form input tags.One example from the Html tutorials page has got this:http://www.w3schools.com/tags/tag_input.asp<input type="text" name="fname" value="Mickey" /> // This example uses the front slash.Yet a different page has got an input tag without the front slash:http://www.w3schools.com/html/html_forms.asp<input type="radio" name="gender" value="male"> // This example does not use the front slash.I noticed in one of the above examples they have used the front slash with the <br> tag like this "<br />."Can anybody tell me 1). What is the purpose of the front slash? and 2). When do I need to use the front slash?Thank you in advance.
-
How do I specify width of frameset and center it on page?
volitics replied to volitics's topic in HTML/XHTML
justsomeguy;Thanks for responding to my post.I'm beginning to think that you're right. I can't find anywhere on the w3schools web site where it tells how to manipulate frames.Thanks again. -
The frameset below goes all the way across the page. I want to limit the width to a specified pixel size (about 760 pixels) and center the frameset on the page leaving whitespace on both the left and right sides of the page.Can anybody tell me is there any way that I can get this frameset to be 760px wide and center itself on the page?<html><head><title>Frame Document</title></head>/* This frameset stretches all the way across the page. */<frameset cols="100,660"> <frame name="leftFrame" src="Navigate.html"> <frame name="mainFrame" src="Front.html"></frameset><noframes><body></body></noframes></html>
-
Hello;Will text and a forum object, such as a drop down menu or a text field, stay aligned horizontally if I put them in the same table cell?Here's what I'm talking about: <tr> <td><select><option value="N">No</option><option value="Y">Yes</option></select>// Will the below text align to the right of the drop down menu or is it likely// to slip underneath or on top of the drop-down menu in some browsers?This is text for use on the web page.</td></tr> I've got an IE 6.0. The text aligns horizontally to the right of the drop down menu in my browser. I'm wondering do I need to put a table inside the table cell in order to guarantee that the text aligns to the right of the drop down menu? <tr> <td> // Putting a table inside the table cell guarantees that the text will // align properly to the right. But do I need the table? <table> <tr> <td> <select> <option value="N">No</option> <option value="Y">Yes</option> </select> </td> <td> This is text for use on the web page. </td> </tr> </table></td></tr> Thanks in advance.
-
Hello;Can any body tell me how to display the results of a search in this forum in line item format?When you do a search using this forum's software the search results show a box that has the first post in its entirety. That's too much for me. All I want to see is the post heading.Is there any way I can adjust the settings in my control panel so that the search results are shown only in line item format?Thanks.
-
pulpfiction;Thanks for the help.
-
Hello;I am setting the width of table cells using JavaScript. I am setting the padding of table cells using CSS.I have got a table with one row and two cells. The table has a width of 450 pixels. The cell on the left has a width of 50 pixels. The cell on the right has a width of 400 pixels. Adding the cell widths together equals the 450 pixel table width.Here's what the table looks like without any cell padding: <head><script type="text/javascript">function setWidth() { document.getElementById('cell01').width="50px"; document.getElementById('cell02').width="400px"; } </script></head><body onload="setWidth()"><table width="450"> <tr> <td id="cell01"> </td> // This cell has a width of 50 pixels. <td id="cell02"> </td> // This cell has a width of 400 pixels. </tr></table> The problem I am trying to figure out is this: If I pad the left table cell by 25 pixels do I need to subtract the 25 pixel cell padding from the 50 pixel width of the left table cell or the 400 width of the right table cell in order to keep the table at a 450px width?The table below shows the table with the 25px left cell padding: <head><script type="text/javascript">function setWidth() { document.getElementById('cell01').width="50px"; document.getElementById('cell02').width="400px"; } </script></head>// If I add together the cell widths plus the cellpadding width it equals more than the 450px table width.// Calculation: left cell, 50px plus right cell, 400 px, plus cellpadding 25 px = 475 px<body onload="setWidth()"><table width="450"> <tr>// Do I need to subtract the 25px cell padding from the 50px or// the 400px cell widths specified in the JavaScript cell widths. <td id="cell01" style="padding-left: 25px"> </td> <td id="cell02"> </td> </tr></table> Thanks.
-
pulpfiction;Thanks for responding.Using semi colons works. But it also works using the commas. Am I supposed to use semi-colons instead of commas?
-
Hello;I'm working on a web site where I've got three JavaScript functions defined in the <header> tag. All three functions are activated by the "onload" JS event. My question is: Can I put all three of the functions inside the <body> tag and call/activate all of the functions with the same "onload" JS event?I have scoured the W3Schools web site documentation and have not found the answer. All of the examples that I have found have only one (1) JS function called using the "load" JS event.Here are the functions: <head><script type="text/javascript">function logoAlign() { document.getElementById('logo').align="center"; }function setWidth() { document.getElementById('navCell00').width="150px"; document.getElementById('navCell01').width="350px"; document.getElementById('navCell02').width="260px"; }function alignCell() { document.getElementById('topNav').align="center" }</script></head> I have put the three functions all inside the <body> tag like so: <body onload="logoAlign(), setWidth(), alignCell()"> The first function aligns the page logo image, the second function sets the width of columns within a table, and the third functions aligns the text inside table cells.Thanks in advance.