I'm using VSD to create a site, and I've managed to add a scrolling div to one of the pages using the add html tool (it contains a very long salon/spa menu). Rather than type out the whole thing in the VSD html box, I decided to give the HTML Editor a try. So far, so good.... but I don't know where and what to put in it to change the font, the font color and if possible lessen the space between the titles and list items. It's not on line yet, but here's the code:



This is just the beginning of it, but the whole thing is just section titles followed by lists of services.

http://i68.servimg.com/u/f68/14/58/51/55/menu-s10.jpg

Keep in mind - I usually drag 'n drop - this is new territory for me, so "talk" slow!

<style type="text/css">
<!--
div.scroll {
height: 575px;
width: 550px;
overflow: auto;
border: 3px double #827d3e;
background-color: #ffffc4;
padding: 8px;
}
-->
</style>

Hiya Paintbrush,

The above code is the basic start of your CSS styles and where you would make the changes or additions. It looks like all the styles pertaining to that list area are in one section so that makes it easy to add things since you don't have to wonder which section is going to affect what at this point.

The items you want changed aren't referenced in the above code at all so in order to change them you'll need to add a couple lines to the above code. You can put the added lines anywhere inside the 2 brackets { } . Add these lines and adjust the numbers/colors/styles to your liking:

color: #4F2054;
font-family: arial;
font-size:11px;
line-height: 17px;

Change the color number to another hex number or a basic color name works also. Change the font-size number to whatever size you want and the font-family to your own style. Change the line-height number to any number that you want to change the amount of space between lines.

I'm not sure how to change that space between the title and the list items though. The above line-height won't fix that I don't believe. I think it may need settings for padding or separate settings for the titles rather than the H4 tags. It's definitely the H4 tag that does that extra spacing so maybe someone else will know how to adjust that spacing.

Thank you very much, Jo Ann!
Maybe I'll try calling the titles something else (instead of h4) and see if that helps with the spacing -
Unless you or anyone else have a different suggestion I should try.

To change the line height of your heading insert the following code:

h4{line-height: 1.7em;}

If you want the line height tighter adjust the 1.7 downward, if you want more space adjust it upward.

Forgot to mention this is different from your

div.scroll

so it must be in a line by itself.

Thank you, Eric - that seems easy enough to do

No problem just let us know if you need anything else.

Thanks Eric, I didn't know how to do that either and have always wondered how to make that space smaller myself too without losing the heading tags

Actually, depending on how much space you want to get rid of you might just want to set a negative margin. I do that more than I use line-height. It would look like this:

h1,h2{margin-bottom:-5px;}

You should not need to go further than "-10px"

But this might be a good option too.

Thanks for sharing that, Eric.