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>
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%;
}
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>