Document download layout

HTML & CSS
1

Hi Folks,

I’m trying to output a list of documents.

An icon showing the filetype, word, pdf etc.

The document name as a link to download it.

A brief paragraph of text to describe the document.

Are there any layouts I can use?

I dont really want to use a table. I’d just like something that looks good and is easy to use.

Here is my code, but I’ve got some onflicting styles, and the p tags dont clear properly.

Any help much appreciated.

<div style=‘docrow’ >
<img src=‘/images/.doc.gif’ style=‘display:inline;’ />
<a href=‘/xx/xx.doc’ style=‘display:inline;’>
xx xx xx.doc</a>
<span ><p>description text</p></span>
</div>

2

HI,

It’s a little difficult without a picture of what you want but it should be straight forward.

Something like this perhaps.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul.documents {
    margin:0;
    padding:0;
    list-style:none;
    width:300px;/* set width here if needed */
}
ul.documents p {
    margin:0 0 2px;
}
ul.documents li {
    border-bottom:1px solid #000;
    padding:10px 0;
    width:100&#37;;
}
ul.documents li a, ul.documents li img {
    display:inline;
    vertical-align:middle;
}
</style>
</head>
<body>
<ul class="documents">
    <li>
        <p><img src='/images/.doc.gif' alt="" > <a href='/xx/xx.doc'>xx xx xx.doc</a></p>
        <p>description text can go here : description text can go here : description text can go here : description text can go here : description text can go here : </p>
    </li>
    <li>
        <p><img src='/images/.doc.gif' alt="" > <a href='/xx/xx.doc'>xx xx xx.doc</a></p>
        <p>description text can go here : description text can go here : description text can go here : description text can go here : description text can go here : </p>
    </li><li>
        <p><img src='/images/.doc.gif' alt="" > <a href='/xx/xx.doc'>xx xx xx.doc</a></p>
        <p>description text can go here : description text can go here : description text can go here : description text can go here : description text can go here : </p>
    </li>
</ul>
</body>
</html>