SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css nav: ul, img+text

    hi all. i've moderately dabbled in css, and since i'm a
    bit more experienced now, i thought i'd finally convert
    my site with ye ol' table layout to css. i'm trying to
    arrange a series of images, each image is a hyperlink
    which leads to another page, each image has a centered
    caption underneath. the entire nav will be in a div w/
    a fixed width, enough for 3 images per row.

    if you look at the navigation on this page,
    its similar to what i'm doing (the look of it,
    not the code!)

    i figured i'd use a ul for the images, but i'm not sure
    how to fit the text in. (i set the width of the div a little
    wider for now, until i move the text below the images.)

    so far is all i have is this:

    Code:
    <div id="nav">
    <ul>
     <li><img src="http://jk.vc/blank.gif">item1</li>
     <li><img src="http://jk.vc/blank.gif">item2</li>
     <li><img src="http://jk.vc/blank.gif">item3</li>
    </ul>
    </div>
    (note: for the sake of simplicity, i will add the
    hyperlinks later)

    css:
    Code:
    body {
    /*for clarity*/
    background:#eee;
    margin:0;
    }
    #nav {
    width:850px;
    border:1px dashed;
    margin-left:auto;
    margin-right:auto;
    }
    #nav ul {padding:0;}
    #nav li {display:inline;}
    i was hoping not to have to use a div for every individual image.
    any help is appreciated. =]

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To imitate the table cells I think you need divs that can be floated to wrap into rows. Alternative solutions with captions underneath I think will be more complicated.
    Happy ADD/ADHD with Asperger's


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
  •