asked on

Basic CSS issues

Hello,

I'm trying to do a page mock-up and using CSS (I'm a beginner who is learning).

I've got two problems which I'm facing. I'm sure they're quite simple to fix if you know what you're doing.

Problem 1: Spacing after div

I want some space after a grey box divider.

Code is:

.gray_section_divider {
      background-color: #E6E6E6;
      margin-left: 0px;
      opacity: 1;
      margin-top: 50px;
      margin-bottom 50px;
      line-height: 24px;
}

<div class="gray_section_divider"> </div>

But, my styling is not being applied.

Problem 2: I'm trying to add a line between items in certain lists. Apparentlty, I'm not declaring the style and applying it correctly

Code is:

.doublespace ul,li {
margin-top: 10px;
list-style:disc;
}

<ul class="doublespace">
<li><strong>Meaningful</strong>
<ul>
<li>Be approved/recommended by leadership within the organization
<li>Be important/significant to the organization/unit from a strategic perspective (e.g., contribute to organizational success)
<li>Have some degree of urgency (but it can’t be so urgent that there is no time for reflection/learning)
<li>May be significant to at least one team member (e.g., future opportunities for that individual may depend on the success of this initiative); this is a helpful characteristic although not all problems must have this element
</ul>
<li><strong>Challenging enough to provide an opportunity to learn</strong>
<ul>
<li>Have no obvious or existing solution or be one with multiple possible solutions
<li>Provide sufficient opportunity for learning to occur (e.g., will challenge individuals’ thinking and require innovation)
</ul>
<li><strong>Actionable</strong>
<ul>
<li>Be feasible in that progress toward a solution could be made within the allotted timeframe
<li>Have a solution that the team has the authority to implement or can at least provide recommendations with confidence that action will be taken
<li>Have at least one team member who is familiar with the context of problem; although not all members must be familiar with it
</ul>
</ul>
<div class="blue_section_box"><img src="/global/images/icons/tip.gif" height="16" width="41" alt="Tip" border="0" align="left">
If you start the AL process by identifying the team, you may want to involve them in identifying the problem.
</div>
<li><strong>Identify the target group for AL. </strong>

Identify the individuals, whether they are in a group or an intact team, who will learn this approach to problem solving and working. Typically, four to eight individuals are selected for an AL team.
<p>
Some criteria for selecting a team include:
<ul type="disc">
<li><strong>Commitment</strong> – each member of the group/team must have a stake in solving the problem that is identified
<li><strong>Knowledge/Familiarity</strong> – at least one team member should be quite familiar with and knowledgeable about the problem
<li><strong>Power</strong> – the team should have the ability to implement/test potential solutions and/or make recommendations
<li><strong>Diverse Membership </strong>– team members should be selected to reflect the diversity required to work on the problem (e.g., experience, function, gender, expertise, age, ethnicity/nationality, specialties)
</ul>

Thanks in advance!

Steve

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Steve Bohler

ASKER

Thanks for your reply.

I added the colon, but it didn't seem to change anything (although it looks fine in my editor).

The URL is at: https://dev.goebase.com/overviews/new/action_learning_resource.asp

Regarding the second problem, you're suggestion to add the </li> closing tags worked.

Now, I want the added spacing between list items for only those in class "doublespace." Doesn't my CSS enforce that?

Thanks,

Steve

Chris Stanyon

Looking at your page, the bottom margin to your grey divider is being applied correctly. Each grey bar has a bottom margin of 20px;

As for applying the style only to the li inside doublespace, you need to qualify each part of your CSS Rule, so you would need something like this:

.doublespace ul, .doublespace li {
    margin-top: 10px;
    list-style:disc;
}

Open in new window

You do seem to have quite a few issues with your html, so if something's not working the way you expect, fix them first. A webpage with CSS will ALWAYS work better if your HTML is semantically correct. If you View Source in Firefox, you'll see all the issues highlighted in red.

Steve Bohler

ASKER

Ah, didn't notice the fix to the grey divider bar. Must have refreshed before the upload was finished.

On a similar tangent, if I wanted all unordered lists to

And, yes, there are lots of things messed up in the HTML. Is there a good "cleaner" you could recommend?

Chris Stanyon

To be honest, any automated 'cleaner' is never going to do the best job. They can often highlight problems, but your always better off fixing them yourself. In your case, they're pretty straight forward to fix.

What can often help is a decent IDE or HTML Editor. They'll generally do a pretty decent job of highlighting potential issues. They also help massively with indenting your code. Although HTML effectively ignores whitespace, a nicely indented HTML document is so much easier to debug and fix.

** You seem to have asked part of a question regarding unordered lists. I'm guessing there's more to it :)

Steve Bohler

ASKER

OK, thanks.

Please ignore the partial list question. I figured it out after I started typing.

Steve