How do you have two different types of unordered lists in HTML? I tried these 2 ways.

D

Dan V.

How do you have two different types of unordered lists in HTML on the same
page? I tried these ways shown below.
I would like to have the regular list with a 1/2 inch indent and one with a
1/8 inch indent on the same page.
Thanks,

<HTML>
<TITLE>Bach's home page</TITLE>

<STYLE TYPE="text/css">
BODY {
background: url(texture.gif) white;
color: black
}

UL {
font-style: italic;
font-weight: bold;
}

UL.indent {
margin-left: -24;
Left:-5;
}
</STYLE>

<BODY>
<H1>Bach's <EM>home</EM> page</H1>
<P>Johann Sebastian Bach was a prolific composer.
<p>The background colour is white in case the background gif image is
not
present. (Background does not inherit)</p>
<p>Inheritance Examples: </p>
<p>Body -&gt; Headings, Paragraph -&gt; Strong</p>
<p>Body-&gt; Unordered List -&gt; List</p>

<ul>
<li>line 1</li>
<li>line 2</li>
</ul>

<ul style="margin-Left:-24">
<li>line 3</li>
<li>line 2</li>
</ul>

<ul class="Indent">
<li>line 1</li>
<li>line 2</li>
</ul>

</BODY>

</HTML>
 
S

Steve Easton

Put them in cells in a table.

--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
........................with a computer
 
K

Kevin Spencer

What exactly is the proboem? You asked if you can have 2 different types of
ULs in one page, and your code demonstrates that you certainly can (I pasted
it into a new HTML document and previewed it).

If you're wondering why the UL.indent class is drawing the UL off the edge
of the page, well, you set the margin-left property to -24, and the left
property to -5.

--
HTH,
Kevin Spencer
..Net Developer
Microsoft MVP
Neither a follower
nor a lender be.
 
M

Murray

You can certainly do it without tables.

But, perhaps if I understood what it is you want to do, I could give you a
more negative response.... 8)
 
D

Dan V.

Strange.
When I view in IE and Firefox (newest version - on local computer) the code
is indented the same at about 1/2 inch for all three lists per browser.
Firefox has diamond bullets, IE round. In fact I can't even isolate the
indent, and use Outside and Inside styles, the lists are always the same!
 
D

Dan V.

The only thing for This works: margin-left: 30px and 15px. But rendered 1
inch differently in Browser! So can't use this. I guess I have to resort to
a table!???



UL {
margin-left: 30px;
}

UL.indent {
margin-left: 20px;
}
 
J

Jon Spivey

Dan,
You need to set both margin and padding for lists to have them work cross
browser. For example to remove the margin from a list
<style type="text/css">
ul{
margin:0;
padding:0;
}
</style>
<p>some text>
<ul>
<li>This list will be flush with the text</li>

Whatever margin you want set padding to the same measurement.
 
D

Dan V.

Thanks, John,
I ended up resorting to using the <li> and margin-left property and tables
and table padding, but your code is much better!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

CSS Problems 9
Main Page blocked 1
CSS question for background in webpage 7
text not displaying right in boxes at less than 1024 res, why? 4
any ideas why I can update one table in my database but not the other? 2
Underlining Mystery? 3
Making each HTML page the same style- but how? 1
Hyperlinks NOT underlined in website using CSS 3

Top