HTML - Form List Box

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 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 need to display all the names in the list box. So using select tag i have done this. When the data exceeds the scroll bar will be displayed. But the scrollbar stands in top and shows the top data. Instead i need to display the bottom data that is the scroll bar should be always down and when the user needs the top then they can scroll and see it.
Can you please give me suggestions to be done like this.

regards
thiru

List boxes and Text boxes

On my website www.fresh-lobster.co.uk my footer displays 3 lists with various links, in a horizontal line (ul is floated left in the css).

But the way i created the list headers was to put a the list header within an LI so it would format (margin etc) with the rest of the list.

ul
li --list header-- /li
li --list item -- /li
li --list item -- /li
/ul

But when viewing in non-css mode, it displays a disc like any other element in an LI.

I tried using the LH (which is included in html3)...

ul
lh --list header-- /lh
li --list item -- /li
li --list item -- /li
/ul

But IE doesnt like it (even though Opera does). Is the LH element still functioning? or is there some other way of doing it.

Thanks

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.

Hi

I need to design a list with yearnumbers like this:

1980 Born in LA
1986 School in NY
with hollydays
1998 University in London

. . .and so on.

the following approach has unfortunately a dot after the number:

<ol>
<li value="2009">Dotzigen, Svizzera, nel ambito del Summerdays 09</li>
<li value=""></li>
<li value=""></li>
<li value=""></li>
<li value=""></li>
<li value=""></li>

PLEASE HELP!
I'm working on a project and I want to add the following code to my page, but it's not working out. My table may be a mess.

<h2>Fresh Fruits</h2>

<ul>
<li>Strawberries</li>
<li>Kiwi</li>
<li>Pineapple</li>
<li>Apples</li>
<li>Bananas</li>
</ul>

<h2>Dipped Items</h2>

<ul>
<li>Oreos</li>
<li>Marshmallows</li>
<li>Pretzels</li>
<li>Gummie Treats</li>
</ol>

This is my page code. Would someone show me where to place the above list 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>Custom Chocolate Menu</title>

</head>

<body>

<map name="Map" id="Map"><area shape="rect" coords="449,6,528,96" href="menu.htm" />
<area shape="rect" coords="549,5,633,96" href="contactform.htm" alt="Contact Us" />
</map>

<table width="700" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<th colspan="2" bgcolor="#FCE9C4" scope="col"><img src="images/header.gif" alt="Custom Chocolates" width="650" height="100" border="0" usemap="#Map" /></th>
</tr>
<tr>
<th width="375" valign="top" bgcolor="#FCE9C4">
</th>
<th width="375" height="650" align="center" valign="top" bgcolor="#FCE9C4" scope="row"><p><img src="images/choc2.jpg" width="200" height="267" /></p>
<p><img src="Images/choc15.jpg" alt="Chocolate Apple" width="200" height="260" /></p></th>
</tr>
</tr>
</table>
</body>
</html>


Thank you in advance, Karen

I have a list of music (about 400 items) and I want to put the text in a div the best way. I heard from somebody else that I should put it in a javascript file and link to that to keep my html clean of 400 extra lines. Is that a good idea and how would I go about doing that? If I just do put it in a body tag, is there an easier way of making each item on a separate line like it looks like in a text document? As of now, everything just runs together because there are no <br> tags and it would take forever to do each individual one. Is there an easier way? Thanks.

Hello...I posted a question about this before but it doesn't seem to have caught anyone's eye so I thought I'd try again:

http://www.trekandromeda.com/index/news.html
http://www.trekandromeda.com/index/home.css

I've got this site cross-browser compatible in Firefox, IE7, and Safari and was about ready to put it up for viewing when I discovered that Opera (which I have to consider because some of my community members use it) is reading the lists slightly bizarrely -- if you look at the page above you'll notice that the date/title things are offset oddly from the blue image in a way that they are not in either Firefox or IE.

Does anyone know why this is, and if so, does anyone know how to fix it? I really need to get this working soon, and it's the only problem I have left to solve.

Hi ,

I have an odd HTML question. In my company we make procedures (stuff that we think we need written down in case we need to repeat it), which we update on a regular basis. Whenever we go to do an install, update, fix, etc. and we need a procedure, we print it out and then head off with it (we make red lines as necessary.) All of these are in HTML and stored in CVS.

One of the engineers (she is not terribly familiar with HTML and turned to me) asked me if I could make a little "box" to the left of a list. The steps of the procedure are a bunch of <li> tags, having a nice box to the left to check it off as you go through them would be great. This stumped me. The best that I could do was make a one-celled table inside the <li> tags (the HTML for which I've posted) in order to get the impression of a "box" where you can check off a step that you just completed. Is there any way to put that box on the left? If you look at the end of this post I made a simple ASCII representation of what I would like to accomplish.

Code:

<html>
  <head>
    <title>
      Example
    </title>
  </head>
  <body>
    <ol>
      <li>
        <table border="1">
          <tr>
            <td>
              &nbsp;&nbsp;&nbsp;&nbsp;
            </td>
          </tr>
        </table>
        Do stuff...
      </li>
      <li>
        <table border="1">
          <tr>
            <td>
              &nbsp;&nbsp;&nbsp;&nbsp;
            </td>
          </tr>
        </table>
        Do stuff...
        <ol type="a">
          <li>
            <table border="1">
              <tr>
                <td>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                </td>
              </tr>
            </table>
            Do sub-step...
          </li>
          <li>
            <table border="1">
              <tr>
                <td>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                </td>
              </tr>
            </table>
            Do sub-step...
          </li>
          <li>
            <table border="1">
              <tr>
                <td>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                </td>
              </tr>
            </table>
            Do sub-step...
          </li>
        </ol>
      </li>
      <li>
        <table border="1">
          <tr>
            <td>
              &nbsp;&nbsp;&nbsp;&nbsp;
            </td>
          </tr>
        </table>
        Do stuff...
      </li>
    </ol>
  </body>
</html>

Code:

+---+
|   |  1) Do stuff...
+---+

+---+
|   |  2) Do stuff...
+---+

       +---+
       |   |  a) Sub-step...
       +---+
       
       +---+
       |   |  b) Sub-step...
       +---+
       
       +---+
       |   |  c) Sub-setp...
       +---+

+---+
|   |  3) Do stuff...
+---+

Hi,

I use the following HTML for a horizontal navbar:

<div align="center">
<p class="navbar" align="center"> |
<a class="navbar" href="index.html">Home</a> |
<a class="navbar" href="events.htm">Events</a> |
<a class="navbar" href="testimonies.htm">Testimonies</a> |
<a class="navbar" href="about.htm">About Us</a> |
<a class="navbar" href="contact.htm">Contact</a> |
</p>
</div>

with this in the style sheet

.navbar {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
text-decoration:none;
color: #ffffff;
background-color:#993300
}
a.navbar:active {
color: #ff00ff;
}

a.navbar:visited {
color: #ffffff;
}
a.navbar:link {
color: #ffffff;
}

a.navbar:hover {
color: #993300;
background-color: #ffffff;
}

But inspecting the code for various web sites it seems that people use the list tag <li>for horizontal menus. However as I can’t see the relevant CSS I don’t understand how it works, and I'm fairly new to CSS anyway (& I got this code from a manual).

Should I be using list tags and how does it link with the style sheet?

If so, can anyone explain what the code should be or point me to a good tutorial on the topic.

Thanks

Hi

Not sure if this comes under css or semantic html....

I am trying to find an alternative to using a table for this requirement.

1. All text can expand.
2. All cells must align (as in a table).
3. Text must make use of available space and cannot wrap.
4. If the content becomes to long, then the panels float underneath (as normal when there is not enough space)

The problem with using a list horizontally is that if labels are longer they wont align (item 2).

So I thought about using a list vertically. This way the list will be as wide as the widest items in the list. Float the content list next to it. That way we keep the alignment.

So far so good.

Problem. Because Panel2-label and panel2-content are associated, if the panel flows underneath because of lack of space. Then the 2 associated panels should not be separated.

I cannot achieve this. I have tried wrapping the panels in a div then adding a nowrap. But this doesn't work.

Do anyone have any thoughts on how to achieve this, or whether it is possible.

Cheers

Langer

<!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">
body {font-family: Arial, Helvetica, sans-serif; font-size: 75%; margin: 0px; padding:0px;}
.container {margin: 0 auto; padding:10px; border:1px solid #000; width:600px;}
ul {list-style:none; padding:0; margin:0; float:left;}
li {padding-right:10px; border:1px solid #f90;}
li.li1 {font-weight:bold;}
.panel1 li.li2 {margin-right:10px;}
</style>
</head>
<body>
<div class="container">
<div class="panel1">
<ul>
<li class="li1">Panel 1 label 1</li>
<li class="li1">Panel 1 label 2 longer</li>
</ul>
<ul>
<li class="li2">Panel 1 Content 1</li>
<li class="li2">Panel 1 Content 2 longer</li>
</ul>
</div>
<div class="panel2">
<ul>
<li class="li1">Panel 2 label 1</li>
<li class="li1">Panel 2 label 2 longer</li>
</ul>
<ul>
<li class="li2">Panel 2 content 1</li>
<li class="li2">Panel 2 content 2</li>
</ul>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>

hello,

what is the easiest way to make url listing,, about 5000 urls to make
links in homepage? yes, manual listing is one, <a href="www.example.com">example</a>

but.. is there any faster way?
url are in urllist.txt and in openoffice database file

i have dremweaver,open office