SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Document download layout

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

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

    Something like this perhaps.

    Code:
    <!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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •