20 replies [Last post]
tonydotigr
Offline
Regular
Last seen: 17 years 13 weeks ago
Joined: 2005-09-02
Posts: 22
Points: 0

Do UL and LI support classes or ids?

I have a couple different variations of a UL and LI I would like to use. TIA

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 39 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

UL and LI classes?

Classes and ids may be applied to any element but BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

tonydotigr
Offline
Regular
Last seen: 17 years 13 weeks ago
Joined: 2005-09-02
Posts: 22
Points: 0

UL and LI classes?

I've got a problem with IDs, keeps dropping download down to the next line.

HTML code:
<ul>
<li id="lileft">File</li><li>Description</li><li id="lileft">Download</li>
</ul>

CSS code:
#lileft {
display: inline;
font: 18px sans-serif;
color: #000000;
float: left;
padding-right: 100px;
}

#liright {
display: inline;
font: 18px sans-serif;
color: #000000;
float: right;
}

Any ideas what I'm doing wrong?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

UL and LI classes?

Are they all s'posed to be displayed horizontally? If so, you want to do something like this:

ul li { display: inline; }

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

tonydotigr
Offline
Regular
Last seen: 17 years 13 weeks ago
Joined: 2005-09-02
Posts: 22
Points: 0

UL and LI classes?

yes, and I already have the code in place... it's shown above.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

UL and LI classes?

Yeah, but you're applying it to individual <li>s instead of all of them.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

tonydotigr
Offline
Regular
Last seen: 17 years 13 weeks ago
Joined: 2005-09-02
Posts: 22
Points: 0

UL and LI classes?

Thanks for the help all, finally got this after a couple days and your help. The code in CSS below ended up working. Thanks again!

ul{
display: inline;
list-style: none;
font: 18px sans-serif;
color: #000000;
text-align: center;
}

li{
text-align: center;
}

#lileft {
font: 18px sans-serif;
color: #000000;
float: left;
padding-left: 10px;
}

#liright {
font: 18px sans-serif;
color: #000000;
float: right;
padding-right: 10px;
}

tonydotigr
Offline
Regular
Last seen: 17 years 13 weeks ago
Joined: 2005-09-02
Posts: 22
Points: 0

UL and LI classes?

Well I guess I lied, sorry to be a bother. Attached below in a picture is my problem. Views fine in IE, but not in firefox as shown in picture. Again here is my code. Thanks again all!

HTML code:
<ul>
<li class="headlileft">File</li><li class="headliright">Status</li><li>Description</li>
</ul>

<ul>
<li class="lileft">Bluetooth</li><li class="liright">Download</li><li>Paper on Bluetooth

Technology</li>


CSS code:

ul{
display: inline;
list-style: none;
color: #000000;
}

li{
text-align: center;
}

.headlileft {
color: #000000;
float: left;
padding-left: 20px;
}

.headliright {
color: #000000;
float: right;
padding-right: 20px;
}

.lileft {
color: #000000;
float: left;
padding-left: 20px;
}

.liright {
color: #000000;
float: right;
padding-right: 20px;
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

UL and LI classes?

What you are trying to achieve is actually much better suited to a defintion list:

<dl>
<dd>Heading goes here</dd>
<dt>Description goes here</dt>
</dl>

But if you prefer to use an unordered list you still wouldn't do it the way you've structured it. You've used two separate <ul>s - one for heading another for description - when you should be combining them in one:

<ul>
<li><h5>File</h5>
<p>Bluetooth</p>
</li>
<li><h5>Description</h5>
<p>Paper on Bluetooth Technology</p>
</li>
<li><h5>Status</h5>
<p>Download</p>
</li>
</ul>

I've used <h5> for the heading but you can use whatever you want. Lists don't only have to contain one word or sentence. You can include whole paragraphs with associated headings within a <li>.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

tonydotigr
Offline
Regular
Last seen: 17 years 13 weeks ago
Joined: 2005-09-02
Posts: 22
Points: 0

UL and LI classes?

I'm still wondering why that code will not work in Firefox. It only adds spaces in with the first two entries. It works fine in IE.

Also having difficulties with the code provided.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

UL and LI classes?

Are you in standards or quirks mode? It still looks to me like this is the correct place for a table.

tonydotigr
Offline
Regular
Last seen: 17 years 13 weeks ago
Joined: 2005-09-02
Posts: 22
Points: 0

UL and LI classes?

Standards or Quirks?

Below is my doctype.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

I've posted the html and css and can be found at http://dark.lostedge.com/masanz

Just confused how it only messes up on first couple lines with table.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

UL and LI classes?

Quirks Mode !

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tonydotigr
Offline
Regular
Last seen: 17 years 13 weeks ago
Joined: 2005-09-02
Posts: 22
Points: 0

UL and LI classes?

What does quirks mode mean? Anyone have a clue why works fine in IE but not Firefox?

http://dark.lostedge.com/masanz

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

UL and LI classes?

You need a full doctype complete with url to put browsers in standards compliant mode. Without a doctype, or with an incorrect or incomplete doctype, browsers are thrown into quirks mode where they render things the old way, the incorrect way. You shouldn't rely on IE for testing in either mode as even in standards mode it's a POS. Test in Firefox and then hack for IE. Google doctype switching to get up to speed. Here's a sample code for you to compare things with.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Gregory J. Masanz</title>
  <meta name="robots" content="index">
  <meta name="description" content="Gregory J. Masanz's Personal Website"> 
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <meta name="keywords" content="Gregory, Masanz, research, bluetooth, pictures, ISU, Illinois, Wisconsin, HTPC, GBPVR"> 
  <meta name="generator" content="notepad">
  <meta name="author" content="Gregory J. Masanz">
  <style type="text/css">
  
body {
    margin: 0;
    font-family: sans-serif;
    }
    
#header{
    background:#d0d0d0;
    }
    
#header h1 {
    text-indent: -999em;
    background: url(images/header.png);
    height: 100px;
    }

#header ul{
    margin: 0; 
    padding: 0;
    list-style: none;
    color: #fff;
    font: bold 18px sans-serif;
    }
    
#header ul li{
    display: inline;
    }

#header ul li a {
    padding: 3px 30px;
    text-decoration: none;
    color: white;
    }

#header ul li a:hover {
    color: black;
    }
    
h2, h3, thead {
    background: #d0d0d0;
    }
    
h3 {
    text-align: center;
    }

table {
    width: 98%;
    border-spacing: 0;
    margin: 0 auto;
    }

#main {
    margin-top: 10px;
    padding: 0 10px;
    height: 500px;
    width: 70%;
    background-color: #fff;
    border: 4px solid #d0d0d0;
    overflow: auto;
    }

#footer{
    margin-top: 20px;
    height: 30px;
    color: #fff;
    background: #d0d0d0 url(images/footer.png) bottom left repeat;
    }
    
  </style>
</head>

<body>

<div id="header">
  <h1>Gregory J. Masanz</h1>

  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="media.html">Media</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>


<div id="main">
<h2>News:</h2>

<h3>8/29/05</h3>
<p>Welcome to my new page! The Gallery was starting to consume a lot of space. Pictures are now only downloadable via a ZIP file according to album. The new method saves me alot of space and time, and allows website updates to happen quicker, and thus become more frequent. Many other changes will become apparent after browsing.  Hope you enjoy the new look, I do!</p>

<h3>8/31/05</h3>
<p>Simply a test</p>

<h3>8/31/05</h3>
<p>Welcome to my new page! The Gallery was starting to consume a lot of space. Pictures are now only downloadable via a ZIP file according to album. The new method saves me alot of space and time, and allows website updates to happen quicker, and thus become more frequent. Many other changes will become apparent after browsing.  Hope you enjoy the new look, I do!</p>

<h3>8/31/05</h3>
<p>Welcome to my new page! The Gallery was starting to consume a lot of space. Pictures are now only downloadable via a ZIP file according to album. The new method saves me alot of space and time, and allows website updates to happen quicker, and thus become more frequent. Many other changes will become apparent after browsing.  Hope you enjoy the new look, I do!</p>


<table>
  <thead>
    <tr>
      <th>File</th>
      <th>Description</th>
      <th>Status</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>Bluetooth</td>
      <td>Paper on Bluetooth technology</td>
      <td><a href="/">Download</a></td>
    </tr>
    <tr>
      <td>Bluetooth</td>
      <td>Paper on Bluetooth technology</td>
      <td><a href="/">Download</a></td>
    </tr>
    <tr>
      <td>Bluetooth</td>
      <td>Paper on Bluetooth technology</td>
      <td><a href="/">Download</a></td>
    </tr>
  </tbody>
</table>

</div>

<div id="footer"></div>

</body>
</html>

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

UL and LI classes?

ul{
display: inline;
list-style: none;
color: #000000;
}

Remove the display: inline.

You may want the li elements to be inline - you have gone with floating them, which is a valid alternative - but there is nothing I can see in your design that suggests the ul element should be inline.

And do you really want a specified height & overflow:auto on .main?

kpirbhai
Offline
newbie
Last seen: 17 years 13 weeks ago
Joined: 2005-09-07
Posts: 2
Points: 0

UL and LI classes?

Please don't spam our forums. You have been warned Laughing out loud

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

UL and LI classes?

Why don't you restrict your spam to your own threads?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

tonydotigr
Offline
Regular
Last seen: 17 years 13 weeks ago
Joined: 2005-09-02
Posts: 22
Points: 0

UL and LI classes?

Thanks soo much! Just have one more questions. Trying to figure out the following lines of code.

padding: 3px 30px;
margin: 0 auto;

I realize what the first number does, but not the second (30px and auto). Thanks again!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

UL and LI classes?

It reads top, right, bottom left. Bottom mirrors top and left mirrors right unless you specify different values so padding: 3px 30px actually means padding: 3px (T) 30px (R) 3px (B) 30px (L).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

tonydotigr
Offline
Regular
Last seen: 17 years 13 weeks ago
Joined: 2005-09-02
Posts: 22
Points: 0

UL and LI classes?

Thanks!