0
\$\begingroup\$

I am designing a very basic file listing layout in HTML and CSS. Although its working but I would like to know if the following code could be improved upon so that its more good and follows the best practices. I am looking forward of supporting I.E 9+ too. Plus I would like to add a progress bar behind the left-wing. In other words I would like to show download progress behind the filename and time as a whole.

I am showing only the part I would like to review. Note that some text is white, and is visible in this JSFiddle.

#list-content
{
	margin:auto;
	margin-top: 5%;
	left: 0;
	right: 0;
	overflow-y: auto;
	position: absolute;
	width: 90%;
	height: calc(95% - 105px);
}
#file_list
{
	width: 100%;
}
#file_list li
{
	overflow: hidden;
	padding-top: 4px;
	padding-bottom: 4px;
}
.f_icon
{
	width: 10%;
	float: left;
	text-align: center;
}
.f_icon img
{
	width: 32px;
	height: 32px;
	display: block;
}
.left_wing
{
	width: 50%;
	float: left;
}
.f_name
{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	color: #FFFFFF;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.f_time
{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 12px;
	font-style: italic;
	color: cornflowerblue;
	padding-top: 2px;
}
.right_wing
{
	width: 40%;
	float: right;
	margin-top: 6px;
}
.f_size
{
	float: right;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: bold;
	color: #FFFFFF;
}
.f_delete
{
	float: right;
	font-family: 'Source Sans Pro', sans-serif;
	color: #B10002;
	margin-left: 15px;
	margin-right: 4px;
}
<div id="list-content">
    <ul id="file_list">
        <li>
            <div class="f_icon"><img src="images/Docs-icon.png"></div>
            <div class="left_wing">
                <div class="f_name">File name Short and loooooooooooong.ext</div>
                <div class="f_time">Sep 08, 2016</div>
            </div>
            <div class="right_wing">
                <div class="f_delete"><i class="fa fa-trash fa-align-center" aria-hidden="true"></i></div>
                <div class="f_size">34.50 MB</div>
            </div>
        </li>

        <li>
            <div class="f_icon"><img src="images/Docs-icon.png"></div>
            <div class="left_wing">
                <div class="f_name">File name Short.ext</div>
                <div class="f_time">Sep 08, 2016</div>
            </div>
            <div class="right_wing">
                <div class="f_delete"><i class="fa fa-trash fa-align-center" aria-hidden="true"></i></div>
                <div class="f_size">34.50 MB</div>
            </div>
        </li>
    </ul>
</div>

\$\endgroup\$
1
\$\begingroup\$

img: alt

Each ìmg element needs an alt attribute. If the image is only decorative or redundant, use an empty value:

<img src="images/Docs-icon.png" alt="">

time

You could use the time element for the dates:

<time class="f_time" datetime="2016-09-08">Sep 08, 2016</time>

abbr

If you want, you could use abbr for "MB", and give the expansion in the title attribute:

<div class="f_size">34.50 <abbr title="Megabyte">MB</abbr></div>

span instead of i

You should not use the i element for CSS icons. Use the meaningless span instead:

<span class="fa fa-trash fa-align-center" aria-hidden="true"></span>

Accessibility of delete function

Note that this icon will not be accessible (because the element has no content, and because of aria-hidden anyway). If it’s really a delete function (which the class name suggests), you should provide alternate content so that, for example, also users with screenreaders can delete files.

The most simple solution would be to use a button with an img that has an alt value like "Delete file xy":

<button type="button"><img src="delete.png" alt="Delete file 'File name Short.ext'"></button>

Markup structure

It seems to me that you have a table, not a list. Then you should use the table element.

<table>

  <thead>
    <tr>
      <th>Name</th>
      <th>Date</th>
      <th>Size (in <abbr title="Megabyte">MB</abbr>)</th>
      <th>Delete</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>File name Short and loooooooooooong.ext</td>
      <td><time datetime="2016-09-08">Sep 08, 2016</time></td>
      <td>34.50</td>
      <td><button type="button"><img src="delete.png" alt="Delete file 'File name Short and loooooooooooong.ext'"></button></td>
    </tr>
    <tr>
      <td>File name Short.ext</td>
      <td><time datetime="2016-09-08">Sep 08, 2016</time></td>
      <td>34.50</td>
      <td><button type="button"><img src="delete.png" alt="Delete file 'File name Short.ext'"></button></td>
    </tr>
  </tbody>

</table>
| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ How can I have the delete css icon in the button instead of a full fledged png image? \$\endgroup\$ – Ayan Sep 10 '16 at 13:58
  • \$\begingroup\$ @Ayan: You mean the icon displayed via CSS? I have not much experience with this, but can’t you display it in the button like you did it in i? \$\endgroup\$ – unor Sep 11 '16 at 17:01
  • \$\begingroup\$ Done. Used span tags inside the button element. Is that a good markup? \$\endgroup\$ – Ayan Sep 12 '16 at 1:33
  • \$\begingroup\$ @Ayan: As long as the button does not only consist of the CSS icon, this should be fine. \$\endgroup\$ – unor Sep 12 '16 at 2:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.