Clever Geek Handbook

Need help displaying children's lists without splitting parent lists

I print out a list of the major colleges we offer, then in each of them we have a concentration for each major.

Our scientific advisor has the following concentrations: environmental science and forestry, chiropractic, chemistry, biology

Here is a screenshot of what it does: alt text http://i38.tinypic.com/28r2vk7.jpg

I dont want the gap it displays (I dont want the gap you see after AAS staff management and after psychology.) In the screenshot, any help is appreciated.

The source will look like this:

<ul class="majors-list">
    <li>Major
        <ul class="concentrations-list">
            <li>Concentration Item</li>
            <li>Concentration Item</li>
            <li>Concentration Item</li>
            <li>Concentration Item</li>
        </ul>
    </li>
    <li>Major
        <ul class="concentrations-list">
            <li>Concentration Item</li>
            <li>Concentration Item</li>
            <li>Concentration Item</li>
            <li>Concentration Item</li>
        </ul>
    </li>
    <li>Major
        <ul class="concentrations-list">
            <li>Concentration Item</li>
            <li>Concentration Item</li>
            <li>Concentration Item</li>
            <li>Concentration Item</li>
        </ul>
    </li>
    <li>Major
        <ul class="concentrations-list">
            <li>Concentration Item</li>
            <li>Concentration Item</li>
            <li>Concentration Item</li>
            <li>Concentration Item</li>
        </ul>
    </li>
</ul>

Here's the CSS:

.col-middle .majors-list li{
    list-style-type:none;
    width:50%;
    float:left;
    margin-bottom:2px;
}

.col-middle ul.majors-list{
    margin-left:0;
}

.col-middle ul.concentrations-list{
    overflow:auto;
}

.col-middle .concentrations-list li{
    float:none;
}
+1


source to share


5 answers


Without javascript, you can't do this. With mozilla or webkit you can use - [moz | webkit] -column-count: 2; but even that won't give you the same solution that the given css almost provides for you, in other words, the ordering will be vertical instead of horizontal. When I played with the column-count property, the inner lists were also split into columns, which I suppose would not be adequate either.



A javascript solution that I think can be done quite easily with a framework like jquery will probably take each of the li elements and dynamically position them with a combination of position: relative and position: absolute attributes and a little math.

+1


source


Try float: right instead of float: left.



This works for Firefox 2. Doesn't work with (many) other browsers.

0


source


You want to assign a CSS property to the class-list class << 20>. You can then display one of the subscriptions by specifying its onclick event, which changes the class to concentration-list-list and adds the class-list-list-of-classes to CSS and gives it a property display: block;

.

0


source


You can do this with CSS3 columns, but I assume you need this to work in this browser.

0


source


One thing you might try is to make your display ul.majors-list: inline; (or inline-block) and float: left; It might work.

The above should have been "try to make your ul.majors-list li : inline;". But I can't get it to work just by playing with it quickly. Not sure how you can do this without getting rid of the topmost street and just make each one your own list.

0


source






More articles:


All Articles