|
HTML - Proper Markup For Nested List
Hi,
I'm writing a terms and conditions page in plain XHTML where we have lots of text along the lines of this: 1 Lorem ipsum intro to 1 1.1 More blurb goes in here 1.2 and a whole bunch of other stuff you can't do 2 La-di-dah here's section two 2.1 this that and the other I'd like to use nested ordered lists (OL tags), but we are quite rigid about the numbering in that the sub-sections must be x.x. This is so we can refer to them without any ambiguity. Getting the layout and positioning is no problem, but I don't see how to write this with OL tags. I tried using VALUE="2.1" in the LIs but this doesn't work. I'm assuming a list is the proper thing to use in this case, but I'm open to other ideas (DL maybe???). Similar TutorialsI'm using this markup for this layout. I am wondering if this is valid markup. My main concern is SEO so I have to worry about validation and accessibility. What are your thoughts on this? HTML Code: <dl class="side-display wide"> <dt class="frame-it"><div class="crop-it"><a href="#"><img src="#" alt="" /></a></div></dt> <dd><h3><a href="#">Ferrari Dino: 40...</a></h3></dd> <dd class="subdue"><img src='#' alt=""></dd> <dd>Posted on 12/17/2008</dd> <dd>Ferrari Dino is one of the most important car models created by the...</dd> </dl> Please tell if these markup validation errors can be fatal? Thanks. I was not able to extract a character encoding labeling from any of the valid sources for such information. Without encoding information it is impossible to reliably validate the document. I'm falling back to the "UTF-8" encoding and will attempt to perform the validation, but this is likely to fail for all non-trivial documents. Read the FAQ entry on character encoding for more details and pointers on how to fix this problem with your document. No DOCTYPE found! Attempting validation with HTML 4.01 Transitional. The DOCTYPE Declaration was not recognized or is missing. This probably means that the Formal Public Identifier contains a spelling error, or that the Declaration is not using correct syntax. Validation has been performed using a default "fallback" Document Type Definition that closely resembles "HTML 4.01 Transitional", but the document will not be Valid until you have corrected this problem with the DOCTYPE Declaration. Learn how to add a doctype to your document from our FAQ. This page is not Valid (no Doctype found)! Below are the results of attempting to parse this document with an SGML parser. 1. Error Line 2 column 0: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>". <HTML> The checked page did not contain a document type ("DOCTYPE") declaration. The Validator has tried to validate with a fallback DTD, but this is quite likely to be incorrect and will generate a large number of incorrect error messages. It is highly recommended that you insert the proper DOCTYPE declaration in your document -- instructions for doing this are given above -- and it is necessary to have this declaration before the page can be declared to be valid. ✉ 2. Error Line 8 column 74: required attribute "ALT" not specified. ..."><img src="images/wl468v2.gif" width=800px></span> </div> The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element. Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>. ✉ 3. Error Line 9 column 58: required attribute "ALT" not specified. <div id="links"><img src="images/lotto_04.jpg" width=800px></span> ✉ 4. Error Line 9 column 65: end tag for element "SPAN" which is not open. ...s"><img src="images/lotto_04.jpg" width=800px></span> The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem. If this error occured in a script section of your document, you should probably read this FAQ entry. ✉ 5. Error Line 22 column 39: end tag for "FONT" omitted, but its declaration does not permit this. <input type="submit" value="Login"></td></tr> * You forgot to close a tag, or * you used something inside this tag that was not allowed, and the validator is complaining that the tag should be closed before such content can be allowed. The next message, "start tag was here" points to the particular instance of the tag in question); the positional indicator points to where the validator expected you to close the tag. ✉ 6. Info Line 20 column 0: start tag was here. <font size="2">Remember me next time 7. Error Line 32 column 3: document type does not allow element "H2" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag. <h2>Tired of Losing?</h2> The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). ✉ 8. Error Line 33 column 2: document type does not allow element "P" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag. <p>Do you buy horses? ✉ 9. Error Line 49 column 7: document type does not allow element "TABLE" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag. <table><tr><td>Level </td> <td># of Members</td> <td>Commission</td> <td>Total ✉ 10. Error Line 64 column 47: required attribute "ALT" not specified. <img src="images/horse_12.jpg" width=800px> Resolved thanks... I still need to know how to get a language Detected Hi guys, new poster here. I just used Filezilla to change the index.html file of a website. What I did is paste my html into the document in textedit, saved it as html, then used filezilla to overwrite to old file in the site's directory. Now when I go to the site's index page, all I see is the markup from the file that I updated with. Why isn't it showing my design? Thanks a lot. you have 3 floating divs. "bottom" "top" and "middle". "top" is inside of "bottom" --> in this scenario, can "middle" div ever be above "bottom" div, but below "top" without being inside of "bottom" div? Code: <div id="bottom" style="position:absolute; top:100px; left:100px; width:200px; height:100px; z-index:1; background-color:#F00;"><h1>bottom</h1> <div id="top" style="position:absolute; top:100px; left:150px; width:200px; height:100px; z-index:3; background-color:#00F;"><h1>top</h1></div> </div> <div id="middle" style="position:absolute; top:150px; left:150px; width:200px; height:100px; z-index:2; background-color:#0F0;"><h1>middle</h1></div> I am having HTML page which also includes css. It works properly in firefox, but in IE the whole document is not get well aligned What changes should i have to make to view it in any browser. Thanks Hello, I'm currently hosting my website through another domain but am using a .com which forwards you to my site. Example; go to www.example.com and it takes you to www.bluered.com/example/main.html . The problem is that when searching through Google, it is not recognizing my .com name, only the hosting url. I attempted a Java 301 redirect which I applied to the body section of my HTML but I am not sure if it worked. This is the code I entered: <% response.setStatus(301); response.setHeader( "Location", "http://www.new-url.com/" ); response.setHeader( "Connection", "close" ); %> I replaced the "http://www.new-url.com/" with my .com name and placed this code in the code on my landing page. Can anyone give me some suggestions, tips? It would be greatly appreciated. Thank you I am still unsure of the proper time to use <td>s <table>s etc. I have been getting into the habit of always useing CSS to format my pages. Will using <table>s make it any easier to make my web pages? Second, I was wondering if there are any good websites providing free help with Fireworks 8. I am not very good with it and want to learn more to make my sites more appealing. Thank-you. Nathan I am unsure which of the below methods of embedding a flash object into a web page is correct - and which is a deprecated method. Any help would be very much appreciated! Method one: <object width="800" height="480"> <param name="movie" value="Gallery.swf"> <embed src="Gallery.swf" width="800" height="480"> </embed> </object> -- Method two: <script type="text/javascript"> var flashvars = {XMLFile: "gallery.xml"}; var params = {bgcolor: "#000000"}; swfobject.embedSWF("Gallery.swf", "myAlternativeContent","800", "480", "9.0.0",false, flashvars, params); </script> <div id="myAlternativeContent"> <a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/> </a> </div> Hello, I'm writing .html text usully like: Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="image" content="no" /> </head> But all website's syntax a Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="image" content="no" />
</head>
Is there any software to make that ? Or i have type by hand everythink ? Currently my website uses frames and no css. I need to update it, but I'm in a huge time crunch!!! (And don't know css and only know very very basic HTML) I need my website to be functional (not in limbo) by next weekend, so it either has to stay how it is now (frames & older HTML) or be totally done by then. Is there anywhere that I can get help to do this automatically instead of waiting until later when I have way more time to learn it myself (that changes your code easily/automatically), or super awesome people who love HTML and will do it for me? It's a pretty simple/basic website and I would be SO so SO appreciative. Hi, my name is Josh, and I'm fairly new to website design, so therefore, also a little new to HTML. I apologize in advance for the length of my post, but I feel I really need to be specific as much as possible. Let me be honest with you. I have very limited knowledge on the subject, but I am a quick learner. Anyway, I'm creating a directory on my website where the visitor would be able to clink on one of 51 links, aligned in 3 columns, to take them to a page listing businesses within one of the 50 states. The 51st link, of course, would be directing visitors to an international listing page. Then below the links for the different states, there is supposed to be 26 links, one for each letter of the alphabet, so the visitor can find a business by name. Following that, of course, would begin the listing of the businesses. Basically, I've been teaching myself HTML so far by viewing the source code of pages I visit, and I discover a basic idea of how to do different things with web design. Let me show you the format I've been trying to grasp with this project by giving you an example code. The following code places the links for the states all at the bottom, and also they are not aligned properly, as the first column appears higher than the second which is also higher than the third. I'm not sure I quite understand the way this code works, or what mistake I'm making with it. What I would actually rather do is have a code creating a drop-down box which the visitor would just select their option, and be directed to the requested page immediately, but I don't know how to do that either. At any rate, I do also need to figure out how to get those state-by-state links to appear at the top of the business listings instead of at the very bottom of the page the way it is appearing now with this code. If anybody could help me figure out what the heck I'm doing, I would really appreciate it. HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- saved from url=(0063)[url]http://www.geocities.com/josh**************/connections.html[/url] --> <HTML> <HEAD> <TITLE>Connections</TITLE> <body background="http://www.geocities.com/clipart/pbi/backgrounds/Template_Pages/aboutme_techie_bg2.gif" bgcolor="#000000" link="#ff0000" vlink="#ff00ff" text="#00ff00" > <table border=0 cellspacing=0 cellpadding=0 width=650> <tr valign="top" align="left"> <H1><A name=top>Connections</H1></FONT></A> <P><IMG height=4 src="" width=500></P><FONT color=#0000ff> <H2>Welcome to...</H2></FONT> <tr valign="top" align="left"> <td colspan=1 height=750></td> <td align="left" colspan=3 rowspan=1 width=639><p><b><i><u><font color="#7F7F7F" face="Arial Black" size="+1"><A href="http://www.geocities.com/josh**************/alabama.html">Alabama</A><br><A href="http://www.geocities.com/josh**************/arizona.html">Arizona</A><br>...</font></b></i></u></td> <td colspan=2 height=750></td> </tr> <tr valign="top" align="left"> <td colspan=1 height=750></td> <td align="center" colspan=3 rowspan=1 width=639><p><b><i><u><font color="#7F7F7F" face="Arial Black" size="+1"><A href="http://www.geocities.com/josh**************/kentucky.html">Kentucky</A><br><A href="http://www.geocities.com/josh**************/louisiana.html">Louisiana</A><br>...</font></b></i></u></td> <td colspan=2 height=750></td> </tr> <tr valign="top" align="left"> <td colspan=1 height=750></td> <td align="right" colspan=3 rowspan=1 width=639><p><b><i><u><font color="#7F7F7F" face="Arial Black" size="+1"><A href="http://www.geocities.com/josh**************/northcarolina.html">North Carolina</A><br><A href="http://www.geocities.com/josh**************/ohio.html">Ohio</A>...</font></b></i></u></td> <td colspan=2 height=750></td> </tr> <P><A href="http://www.geocities.com/josh**************/connections.html#A">A</A> <A href="http://www.geocities.com/josh**************/connections.html#B">B</A>...</P> <P><A href="http://www.geocities.com/josh**************/connections.html#N">N</A> <A href="http://www.geocities.com/josh**************/connections.html#O">O</A>...</P> <P><A href="http://www.geocities.com/josh**************/home.html">Return To Home Page</A></P> <FONT color=#00ff00> <H3>13AD LUC ENT</H3> <ADDRESS>12341 Nellis Street, Springfield Gardens, NY 11413-1440</ADDRESS> <ADDRESS>718.807.8811</ADDRESS>... <H3>Zoom Records</H3> <ADDRESS>19 Embarcadero Cove, Oakland, CA 94606</ADDRESS> <ADDRESS>510.535.9666</ADDRESS> <P><A href="http://www.geocities.com/josh**************/connections.html#top">Return to Top</A></P> <P><A href="http://www.geocities.com/josh**************/home.html">Return to Home Page</A></P> </BODY></HTML> As you can see, my knowledge of HTML is pretty basic, and I'm sure you can tell that I tried to abbreviate this excerpt code as much as possible to conserve space on this post. I placed three dots "..." in many places to signify where large irrelevant portions of the page have been omitted, especially where I eliminated the thousands of business listing codes...lol. It may also have not been necessary to provide as much of the code as I did, but I just wanted to make sure that what I need is understood so perhaps I can get some help. Thank you everyone in advance for your assistance... Hello- A quick question for those in the know: Is it considered "proper" to put multiple between words to space them out, or is another method preferred as the "correct" way to do it? I've used tables and transparent 1x1 .gifs for spacing as well depending on the page, but there are a number of times where it's just easier to lay about ten or fifteen nbsps in there till the text is nudged over where you need it and be done with it. Makes for an ugly source, but seems to work fine. It seems to render properly doing it this way, at least in IE and Firefox, but is it still kosher to do so? Or is everything "proper" supposed to be done with style sheets now? Thanks, Hello, I just recently started "cutting up" a website layout in Photoshop and coding it in Dreamweaver. Though I am aware that CSS would be best for doing this, I am still choosing to use a table for the layout. My question is, what is the proper way of hand coding a table? Mind you, this is a fairly complex table with many rows and columns and cells of all kinds of sizes. I used Photoshop to export the code and then went in and changed what I needed to. Photoshop uses spacer gif's in their table code. I'd like to try hand coding the table so that I don't have to use spacer gif's and then I'll be able to edit the table later on, more easily (to change the bottom layout, but keep top navigation on all pages.) Right now, with the spacer gif's I can't add any cells without the whole layout falling apart. I'm just looking for good code for building complex tables (coding by hand). Thanks! Here's a link to the site I'm working on: http://www.matthewpavkov.com/dtim/index.html I have a big list and I want to show on my webpage 6lines from that list randomly (when webpage is refreshed another 6 lines appear). can anyone help me with he code, how should the list look like so it works...or where can I find more info on this ? thanks I am making a website with a list inside list for my navigation bar. It looks good on safari(win/mac) and firefox but the list looks horrible in IE7.0(didnt check 6.0) I was wondering if anyone know what it could be HTML Code: Code: <div id="nav"> <img class="menupic" src="images/mainmenu.png" alt="Main Menu"/> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_findme.png" alt="findMe"/></a></li> <li> <ul class="navlinks"> <li><a href="#goto_facebook" id="facebook">- Facebook</a></li> <li><a href="#goto_myspace" id="myspace">- Myspace</a></li> <li><a href="#goto_youtube" id="youtube">- Youtube</a></li> </ul> </li> </ul> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_blog.png" alt="blog"/></a></li> <li> <ul class="navlinks"> <li><a href="#blogid2" id="blogid2">- Testing | May 01</a></li> <li><a href="#blogid1" id="blogid1">- Debut Album | Apr 30</a></li> <li><a href="#goto_blogarchive" id="blogarchive">- Archives</a></li> <li class="donthidethis"><ul class="navli donthidethiseither" style="padding:0;"> <li><a class="point" href="#">- Categories</a></li> <li><ul class="navlinks"> <li><a href="#goto_catid2" id="catid2">- Media</a></li><li><a href="#goto_catid1" id="catid1">- News</a></li><li><a href="#goto_catid3" id="catid3">- Off Topic</a></li><li><a href="#goto_catid4" id="catid4">- Tutorials</a></li> </ul></li> </ul></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_eliasmusictv.png" alt="eliasMusic Tv"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="coming">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_about.png" alt="about"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_biography" id="biography">- biography</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_links.png" alt="links"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="links">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_contact.png" alt="contact"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_contact" id="contactpage">contactForm</a></li> </ul></li> </ul> CSS Code: Code: #nav { float:right; width:195px; padding-left:20px; background:url("images/navback.png"); } #nav ul { list-style: none; margin-left:1px; border: none; } #nav .navli { padding-top:3px; padding-bottom:3px; } #nav .navlinks { padding-left:25px; } #nav .navlinks a,a:link { color:#262626; } #nav .navli img { margin-top:5px; margin-bottom:5px; } #nav .navlinks a:hover { color:#dadada; } #nav img.menupic { margin:20px 10px 5px 95px; } #nav a { font-size:14px; display:block; } #nav a.point { font-size:14px; font-weight:bold; } .navliover { background:url("images/navhover.jpg"); }
Any help at all would be appriciated please I can show u the website via Private message if you are interested in helping Thanks in advance Reply With Quote Hello, I am new here and hope someone can help. I am creating a page where I need to have several nested lists. The 'numbering' is showing up correctly but the 'nested' lists are not indented. Can anyone take a look at the page and my source code and see if you can help me figure out what is wrong? go to http://www.prewrath.com/index2.html Thank you! bzig Hi, I am using CSS with nested tables. There are two <td> fields in the innermost table, and are having links inside them. When I open the page in IE, and move the mouse over to the first cell, the whole cell becomes active. But the second cell becomes active only if I take the mouse on the text. Why this inconsistency? Can anyone help? Thanks. Please refer attached html and css files I am having a problem that I can not figure out why this is happening. I have two divs one named content and one named welcome. The welcome div is nested inside the content div. Whenever I change the margin top for the welcome div it also changes the margin top of the content div it is nested in. How can I keep it where the content div is fixed and doesn't move no matter where I set the margin top for the welcome div? Here is the HTML.... Code: <div id="content">
<div class="welcome">
<p> Coming Soon, a new and improved Texas Camping Forum for Fall 2008!!!<br>
Bookmark us and check back often....</p>
</div>
</div>
Here is the CSS... Code: #content {
margin: 5px 0 0 140px;
text-align: center;
width: 630px;
border-left: 1px solid #F4F4F4;
}
.welcome {
margin-top: 25px;
}
Here is the link to the site.... http://development.mesquitechristmas.com/index.html Any ideas or suggestions as why this is happening? -Thanks |
|||||||