|
HTML - Html Lists - Custom Numbers
I'm developing a website that contains a lot of legal statutes. I'm trying to keep to html lists rather than using tables, but have come unstuck with how to display custom numbers in an ordered list.
The lists usually begin with (1), then (a) is the indent, then (i) is the next level. These are easy to handle with <ol type=1>, <ol type=a> and <ol type=i>. The next level has (aa), which I've managed with <li value=27> and so on. However, I'm not certain how to handle the following types: (4A) - in between the number (4) and (5) and random numbers, such as (aE), etc. With regard to numbers like (4A), they need to be in the same bracket and can't be displayed as (4)(A) - which is a different reference in the legislation. Any help in displaying custom numbers (even user defined - e.g. for this particular bullet point display "4A") would be great. Thanks in advance. Similar TutorialsHello All, Sorry to ask for help on my first visit. Is there any way to link drop down lists to each other using html? For example, the first drop down list would have states/counties. Once they select one, on the second drop down list it automatically generates all the towns in that county/state. It's meant to be part of a form for a website. Many thanks to all hi i want to make some thing like this for example i have 100 pages how can i make this work i want this to happen it shows 9 or 10 numbers per page and after user goes to 9th page it will show more 5 numbers how can i make this any one?? that's how it will goes upto 100 page and i want First page and last page link too anyone can help me give me guide how can i make this???? I made my own local page and it's for a game's stats (Wins:Losses record), on which I have a fields with numbers. What code should I add if I want to make calculations like: Let's I have I have a field for Wins: and a field for Losses:. On another place in the page I have Total Wins, Total Losses, Win % (win:losses ratio). I dont know how to make typeable fields, so I have to type the numbers manually in TXT format, to edit the HTML code. But still, even if I have to type the numbers for fields Wins: and Losses: I want the Total fields to automatically calculate so: Total Wins = Wins (whatever number I type in Wins it appears in Total Wins) Total Losses = Losses (whatever number I type in Losses it appears in Total Losses) Win% = Total Wins/((Total wins + Total losses)/100)) Say I type 12 wins and 5 losses in the first fields. Thus, when opening the page, the same numbers should show for Total Wins = 12 and Total Losses = 5 without me having to type them in TXT format for the 'Total' fields. Win% would be 12/((12+5)/100)) = 12/0.17 =~ 70% In other words, to clarify in HTML, there where Total Wins and Total Losses have some numbers to be typed, instead of me writing manually the numbers e.g 12 and 5, can I instead write these formulas and how should they look in HTML? I am trying to use a font that isn't one of the 12 most common for pc and mac (arial, verdana, times ect.) but dont want to make everything an image. I would like to use the font on the page text. How would i go about using it? Is there a way to put a custom graphic for the browse button in the file upload field, similar to how you can use a custom graphic for the submit button? Hello, I've been working on my website recently and I've found a problem that I have no idea how to fix. I have an unordered list that serves as the menu on the left of the site. I've been trying to remove the black dots that come with the unordered list. They only show up on the first one and they blemish the site. I want to keep it with a list because it allows for pleasing aesthetics in combination with my CSS (link hover changes the color). Is there a way I can keep the same look and get rid of the dots? Code: <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Bob's Page</title> </head> <body> <center> <img class="center" src="img/banner.jpg"></center> <div class="left"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="products.html">Products</a></li> <li><a href="mailto:robert.t.adams5@gmail.com">Contact Me</a></li> </ul> </div> <div class="right"> <p>Text goes here. </div> </body> </html> look at it he http://eco-heater.bobadams.x10hosting.com Hi, I have a basic understanding of HTML, and now I have a problem. My blog is on www.wrappedfolds.blogspot.com. I am trying to make my list on my blog navigational rather than just a list. I want all of the designs (the list is after where it says "a list of my designs") to be links to the article that they're posted on. I have read plenty about it, but I can't seem to get it to work. Hey Everyone, Has anyone else had this problem? I create an ordered list, and set the type="1". The numbers appear in Firefox, but do not appear in IE7 even though there is a margin there for the number. Help is appreciated. Hi all.... Ive been having issues trying to get these two lists below to look the same. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>MESH, Inc. - Home</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="container">
<img id="banner" src="images/topbanner.png" alt="top banner">
<ul id="top-nav">
<li><a href="mcad_project.html">mcad<span id="mcad"></span></a></li>
<li><a href="niosh_project.html">niosh<span id="nios"></span></a></li>
<li><a href="mcad_project.html">mcad<span id="moad"></span></a></li>
<li><a href="mcad_project.html">mcad<span id="scad"></span></a></li>
<li><a href="cloud_mapping.html">cloud<span id="clou"></span></a></li>
<li><a href="cloud_mapping.html">cloud?<span id="what"></span></a></li>
</ul>
<ul id="nav">
<li><a id="active" href="home.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Engineering Services</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="about_us.html">About Us</a></li>
</ul>
<div id="content">
<div align="center"><span style="font-weight:bold;">ENGINEERING SERVICES</span></div><br>
<p>
Since 1978, MESH has been providing clients with engineering services to
solve their most complex problems. We specialize in:
</p>
<ul id="services">
<li>Software and hardware interfaces </li>
<li>Real-Time Software </li>
<li>Prototyping </li>
<li>Sensor Interfacing </li>
<li>Signal Processing </li>
<li>Electronic Design </li>
<li>User Interface and Design</li>
</ul><div align="center"><span style="font-weight:bold;">CHEMICAL/BIOLOGICAL STANDOFF MONITORING PRODUCTS</span></div><br>
<p class="padding-bottom">MESH provides leading edge technology to safeguard people and facilities from chemical and biological hazards. The MESH standoff systems, unlike point detectors, are not dependent on airborne threats finding their way to the detector or sampling point. The standoff sensors include: </p>
<ul id="services2">
<li>MCAD – Standoff sensor for chemical vapors at distances in excess of 6km </li>
<li>Dragonfly – Standoff aerosol sensor (either chemical or biological). </li>
<li>Firefly – Standoff vapor or aerosol hyperspectral imager based on innovative technology, resulting in an affordable approach to the next generation of chemical sensing. </li>
</ul>
</div><!-- end #content -->
<div id="footer">610-932-7754 <a href="mailto:info@meshoxford.com">info@meshoxford.com</a></div>
</div><!-- end #container -->
</body>
</html>
Heres the style sheet.... dont think this is the problem Code: body {
margin:10px;
background-color:#f0f0f0;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
overflow-y:scroll;
}
#container {
width:776px;
margin:auto;
background-image:url(../images/container-white-bg.png);
box-shadow:#333 15px 15px 30px;
}
#banner {
display:block;
width:760px;
height:120px;
padding:8px 8px 0 8px;
background-color:#066;
}
#top-nav {
width:768px;
height:81px;
padding:8px 0 8px 8px;
margin:0;
list-style-type:none;
background-color:#066;
}
#top-nav li {
float:left;
margin-right:8px;
}
#top-nav a,#top-nav span {
position:relative;
display:block;
width:120px;
height:81px;
line-height:81px;
font-size:90%;
font-weight:bold;
color:#000;
text-align:center;
background-color:#cff;
}
#top-nav span {
position:absolute;
top:0;
left:0;
background-image:url(../images/gallery-banner.png);
}
#top-nav span:hover {
opacity:0.5;
filter:alpha(opacity=50);
}
#top-nav a:hover {
text-indent:-9999px;
}
#top-nav #active-top:hover {
text-indent:0;
}
#top-nav a:hover {
text-indent:-9999px;
}
#top-nav #active-top span {
display:none;
}
#mcad {background-position:-8px -8px;}
#nios {background-position:-134px -8px;}
#moad {background-position:-260px -8px;}
#scad {background-position:-386px -8px;}
#clou {background-position:-512px -8px;}
#what {background-position:-638px -8px;}
#nav {
float:left;
width:120px;
padding:0 8px;
margin:0;
list-style-type:none;
background-color:#066;
}
#nav li {
margin-bottom:2px;
}
#nav a {
display:block;
width:120px;
padding:30px 0;
font-size:90%;
font-weight:bold;
color:#000000;
text-align:center;
background-color:#699;
}
#nav a:hover {
color:#fff;
}
#nav #active {
background-color:#cff;
}
#nav #active:hover {
color:#000;
}
#content {
float:left;
width:610px;
padding:25px 15px 10px 15px;
}
h1 {
margin:0 0 10px;
font-size:140%;
text-align:center;
}
#content p {
margin:0 0 10px;
font-size:90%;
color:#000;
}
#services {
font-size:110%;
color:#000;
}
.text-indent {
text-indent:20px;
}
.padding-bottom {
padding-bottom:16px;
}
#footer {
clear:both;
line-height:30px;
font-size:90%;
color:#cff;
text-align:center;
background-color:#066;
}
#footer a {
margin:0 40px;
color:#cff;
}
Thanks Coothead edit: photo of what it looks like in FF Hey -- is there a difference between how Opera and Firefox interpret lists? My site appears to be reading the same in both browsers except that the lists (a considerable part of the design) are not showing up in the same manner. Is there something I can do about this? http://www.trekandromeda.com/index/techindex.html http://www.trekandromeda.com/index/home.css The entire site is written at this point so the other pages will show the same problem. Can anyone help me with this? I have some drop down list tests I am playing with he http://www.my-plague.net/list.php There are a few thing I need help with: 1) If I don't put a "select" url, if go is clicked on I get a server error. I just want it to do nothing. e.g. with the header. 2) If I put a style for a "select" that has no url, then the list reverts to a square more box-like shape. 3) I want to make the go button open the urls in a new window. 4) I don't know what the js code at the end does because it still works without it (found the code in a tutorial) : Code: <script language="JavaScript">
<!--
function gotoLink(form) {
var OptionIndex=form.ListBoxURL.selectedIndex;
parent.location = form.ListBoxURL.options[OptionIndex].value;}
//-->
</script>
hi all, im having a bit of a problem displaying a list horizontally, and its really getting a bit frustrating. as far as i can see, it should be a case of using display:inline on the li tags, but so far no luck. ive included my css below: Code: #navigation ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
#navigation ul li
{
display:inline;
}
#navigation ul li a
{
display:block;
width:90px;
height:30px;
color:#fff;
text-align:center;
text-decoration:none;
}
#navigation ul li a:hover
{
background-color:#EF4252;
}
and my html: Code: <td id="navigation"> <ul > <li> <a href="contact.html" >Contact Us</a> </li> <li> <a href="wwd.html" >What We Do</a> </li> </ul> </td> any help would be appreciated. thanks Hi, i want to add a horizontal overflow to the div element that holds the UL. each LI is displayed along side each other using Float:left. however, when they reach the end of the page it starts a new line. how can i get it so it doesnt start a newline, but carrys on in a line and can be scroll-able? thankyou Code: bodywrapper {
width:930px;
margin:auto;
margin-top:20px;
background:url(../images/layout/main_body_bg.jpg) repeat;
}
/*Image Gallery*/
#gallery ul {
margin-left:-30px;
margin-bottom:0;
margin-top:-10px;
}
#gallery ul li {
display:block;
float:left;
height:100px;
width:100px;
padding-top:10px;
padding-right:10px;
}
.thumbnails {
outline:none;
border:none;
}
.thumbnails_link {
outline:none;
}
Hey everyone, I just want to ask a simple question... What is the best element to use to arrange content? I've tried div's, tables and now lists but I still don't know what to use. What do you guys think? 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 working on XSLT. the problem some text is given with list labels but it is not aligned properly. so for that i created a <div> and <span> tag as below: <ul style="list-style:none"> <li> <span style="float:left;width:30px;text-align:left;position:relative"> <span class="ro">(a)</span>*</span> <div style="margin-left:10px;width:75%;float: left;position:relative">The conduct of Centrelink cannot be made the subject of complaint or inquiry under the Anti-Discrimination Act because:<ul style="list-style:none"><li> <div style="clear:both;"/> </li> There was also issue in firefox of overlapping text which was solved by using clear:both. the issue is that in <div> i have used width="75%" due to which much whitespace is coming on R.H.S of the page. is there any other option instead of using width? width=75% is chosen after many trials. as nested lists can also be there. otherwise text comes to next line. I put this code in : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org.TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>My first web page</title> </head> <body> <h1>My first web page</h1> <h2>What this is</h2> <p>A simple page put together using HTML</p> <h2>Why this is</h2> <u1> <li>To learn HTML</li> <li> To show off <o1> <li>to my boss</li> <li>to my friedns</li> <li>to my cat</li> </o1> </li> <li>Because I've fallen in love with my computer and I want to give her some HTML lovin</li> </u1> </body> </html> I'm not getting the indentation or the numbers for the ordered list. Any suggestions would be greatly appreciated. I am currently trying to create some nested lists to display the following... A...R...X B...S...Y C...T...Z (where the letters will eventually be replaced by words) and have made this work perfectly in chrome and firefox, however when I use Internet Explorer I get something resembling the following... A B...R C...S...X .....T...Y ..........Z I assume it's probably to do with the css, but please can someone help me with this problem, the html and css are shown below, thanks in advance for any help. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel=stylesheet href="links.css" type="text/css"> </head> <body> <div id="container"> <ul id="links-nav"> <li> <ul> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </li> <li> <ul> <li><a href="#">R</a></li> <li><a href="#">S</a></li> <li><a href="#">T</a></li> </ul> </li> <li> <ul> <li><a href="#">X</a></li> <li><a href="#">Y</a></li> <li><a href="#">Z</a></li> </ul> </li> </ul> <div class="clear"></div> </div> </body> </html> CSS Code: #container{
width:960px;
margin:0px auto;
border: 1px solid #000;
padding:20px 10px;
height:auto;
font-family: Arial, sans-serif;
font-size:11px;
}
.clear {
clear: both;
height: 0;
overflow: hidden;
}
a{
text-decoration:none;
color:#555;
}
#links-nav li, li ul li{
list-style:none;
}
#links-nav{
display:inline;
margin:0;
padding:0;
}
#links-nav li ul{
float:left;
padding:0;
width:168px;
padding: 0px 10px;
}
Hello everyone! I have this client who has a lot of resellers, and all of them are on a list in his website, so that when customers look for someone to buy from, they can choose through his site. However, he is afraid that if the list is static, no one will bother to look beyond the first 2 or 3 names, and the ones in the bottom of the list will never be contacted. So, I need to create a method to display the resellers list in such a way that everytime one accesses the list, the order is changed at random, but always displaying all the names. The HTML code the names are arranged right now is a simple table with one reseller per TR tag. I don't work with MySQL, so the solution should be something else... PHP or Java preferred. Thanks in advance! Hi folks, I would really like to create a list that looks like this: A1) Item 1 A2) Item 2 A3) Item 3 ... The A ties in to a "type A" something, and another list with B1, B2, B3, etc. items will be tied into a "type B" something, and so on. So far I haven't been able to figure out how to do this. I can make an (A, B, C) or (a, b, c) or (i, ii, iii) or of course (1, 2, 3) list, but none of these will serve my purposes. I very specifically need an (A1, A2, A3) list. Am I pretty much stuck doing this manually with a table or is there a way to accomplish what I'm after using the list or order list tags? Does CSS provide a means? |
|||||||