Arranging several lists in columns with a customized header title

Question

Arranging several lists in columns with a customized header title

I am looking to have 7 lists displayed side by side, each with a unique styled header title. I want the lists to be neatly organized under their respective titles, including the bullets. I attempted to use text-indent for this purpose, but it seems that it's not compatible with IE8. Below is the code I came up with as a beginner web developer, however, I'm encountering validation errors. Even though I know having styled headers directly under the UL tag is not standard practice, it's the only way I could achieve the desired clean layout. Can someone help me identify what mistake I am making?


<ul style="width:14%; float:left;">
    <span style="font-size: 13px;"><p class="notice">Title 1</p></span>
    <li><a class="underline2" href="etc etc"><span style="font-size: 10pt; line-height: 14px; color: #616161;">aaaaa</span></a></li>
    <li><a class="underline2" href="etc etc"><span style="font-size: 10pt; line-height: 14px; color: #616161;">bbbbb</span></a></li>
    <li><a class="underline2" href="etc etc"><span style="font-size: 10pt; line-height: 14px; color: #616161;">ddddd</span></a></li>
</ul>

<ul style="width:14%; float:left;">
    <span style="font-size: 13px;"><p class="notice">Title 2</p></span>
    <li><a class="underline2" href="etc etc"><span style="font-size: 10pt; line-height: 14px; color: #616161;">eeeeee</span></a></li>
    <li><a class="underline2" href="etc etc"><span style="font-size: 10pt; line-height: 14px; color: #616161;">ffffff</span></a></li>
    <li><a class="underline2" href="etc etc"><span style="font-size: 10pt; line-height: 14px; color: #616161;">hhhhhhh</span></a></li>
</ul>

<ul style="width:14%; float:left;">
    <span style="font-size: 13px;"><p class="notice">Title 3</p></span>
    <li><a class="underline2" href="etc etc"><span style="font-size: 10pt; line-height: 14px; color: #616161;">iiiiii</span></a></li>
    <li><a class="underline2" href="etc etc"><span style="font-size: 10pt; line-height: 14px; color: #616161;">kkkkkk</span></a></li>
    <li><a class="underline2" href="etc etc"><span style="font-size: 10pt; line-height: 14px; color: #616161;">llllllll</span></a></li>
</ul>

html css validation

Answer 1

Answer №1

Your HTML code is not valid, and you are using inline styles unnecessarily.

To improve the structure, I have added a wrapping div around the lists and headers with a specific class name.

For a working demonstration, see this link:

http://jsfiddle.net/Pf8eR/

Below is the corrected HTML markup:

<div class="column">
    <h2>First Column</h2>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
</div>

<div class="column">
    <h2>Second Column</h2>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
</div>

<div class="column">
    <h2>Third Column</h2>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
</div>

And here is the corresponding CSS:

ul, li{
margin:0;
padding:0 0 0 15px;    
}

.column{
    float: left;
    margin: 0 20px 0 0;
}

Answer 2

Your HTML code is not valid, and you are using inline styles unnecessarily.

To improve the structure, I have added a wrapping div around the lists and headers with a specific class name.

For a working demonstration, see this link:

http://jsfiddle.net/Pf8eR/

Below is the corrected HTML markup:

<div class="column">
    <h2>First Column</h2>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
</div>

<div class="column">
    <h2>Second Column</h2>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
</div>

<div class="column">
    <h2>Third Column</h2>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
</div>

And here is the corresponding CSS:

ul, li{
margin:0;
padding:0 0 0 15px;    
}

.column{
    float: left;
    margin: 0 20px 0 0;
}

Answer 3

Answer №2

The issue with the validator error messages stems from the fact that a ul element can only have li elements as children, and a span element should not contain a p element. (This is typically covered in most HTML tutorials.)

However, your list titles are more appropriately considered headings rather than paragraphs. Depending on the context, if this construct appears at the top level of hierarchy, using h2 would be suitable. This code snippet demonstrates the structure:

<div class=list>
<h2>Title 1</h2>
<ul>
<li>Item one
<li>Item two
<li>Item three
</ul>
</div>

Introducing an additional div element allows you to style the list and its heading as a cohesive unit. To achieve a desired result, you may consider implementing a stylesheet like the example provided below:

.list { width: 14%; float: left; }
.list h2 { font-size: 13px; font-weight: normal }
.list li { font-size: 10pt; line-height: 14px }
.list ul, .list ul li { margin: 0; padding: 0; }
.list ul, .list h2 { margin-left: 1.3em; }

It is advisable to place these styles in an external stylesheet or a style element to enhance readability and ease of maintenance. The specified font sizes in the example correspond to your current settings. Ideally, refrain from setting font sizes for list items and instead consider adjusting the font size of headings to a larger value relative to regular text, such as font-size: 115%.

Answer 4

The issue with the validator error messages stems from the fact that a ul element can only have li elements as children, and a span element should not contain a p element. (This is typically covered in most HTML tutorials.)

However, your list titles are more appropriately considered headings rather than paragraphs. Depending on the context, if this construct appears at the top level of hierarchy, using h2 would be suitable. This code snippet demonstrates the structure:

<div class=list>
<h2>Title 1</h2>
<ul>
<li>Item one
<li>Item two
<li>Item three
</ul>
</div>

Introducing an additional div element allows you to style the list and its heading as a cohesive unit. To achieve a desired result, you may consider implementing a stylesheet like the example provided below:

.list { width: 14%; float: left; }
.list h2 { font-size: 13px; font-weight: normal }
.list li { font-size: 10pt; line-height: 14px }
.list ul, .list ul li { margin: 0; padding: 0; }
.list ul, .list h2 { margin-left: 1.3em; }

It is advisable to place these styles in an external stylesheet or a style element to enhance readability and ease of maintenance. The specified font sizes in the example correspond to your current settings. Ideally, refrain from setting font sizes for list items and instead consider adjusting the font size of headings to a larger value relative to regular text, such as font-size: 115%.

Answer 5

Answer №3

Consider adding the following CSS code to your ul element.

ul{
display:inline-block;
vertical-align:top;
}

Answer 6

Consider adding the following CSS code to your ul element.

ul{
display:inline-block;
vertical-align:top;
}

Arranging several lists in columns with a customized header title

Answer №1

Answer №2

Answer №3

Similar questions

Issue with backdrop-filter blur effect not functioning correctly

Enable the use of custom tags containing hyphens in the kses filter for WordPress

Code snippet that will emphasize the active page if there are multiple pages, such as highlighting page 2

Issue with the flexbox div not fully occupying the vertical space

Can you conceal the label while also displaying the placeholder?

Replace the typical bootstrap text class with stylish and modern google material icons

Exploring the possibilities of applying CSS to customize the color of various elements

Toggle the visibility of a div depending on the user's selection

Change the width of specific <li> elements to create variation

Is it feasible to modify a JavaScript value through the PHP GET method?

My code gets disrupted when I switch between ids and classes

Using JSON to serialize form data before sending it in HTML

Tips for creating a hidden tab that only appears when hovered over

Global variable appears undefined in Angular 2 view, yet it is still displaying

Replicating a row in a table without disrupting a button within the row

Achieving perfect center alignment for the middle element with flexbox

Utilizing Custom Script Tag Types in Visual Studio for Enhanced HTML Template Functionality and Improved Syntax Highlighting

Guide on showcasing jQuery variable values in PHP on a single page

Pressing the 'Enter' key within a textarea in a JQuery

Are the maps intersecting within the field of vision?