using <ul>, <li>, and <div> tags for lists and sub-lists

it's making an unwanted paragraph between sublist and next list item

[LABachlr]

I am using Dreamweaver MX, and am making a simple list that has sublists within it. The way I am making it is by clicking on the "unordered list" button which makes bullets to denote the new list item. For the sublist, I just hit the indent key, and it indents the listing to create a sublist. The items in the sublist have an empty circle for their button vs. the normal black dot. However, when I hit return and hit the outdent button, it goes to the next line making a new paragraph, but the bullet still is there.

It looks somewhat like this, except the sublist items have empty circles for their bullets, and are indented (this message board does not like spaces or empty circles):

--------------------------------------------
•list item
•list item
sublist item
sublist item

•list item
--------------------------------------------

Here is the coding that DW MX created:

--------------------------------------------
<ul>
<li>
<div align="left"><font size="2"><strong>list item</strong></font> </div>
<ul>
<li>
<div align="left"><font size="2">sublist item</font></div>
</li>
<li>
<div align="left"><font size="2">sublist item</font></div>
</li>
</ul>
</li>
<li><font size="2"><strong>list item</strong></font><font size="2">*</font></li>
--------------------------------------------

I would like it to look like this (again, with the sublist items indented with an empty circle for a bullet):

--------------------------------------------
•list item
•list item
sublist item
sublist item
•list item
--------------------------------------------

Any thoughts?

[grahamstewart]

Any thoughts?

Yeah, stop using Dreamweaver and write your html by hand instead! I mean <font> tags? Come on, they've been deprecated since 1997 [w3.org]. And whats with the pointless <div> around the list item?

Seriously tho, the space around the list can be adjusted by setting the

margin

property in CSS

e.g.

ul {
 margin: 0;
}

No idea how you achieve this in Dreamweaver tho.

[MWpro]

Graham is my hero, lol.

He is right: once you get rid of the editor and start learning html and css, you will have much more control over your pages and your code will be cleaner and less bloated. HTML is a very easy language... it is pretty much all just learning the syntax, and then you spice it up with css. I can't even remember what I used to do before I learned CSS... the things you can do with it are amazing.

[LABachlr]

I can access all coding in DW MX, including the CSS style sheet that is attached to all of the pages of the site.

Here is the CSS coding

------------------------------
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
background-color: #000000;
margin: 0px;
padding: 0px;

}
a:link {
color: #FF0000;
text-decoration: none;
}
a:visited {
color: #999999;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;

}
a:active {
color: #FFFFFF;
text-decoration: none;
}
------------------------------

Where exactly would your suggested coding go?

once you get rid of the editor and start learning html and css, you will have much more control over your pages and your code will be cleaner and less bloated. HTML is a very easy language... it is pretty much all just learning the syntax, and then you spice it up with css. I can't even remember what I used to do before I learned CSS... the things you can do with it are amazing.

What is the best resource for learning CSS?

[LABachlr]

e.g.

ul {
margin: 0;
}

Well, I put it in successfully, but there is more to it than what you suggested. Your suggestion produced a page that has all the lists and sublists lined up at the margin. None of the sublist items are indented.

Any other suggestions?

[grahamstewart]

No problem, you can adjust which ever margins you require.

For instance..

ul {
margin-top: 0;
margin-right: 5px;
margin-bottom: 2px;
margin-left: 50px;
}

or in the more compact, shorthand form..

ul {
margin: 0 5px 2px 50px; [blue]/* sets top,right,bottom,left in that order */[/blue]
}

or even more compact..

ul {
margin: 0 50px; [blue]/* 0 margin top and bottom, 50 pixels left and right */[/blue]
}

I suspect you want to leave the left and right margins as they are and just set margin-top and margin-bottom to zero.

If you only want to get rid of the margin on UL sub-lists then this is the code you need..

ul ul {
margin-top: 0;
margin-bottom: 0;
}

Good resources for learning CSS: well the CSS forum is a very good place to start - loads of helpful folk there - and have a look in its library for Nick_Ws excellent intro to CSS threads. Also check out the CSS pages at [w3schools.com...]

[LABachlr]

Forget it. My bad. My original coding works. When it is viewed in a browser, the paragraph disappears, and it appears exactly the way I want it. Looks like Dreamweaver MX beat CSS this time. ;)

BTW, the <div> tags are used to change the size and style of the font, and the alignment of the text.

[LABachlr]

Thanks a lot for the info, grahamstewart.

[MWpro]

Forget it. My bad. My original coding works. When it is viewed in a browser, the paragraph disappears, and it appears exactly the way I want it. Looks like Dreamweaver MX beat CSS this time. ;)

BTW, the <div> tags are used to change the size and style of the font, and the alignment of the text.

Just because it may look how you want it to doesn't mean that the syntax is right or that you did it the most efficent way... which you didn't.

If you are supposedly using the divs to control the text, why do you have font tags? And if controlling the font was your objective, you could have done this:

ul {
font-weight: bold;
font-size: .8em;
}

Pretty much all of my knowledge of css was learned right on these forums... head over to the CSS one and there is plenty of info for you.

[Jon_King]

LABach(lr),

I really think you blew off css way too quick.

Take my word on it until you learn css... css will spin circles around the code MX auto generates.

I use DW every day of my life and the code bloat for most situations has little effect but the code generated by DW's wsiwg interface is filled with anomalies that are especially cross browser problematic and just doesn't work correctly after a few ctrl-z undo's.

Sometimes the code is not really restored going back a few steps and strange tid bits of junk are inadvertently left behind.

And the worst thing is the 'old' standards some of the html follows for what reason I don't know, but as previously suggested it is outdated code in your brand new pages... actually seems silly considering how big and smart the folks at Macromedia are...

One last thing, when I first started using DW I surely thought that if it was on a menu or an option that DW would 'allow' it certainly must be ok .... oh no that is absolutely wrong. I could tell you a couple of really costly and embarassing mistakes caused by this belief. (We will save that for later)

You will be glad if you look into css more seriously.

[edited by: Jon_King at 2:37 am (utc) on May 9, 2003]

[LABachlr]

Just because it may look how you want it to doesn't mean that the syntax is right or that you did it the most efficent way... which you didn't.

I think you're forgetting something. I am using Dreamweaver MX. I did not do the coding. DW MX did. And I'm sure that it did it a heck of a lot quicker than it would take to code it manually.

Thanks for the tip on CSS.

[LABachlr]

Thanks Jon_King. I just don't have the time to learn a new coding right now. Am under some deadlines. I'll check it out when I get a chance, though.

Thanks for the heads up on DW.