|
HTML - Html Documentation Regarding Valid Nesting Of Elements
We probably all know that if we run our HTML through the W3C validator, it will inform us if we've illegally nested one element inside another (e.g. placing a div within a span). Likewise, it will inform us if we've placed an element on the page but haven't used the correct containing element (e.g using a br, but not placing it within a p).
What I'm looking for is some kind of documentation or reference guide that I can use, so I don't have to do a Google search every time I want to know if I'm correctly nesting elements! I would have thought that this would be defined by the XHTML schema at http://www.w3.org/2002/08/xhtml/xhtml1-strict.xsd. While this schema does define all the elements, it doesn't define how they are allowed to be nested in one another. Where can I find the documentation that defines correct nesting of elements? It must exist somewhere... Similar TutorialsI've only been using HTML for a couple of weeks, so apologies if this is a silly question. My website has quite a few common parts (eg menu line and footer), and the way I've currently got it set up these are defined on every page, so any change has to be edited into every page. What I would like to be able to do is define my menu in a separate file and have each HTML page reference it. That way I can just change the one file and that will be reflected in each HTML page. Does that make sense ? I know that I could use frames, but would prefer to do it this way if possible. Thanks Hi All, I am newbie with HTML, I am having difficulties in nesting the tables. I have 4 <TD> tags in a <Table> but somehow due to some nesting issues when i am inserting a table in my 3rd <TD> my 4th <TD> goes out of the table. Here goes my Code... ------------------------------------------------------------------------------------------------------- <HTML> <BODY> <table border=1 width="100%"> <tr> <td>1st TD</td> <TD>2nd TD</td> <td>3rd TD <table> <tr> <table> <tr> <td>Info</td> <td>S/O</td> </tr> <tr> <td><select><option>Info about Renting</option></select></td> <td><input type="text" style="width:70px"></td> </tr> <tr> <table width="50%"> <td></td> <td>ABC</td> <td>DEF</td> <td>GHI</td> <td>JKL</td> </table> </tr> <table> </tr> </table> </td> <td>4th TD</td> </tr> </table> </BODY> </HTML> -------------------------------------------------------------------------------------------------------- Please Help!!!... -Gagan I figured I would just post this since having a problem with it this morning... Please bear in mind that I do recommend following the strict doctype - its just that I'm stuck with a CMS written about 8 years ago for this particular site I had the problems with. Anyway - our client noticed that there are styling discrepancies in IE... I checked the source code and found the following (the document is served as HTML4.01 Transitional): HTML Code: <p><font face="Verdana, Arial, Helvetica, Sans Serif" size="1">Blah<br> </p><p>More blah</p> What was happening in IE was that the unclosed <font> element was being terminated when the browser encountered the </p> tag... What was happening in FF was that the <font> element was being closed and then a new element placed in subsequent paragraphs... Hence, discrepancies in style between the two browsers... So - even when using an older doctype, it is important to check your code is well-formed and valid... As for me - I've now got to sit with our application developer and fix the CMS software... Hi, I have been searchign aroudn for some free scripts for scrollign news. All the ones i find use Iframes or have other elements whcih dotn validate for me. Any ideas where i can find one? The main requirements are below: Editable container size which the news scrolls in Editable speed of scrolling Ability to put links in the scrolling news news to scroll when loads, but on mouse over the news pauses so people can read the items. Cheers Rick I recently finished creating this html/css layout design. It's been put together with the use of tables, and is valid CSS and XHTML 1.0. However it just won't seem to show up correctly in any browser other than Internet Explorer. What is up!? Can someone please check my code over and help me out? I need to have this done by tomorrow and am totally lost! Thanks in advance! Here's the URL: http://barrel-house.ca/test/ I am currently creating some code containing a horizontal rule, some headers and a link that takes the user back to the top of the page. The page should look something like this... ------------------------------------------------------- HEADER ------------------------------------------------------- back to top HEADER How can I make it so that the header is the same distance from the horizontal rule regardless of whether the back to top link is present? At the moment whenever the 'back to top' link is present the header below is pushed down. Here is my code so far... Code:
<style type="text/css">
a{
margin-left:700px;
}
h2{
margin-top:20px;
}
</style>
<hr>
<h2>HEADER</h2>
<p>Paragraph here</p>
<hr>
<a href="#top">back to top</a>
<h2>HEADER</h2>
<p>Paragraph here</p>
I am designing the home page for a website. I have a list of links that is the site index that is 300px wide. I want this on the left side of the page. I want a paragraph that will basically be a introduction to the website to be inline with the index... sitting to the right of the index rather than below it. here is a simplified version of what I have: <body> <div id="wrapper"> <div id="head1"> <h1> page title </h1> </br> </div> <div id="list" <ul> <li> <a href="perps.html"> blah</a> </li> </br> <li> <a href="Why.html"> blah </a> </li> </br> <li> <a href="surveillance.html">blah </a> </li> </br> <li> <a href="me.html"> blah </a> </li> </br> <li> <a href="network.html"> blah </a> </li> </br> <li> <a href="mystory.html">blah </a> </li> </br> </ul> </div> <div id="intro"> <p> ***paragraph text****.</p> </div> </div> </body> CSS sheet: #list { width:230px; padding: 20px 0 0 20px; border-style: solid; list-style:none; } #intro { border-style:solid; float: right; padding: 0 0 0 0px; margin: 0 0 0 300px; border: 0 0 100px 0; } I know i need to use "span" but I have no idea where to start. Any help would be greatly appreciated. So, still rather new to writing HTML. I'm looking to put either a text field or drop down box onto the page dependent on a previously defined variable. How do I go about doing that? i was wondering if it is possible to nest ssi within each other... so like for this scipt i got from dynamicdrive.com for a drop down menu... is it possible to use ssi in side of ssi and it still work? Hey Guys, I want to have a square coloured grey and within that square I want another sqaure coloured gray. I want the layout to be fluid so if I expand or contract the browser the inner square will still maintain the same distance from the outer square. See the image below: I have tried and tried but I just cannot get it to work. I want to avoid using tables and stick to divs tags. Does anyone know how I can do this ? <html> <body> <script language="javascript"> function toggleDiv(divid){ if(document.getElementById(divid).style.display == 'none'){ document.getElementById(divid).style.display = 'block'; }else{ document.getElementById(divid).style.display = 'none'; } } </script> <table width="100%" align="left" cellspacing="1" cellpadding="0" class=table_bdr> <tr > <Td height="33" width="13%" align="left">CC</Td> <Td height="33" align="left" width="21%">Company name </Td> <Td height="33" align="right" width="14%">Clients</Td> <Td height="33" align="right" width="17%">Col1</Td> <Td height="33" align="right" width="17%">Col2</Td> <Td height="33" align="right" width="18%">Col3</Td> </tr> <tr > <Td height="20" width="13%" align="left">AB</Td> <Td height="20" align="left" width="21%">Company1 </Td> <Td height="20" align="right" width="14%" id="ss_report_link"><a href="javascript:;" onClick="toggleDiv('mydiv1');">12</a></Td> <Td height="20" align="right" width="17%">37</Td> <Td height="20" align="right" width="17%">14</Td> <Td height="20" align="right" width="18%">46</Td> </tr> <tr> <td colspan="6"> <div id="mydiv1" style="display:block; margin:0 0 0 0; padding:0 0 0 0; background:#C0E8FF"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <Td height="21" align="left" colspan="3" style="padding-left:130px" id=""><a href="#">Client1</a></Td> <Td height="21" align="right" width="17%">5</Td> <Td height="21" align="right" width="17%">1</Td> <Td height="21" align="right" width="18%">9</Td> </tr> <tr> <Td height="20" align="left" colspan="3" style="padding-left:130px" id=""><a href="#">Client2</a></Td> <Td height="20" align="right" width="17%">37</Td> <Td height="20" align="right" width="17%">12</Td> <Td height="20" align="right" width="18%">52</Td> </tr> <tr> <Td height="20" align="left" colspan="3" style="padding-left:130px" id=""><a href="#">Client3</a></Td> <Td height="20" align="right" width="17%">22</Td> <Td height="20" align="right" width="17%">17</Td> <Td height="20" align="right" width="18%">34</Td> </tr> <tr> <Td height="20" align="left" colspan="3" style="padding-left:130px" id=""><a href="#">Client4</a></Td> <Td height="20" align="right" width="17%">2</Td> <Td height="20" align="right" width="17%">1</Td> <Td height="20" align="right" width="18%">8</Td> </tr> </table> </div> </td> </tr> </table> </body> </html> This is my page (I have 14 columns actually. So every col gets less width than this). In Child table if I enter some lengthy value for Client name For ex: 'Client11111111111111111111111111111111111111111111' Every Column is moving right side. I dont want that. How to do that. I know this can be messy from time to time, but I believe this is the best way to lay out my page. This is for a report I'm producing. I have two columns on the left side of the information and the last two columns on the left that need to be visible at all times. There are a total of about 20 different columns. I have tried a few things but come to use three seperate tables, one on the left for the data that needs to be fixed there, one in the middle for data that can scroll and the last on the right for the other fixed data. I'm having trouble getting the table in the middle to scroll. Is this possible, and what code would help. The code involved is very lengthy currently, because I have the data in it. In the future the data will be generated by a seperate SAS program. Should I make this middle table an iFrame, or is it possible for it to scroll horizontally without using frames at all. Thanks for your help. Hello, I've been looking at this problem for a few hours now and can't see what i'm doing wrong. I just want to nest 2 tables inside 1 row of another table. Problem can be seen and you can view source at http://www.lakesdt.com/testindex.html Can anyone tell me where i've gone wrong? I'm using Notepad++ so that can confirm all my <tr> and <td>'s seem to match up. Any help much appreciated! Also open to suggestions for a better way to implement this, and also as each link on the left will load a page in the right is there a neater way to do this without reloading the whole page again? Best regards, Matt How do I make element's change their height automatically depending on whether they have anything contained within them? My page background is a div's bg image but the div hasn't expanded to the size of the contained elements. The div's name is nicola-bg Here is the site I have the same problem too with #image-section. That div is styled to have large borders but the borders don't extend to the height of the div's containing elements. I have a table which contains 1 row, and 2 cells within the row. One cell displays some text neatly centered. and the other an image. I've written some javascript to change the color of the cell when the mouse hovers above it. Nice...but How do I nest my table inside an anchor <a href=""> tag so that the visitor can click anywhere within the cell and be directed to the href? Ive nested the table inside a tag and it only worked in Mozilla & Opera, but Internet Explorer......need I say more? Please help? While in class today our instructor was covering a very controversial topic about why do you think that it is important for an XHTML document to valid? Well-formed? Personally I always do my best to make sure a document is true to the doctype listed. But, I don’t agree on the importance of maintaining an absolute (100% valid) doctype. I think accessibility comes first. While designing a website I have always took into account disabled visitors whom are dependent on screen readers or other services. Which may prevent them from navigating or understanding the content in a traditional manner that you and I take for granted. To me a well formed document is the cardinal rule. What is your opinion on this? Ok I have used one of these social bookmarking generators to make links to add to del.icio.us and other sites but the links don't validate. Look: HTML Code: <ul> <li><a href="http://del.icio.us/post?url=http://johnsonsroofingllc.com&title=Johnsons Roofing LLC">del.icio.us</a> </li> <li><a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?t=Johnsons Roofing LLC&u=http://johnsonsroofingllc.com">Yahoo MyWeb</a> </li> <li><a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=http://johnsonsroofingllc.com&title=Johnsons Roofing LLC">Google</a> </li> <li><a href="http://www.stumbleupon.com/submit?url=http://johnsonsroofingllc.com&title=Johnsons Roofing LLC">StumbleUpon</a> </li> </ul> How do I make this valid? Hi, Currently my website is valid XHTML but I am planning on re coding the whole thing. I wanted to use HTML because to me it's a little easier and more basic. If I just start out with the html and head tags and no DOCTYPE and use the basic tags...do you think it would still work ok? I just dont want to go through the whole validation thing. I know other sites who use plain HTML without validating and their site works fine. Also I was wondering if it matters about uppercase tags? like < HTML > and < A > or < a > does caps make any difference? I guess I should probably just try it and then test it on major browsers to see for myself. Any advice would be appreciated! I just want to use plain HTML without worrying about validation....but I also want to make sure that people can use it on all different monitor sizes and browsers (at least all major browsers). I know thats the whole point of validation, but pretty much my question is: if I use plain HTML tags, including deprecated ones such as the < font > tag if it would still be usable on major browsers? I'm wondering because I've noticed that even though the W3C claims they are deprecated, some of them still work anyways? Sometimes I wonder if the W3C is right about that? Thanks! Hey there, Could anyone please explain why it tells me that it is not a valid doc type, Well that is what it says here http://validator.w3.org/check?verbos...iplayer.com%2F The actual site is http://www.online-multiplayer.com Thanks in advance for any help. Im having problems making my site valid the error is below This page is not Valid HTML 4.01 Transitional! Result: Failed validation, 1 Error if i put in the tr the format/layout goes a miss is there anything i can do? Line 36, Column 3: start tag for "TR" omitted, but its declaration does not permit this . <td><!--- middle (main content) column end --> code 35 <table id="container"> 36 <td><!--- middle (main content) column end --> thanks alot |
|||||||