1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

how to use CSS to acheive this list?

Discussion in 'HTML & Website Design' started by bnelsonFSO, Feb 8, 2009.

  1. #1
    Can someone give me some insight on how i could CSS to achieve a footer similar to this website:

    http://iyogi dot net

    seems like what i keep trying shifts the words around too much.

    Thanks for any help.
     
    bnelsonFSO, Feb 8, 2009 IP
  2. myst729

    myst729 Peon

    Messages:
    289
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Just do it like this site does:

    HTML:
    <div style="position: relative; width: 950px;">
      <div class="footer_logo">
        <img alt="iYogi" src="images/footer_logo.gif"/>
      </div>
    </div>
    Code (markup):
    CSS
    .footer_logo {
      position: absolute;
      top: 155px;
      left: 18px;
    }
    Code (markup):
     
    myst729, Feb 8, 2009 IP
  3. bnelsonFSO

    bnelsonFSO Banned

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thanks for the reply.

    Im sorry i didnt give a good description of what I wanted to do.

    I want to make a footer with a list of pages in it.

    like:

    Home | Product A | Something A | Another A
    Service | Product B | Somthing B | Another B
    Contact | Product c | Somthing C | Another B

    so kinda like a list in the footer kinda like the above example, however everything needs to line up.
     
    bnelsonFSO, Feb 9, 2009 IP
  4. xkatx21x

    xkatx21x Peon

    Messages:
    93
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    The example you gave just uses table to make the footer.

    So you would just use
    
    <table>
    <tr>
    <td><a href="home.html">Home</a></td>
    <td><a href="home.html">Product A</a></td>
    <td><a href="home.html">Something A</a></td>
    <td><a href="home.html">Another A</a></td>
    </tr>
    <tr>
    <td><a href="home.html">Service</a></td>
    <td><a href="home.html">Product B</a></td>
    <td><a href="home.html">Something B</a></td>
    <td><a href="home.html">Another B</a></td>
    </tr>
    <tr>
    <td><a href="home.html">Contact</a></td>
    <td><a href="home.html">Product C</a></td>
    <td><a href="home.html">Something C</a></td>
    <td><a href="home.html">Another C</a></td>
    </tr>
    </table>
    
    HTML:
    Just change the links to what you need.
     
    xkatx21x, Feb 11, 2009 IP
  5. dexter.ss

    dexter.ss Peon

    Messages:
    267
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #5
    they used tables, but its not W3C
     
    dexter.ss, Feb 11, 2009 IP
  6. Website Design Perth

    Website Design Perth Peon

    Messages:
    66
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    For the footer, I'd use divs to create four columns and then use unordered lists for links.

    Tables - so yesteryear.
     
    Website Design Perth, Feb 11, 2009 IP
  7. zkwname

    zkwname Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Home | Product A | Something A | Another A
    Service | Product B | Somthing B | Another B
    Contact | Product c | Somthing C | Another B

    .footer{
    width:400px;
    }

    .footer li{
    width:25%;
    float:left;}
    <div class="footer"><ul>
    <li>Home |</li>
    <li>Home |</li>
    <li>Home |</li>
    <li>Home </li>
    </ul> </div>
     
    zkwname, Feb 12, 2009 IP