SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot bemmott's Avatar
    Join Date
    Mar 2007
    Location
    NY, USA
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    text wrap image?

    I have a question I hope someone can help me with.

    One of the pages on my website, http://sunrisersalumni.org/halloffame.htm presently consists of a single column of text (names), left aligned. What I would like to do, if possible, is to place an image measuring 400x305px in the center of the page and have it flanked by two columns of names so the page looks better.

    The page is verified CSS at this time, though it is in the process of being changed some by removing the page CSS and replacing it with a linked CSS file for neatness.

    The list of names is alphabetized by last name and I's like to keep it that way if it matters in making this work.

    Can anyone render an opinion of how to best achieve this?

    Thanks in advance ...
    Bruce ...

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There is no way (at present) to distribute data over 2 columns automatically (although css3 has some column routines that will do this - but is not supported enough to have any use at present).

    If you want to divide the lists manually then you can simply float them as columns. If you want an image in the middle then that can be floated also (or it could be a background image).

    Here's the simplest example.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #outer{
        width:982px;
        border:1px solid #000;
        margin:auto;
        overflow:hidden
    }
    .column1,.column2,.column3{
        width:250px;
        float:left;
        background:#ffffcc
    }
    .column3{float:right;}
    .column2{
        width:405px;
        margin:0 0 0 38px
    }
    p.image{
        width:405px;
        height:305px;
        background:red;
    }
    
    </style>
    </head>
    <body>
    <div id="outer">
        <div class="column1">
            <ul>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
            </ul>
        </div>
        <div class="column2">
            <p class="image">image</p>
        </div>
        <div class="column3">
            <ul>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
            </ul>
        </div>
    </div>
    </body>
    </html>
    Hope it helps

  3. #3
    SitePoint Zealot bemmott's Avatar
    Join Date
    Mar 2007
    Location
    NY, USA
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul - appreciate that.

    I'll have to look to see how to combine that with the current css and take it from there.
    Bruce ...


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
  •