|
HTML - Question On List Items Within A Span
Hi every one I have a quick question. I'm building and interface this is make of unordered list items. Those list items are contained in a span so that interface can have separate look for the other links on the page.
But when I validate my page in Dreamweaver I get some page errors that. Here is the error: The tag:"span" is not allowed within: "ul" It is only allowed within: a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6. . ..[XHTML 1.0 strict] Now here is the code in question: HTML Code: <ul id="nav">
<span class="left_links">
<li class="nav_items_00"><a href="index.html">Home</a></li>
<li class="nav_items_00"><a href="services.html">Services</a></li>
<li class="nav_items_00"><a href="gallery.html">Gallery</a></li>
<li class="nav_items_00"><a href="events.html">Events</a></li>
<li class="nav_items_00"><a href="http://hsgsphoto.wordpress.com/" target="_blank">Blog</a></li>
<li class="nav_items_00"><a href="about.html">About</a></li>
</span>
The page that you can see this code in action is located at: http://www.hsgsphoto.com I guess my question is what would be the best practice in this situation. I need the a way to tell this group of links to act different then links in other parts of the page but the error I'm getting in validation is that list items (li) tags are not to be used within a span. Thank you so much for any feed back and help John Similar TutorialsI see the use of the <ul> and <li> tags when creating things like menus and in the case of digg and gamegrep at the least, comments. I can see a possible use with comments for indentatiing replies to other comments. The question still stands for things like menus though, does it have to do with search engine crawlers and how they parse the page? Any insight by anyone who knows anything about this would be nice. Thanks Hi, I know this is being an extreme perfectionist. But, if you look at http://www.tendervendors.com/dev/hr_systems.html, at the selected link on the navigation bar (HR Systems), you'll see that there are 2 lines either side of the HR Systems (selected) link. This is fine, however because the bottom border is on the other links and not the selected one, and the two side borders are on the selected link, the don't line up. I'm aware that i could specify the right border on the 1st link and the left border on the 3rd link, but i was trying to make it simple, so someone without alot of understanding and program it after i've done. So, i then thought, well i could overlap the links, 2px to the left, so set li { position:relative }, and then li {left:-2px}. but it doesn't overlap the li's, it overlaps the entire ul over the page (content div) border. Any ideas as to why this is? Thanks, Matthew Millar Hi Folks, I'm a newbi and just learning. Does anyone know if there is a tag or an object that would allow me to enter the same short list of items on several pages and be able to change the list on all the pages by changing it on one page? In other words if I change the list items on say a master page, it changes the list on all other pages where the same items are listed? Thanks for your help. Joel Hi there, I was wondering if it's good practice to put <li> tags inside table cells. Normally, I would just put the list items in their own div container without the table, but for specific design reasons, I need to separate the list items in their own table data cells. This is how I'm currently doing it: Code: <div id="container"> <ul> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><h2>List Header</h2></td> </tr> <tr> <td height="29"><li><a href="itemone.html">Item One</a></li></td> </tr> <tr> <td height="29"><li><a href="itemtwo.html">Item Two</a></li></td> </tr> <tr> <td height="29"><li><a href="itemthree.html">Item Three</a></li></td> </tr> <tr> </table> </ul> </div> Notice that the H2 header isn't actually a list item but is still within the <ul> tags. Is any of this confusing or incorrect for google indexing? Hey, I've got this problem involving a list in IE. I've basically made a LI within another LI like so:- Code: <ul class="mainNav">
<li><a href="/index.php?frc=1" class="first">Home</a></li>
<li><a href="/GamePortal.php">Games</a></li>
<li class="headlink"><a href="/edit_profile.php">My Profile</a>
<ul>
<li><a href="/edit_profile.php">Game Profile</a></li>
<li><a href="/link.php">Community Profile</a></li>
</ul>
</li>
<li><a href="/promotions.php">Promotions</a></li>
</ul>
This generates a sort of list underneith a list to be used as a dropdown menu. I've assigned it some CSS to do this Code: .mainNav li.headlink ul {
list-style: none;
display: none;
float: none;
margin: 0px;
position: absolute;
top: 35px;
z-index: 100;
min-width: 72px;
text-align: center;
padding: 5px;
}
What happens is that when using FF the content displays perfect (no suprises there) but when I use IE for the same page, it moves the drop down list to the end of the item above on it's x axis (the y is fine). I've tried all sorts of different things; I used relative which worked but then expanded the LI item above it shifting everything along in the line. So it has to be absolute positioned to stop that from happening. I've messed about with every single margin I can think of to no avail. Any Ideas. Hey guys, so I'm building my script right now and it's going quite well. I used Javascript to capture input from text box and display it later using the <span id=''> command. What I'm trying to do is show the <span id=''> in more than one spot. For whatever reason it won't let me do this, it will only display in one spot and not the other. So to clarify, I used the var bride = document.getElementById('bride').value; document.getElementById('bride2').innerHTML = bride;(sorry for the javascript) and then used span id later to display it which works fine when you only want to display it in one spot. When I go to display it in two spots, I believe the span id tags are getting confused with each other and fighting. Is there any way to fix this? Somebody suggested I do this using list items instead of left-floating DIVs, so I did. But I have no other experience of working with lists and no matter what I do, I can't get the list items to sit right next to each other. There's always a gap between them that I can't get rid of. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<HEAD>
<STYLE>
ul { list-style-type:none; }
li { display:inline; }
#headings { font-family:Courier New; line-height:25px; font-size:16px; font-weight:bold; text-align:center; margin-top:10px; }
#headings a { background-color:#000; padding:7px; padding-top:4px; padding-bottom:2px; border:1px solid #f00; }
#headings A:link { color:#ccc; }
#headings A:visited { color:#ccc; }
#headings A:hover { background-color:#aaa; color:#000; }
</STYLE>
</HEAD>
<BODY>
<DIV id="headings">
<UL>
<LI><A HREF="p1.html">News</A></LI>
<LI><A HREF="p2.html" onMouseover=showmenu(event,linkset[0],'110px') onMouseout=delayhidemenu()>Produkt</A></LI>
<LIl><A HREF="p3.html">Media</A></LI>
<LI><A HREF="p4.html">Downloads</A></LI>
<BR>
<LI><A HREF="p5.html" onMouseover=showmenu(event,linkset[1],'166px') onMouseout=delayhidemenu()>Col Dee</A></LI>
<LI><A HREF="p6.html">Contact</A></LI>
<LI><A HREF="p7.html">Guestbook</A></LI>
</UL>
</DIV>
</BODY>
</HTML>
As you can see the "panels" are split into two rows using a simple linebreak. By the way, I've managed to get zero top and bottom margins by controlling the line-height attribute. Can anyone help with this? Thanks for reading, Seymour. Hello, I ran into this problem today in my Basic XHTML class, and it was enough to stump me and the instructor: if you want to put an unordered list in the middle of a page, but you want the list items to be left-aligned so the bullets are one on top of the other...how do you do it? I started with code something like <div align="center"> <ul type="disc"> <li>Wine</li> <li>Women</li> <li>Song</li> </ul> </div> This centers the list on the page, but it also centers each list item. I tried placing a <div align="left"> around the list items, individually and collectively, but depending on the positioning it either had no effect or it nullified the center attribute completely and gave me a left-aligned list on the left edge of the page. Attempts to change the style of the <li> tag, which I haven't done in months and was never all that good at, failed. I know I can do this in ten seconds by putting the list inside a one-cell table, and with much fiddling I could probably do it with a spacer GIF...but what's the 1.0 Strict way? Hi, I'm new to programming here. How do I enable a checkbox to work with a drop down list? For example, If the value inside the drop down list will only be registered or activated when i check the checkbox. I want to send an order via email to my server and I want the dropdownlist with the checkbox not checked to not display anything. How do i do that? Thanks! Hi, I'd like to ask a newbie question. I've Googled this to death but as always there isn't a single view so I thought I'd ask the experts here. I have a piece of information - it doesn't really matter what it is but it is accompanied by an image. With the increase use of css sprites, I know find myself using background-image to set the image. The overall effect would look like this <image> some text. This needs to go inline and have a fixed height so that the image shows. There are also other bits of information on the same line. Do I make the containing unit a DIV and float it or make it a SPAN and use display:block? I don't particularly wan't to use display:inline on a DIV because it's not supported correctly in IE. What would you do in this case? Thanks John What exactly do the Span and Div tags do? I've read definitions on the web: "defines a block of text," etc., but I don't see any examples of what the difference is from normal text to text that is used using the span and div tags. Could someone provide any examples? Thanks, Brad Hi, I have build up a mouseover functionality that shows a light gray boks around the 4 categories on the frontpage on http://www.jjas.dk. It works perfectly under all the browsers except IE6 and IE7. In this browsers I can only click on the text placed right from the picture. But when I try to click on the picture or the picture related text, nothing happens. Now, after I had used 5 days finding a solution I'm giving up. There is nothing wrong with the code at all, so why is it, that it won't work under Internet Explorer? This is the code I'm using: HTML Code: <div class="row">
<ul>
<li>
<a href="/produkter-og-loesninger/komponenter.aspx">
<span class="picture">
<img src="/media/3899/komponent-teaser.jpg" alt="Agenturprodukter" />
<span class="content">
<strong>Agenturprodukter</strong>
<small>Vi er forhandler af flere produkter. </small>
</span>
</span>
<span class="right_content">
<h2>Handelsvarer</h2>
<small>Vi forhandler passive og perifere komponenter.
Kabinetter, keyboards, displaysystemer m.v.</small>
</span>
</a>
</li>
</ul>
</div>
CSS Code: #top_section .row {
float:left;
width:948px;
}
#top_section .row ul {
float:left;
width:948px;
list-style:none
}
#top_section .row li {
float:left;
width:474px;
}
#top_section .row li a {
float:left;
width:440px;
padding:10px;
height:145px;
text-decoration:none;
cursor:pointer;
border:1px solid #eeeeee;
}
#top_section .row li a:hover {
float:left;
width:440px;
height:145px;
background:#dddddd;
border:1px solid #d3d2d2;
}
#top_section .row li a .picture {
float:left;
width:220px;
position:relative
}
#top_section .row li a .picture img {
float:left;
z-index: -1;
}
#top_section .row li a .picture .content {
float:left;
width:210px;
background:url(../common/images/picture_content_bg.png) repeat-x 0 0;
padding:5px 0 0 10px;
position:absolute;
bottom:0;
left:0;
height:41px
}
#top_section .row li a .picture .content strong {
float:left;
width:210px;
font:bold 12px/14px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
}
#top_section .row li a .picture .content small {
float:left;
width:210px;
font:11px/13px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
padding:3px 0 5px
}
#top_section .row li a .right_content {
float:left;
width:200px;
padding-left:20px
}
#top_section .row li a .right_content h2 {
float:left;
width:200px;
font:bold 18px/20px Arial, Helvetica, sans-serif;
color:#336699;
}
#top_section .row li a .right_content small {
float:left;
width:200px;
font:12px/17px Verdana, Arial, Helvetica, sans-serif;
color:#666;
padding-top:3px
}
You can see it live on: http://www.jjas.dk/ (right under the slideshow) I really hope someone out there can help me with my problem. I guess it's pretty easy, though I haven't found the easy part yet Kind regards, Niels Kristiansen Does anybody know how to get the grab hand image for the onmouseover event for spans? Hi Everyone, I am using 'span title' as a means to display a tool tip. Some of the tooltips are quite long and the popup is disappearing before the user would have a chance to read it all. Is there any means to delay the length of time that the tooltip will appear without the user having to hover over the text again. An example of one of these tooltips is below: <span title="As dentistry has advanced beyond basic care into new areas such as implantology, cosmetics, and other treatments of the entire dento-maxillo-facial complex, so too must the diagnostic tools keep pace with the need for a higher quality of general and specific information. Our surgeries are fully equipped with X-ray machines and in-house film processors. This enables our patients to get their diagnosis results instantly and treatment plan drawn up effectively in one visit."> Periapical film (small dental film) </span> I really appreciate any help you could offer? Thanks Cathal I'm trying to use the SPAN tag to override a DIV's attributes wherein it is initially TEXT-ALIGN: LEFT;. I thought for sure that I could override it with the SPAN tag but no luck. I'm doing it this way because I want a portion of the content in the DIV to align left and the other to align right. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#quote { width: 500px; }
#quoteTop { width: 460px; height: 40px; padding: 0 20px; background: url('images/quoteTop.gif'); text-align: left; }
#quoteMiddle { width: 460px; padding: 0 20px 20px; background: url('images/quoteMiddle.gif'); text-align: left; }
#quoteBottom { width: 460px; height: 80px; padding: 0 20px; background: url('images/quoteBottom.gif'); text-align: left; }
</style>
</head>
<body>
<div id="quote">
<div id="quoteTop">
<span style="text-align: right;"><a href="/">top</a></span>
</div>
<div id="quoteMiddle">
blah blah blah blah blah blah blah <em>blah blah blah</em> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah <strong>blah blah blah</strong> blah blah blah blah blah blah-blah blah—blah blah blah blah blah blah blah blah blah BLAH! blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
<div id="quoteBottom">
J. Doe
</div>
</div>
</body>
</html>
Is overriding code a bad idea for what I'm trying to get done? Ok, this is all very new to me. Just messing round trying to get things to work at the moment mainly how to use div and span. So I've set up two pages in notepad one for html and one for css and they look like this. html Quote: <html> <!---Anchor for CSS page---!> <link rel="stylesheet" type="text/css" href="css.css"> <head> </head> <!---Body of page---!> <body> <!---Div tag for centered page margin---!> <div class="one"> <h1><center>THE CIVVIES.</center></h1> <hr> <!---Division for bottom of Heading---!> <div class="two"> <img src="images/civvies.jpg"> </div> <div class="three"> the civvies </div> </body> </div> </html> css Quote: div.one { left: 165px; top: 4px; bottom: 20px; width: 900px; length: 600px; position: absolute; border: 10px solid black; } h.1 { align:center; font-size:150%; font-family: courier; } div.two { left:165px; length:50px; border: 5px solid black; } Div.three { left:600px; right:10px; top:20px; width:200px; border:5px solid black; } Now this all works fine until div three...i've got a simple page title that seperates from the rest, the page centers itself, the picture alligns left under the header and takes up half the page to the bottom basically splitting the remaining space into two. Now on the right hand side i was hoping to be able to put content which is what div three was for unfortunately It doesn't seem to want to go where I'm asking it to. Any chance somebody could pop in here and just give me a right hand side of the page to work with for content? also possibly show me how to insert a navigation table above the picture but after the dividing line between the header and the picture? Like I said I'm very new at this. Hi, My document contains below span class: <P> <span class="ErrorText"> <img border="0" src="/wps/images/icn_alert_error.gif" class="DialogIcon" align="absmiddle"/>Path does not exists </span> </P> I want to check for existance of this class in document(jsp) using below function: function preview(){ ..... .... ...... (contentPath is textfield) if(contentPath==null || contentPath.length==0){ alert("Please select a content fragment before attempting to preview"); } else { here i want to check whether above mentioned span class exists in document or not if span class exists then proceed for next step.. else break ..... ............... .... } } Hi, I have a huge text that i need to display in a span tag on my page. Currently the words are breaking at the end of the line, i.e. if the word if "Understand" and there is not enough space to display the entire word, half of the word is displayed in the space available, and the remaining on the next line. However, i want that the entire word be displayed on the next line. Please suggest how this can be done. Regards, Ankit!! ere's what I need to do: I have several variables that I want to assign to various spans within a page (i.e. customer_name, customer_address, etc.). Now, I am going to have more than a 1 span that I dynamically need to assign the customer_name to. But I want it to be able to do so without me having to name them all "customer_name1, customer_name2, customer_name3" and then having to go through and manually change each one, one-by-one within the function. What I'd like to do is ultimately have the function loop through every span with the name or id of "customer_name" and change the innerHTML within it to whatever the value of the costomer's name variable is ("John Doe" for example). I've tried a few ways, most of the time it only changes 1 instead of all of them. Can anyone help? |
|||||||