Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation Ta-ble or not Ta-ble. CSS again.

    http://www.exitfegs.co.uk/nine.html

    This page is a pictorial menu, which is done using tables. Can someone give me a rough idea as to how to translate this into CSS.

    Thanks in advance,

    effpeetee

  • #2
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm no expert, but I think this'll really help you:

    http://alistapart.com/articles/practicalcss

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by stefanoperfili View Post
    I'm no expert, but I think this'll really help you:

    http://alistapart.com/articles/practicalcss
    That looks wonderful. Just what I was looking for.

    Many thanks. Coding Forums strikes again!

    effpeetee

    www.exitfegs.co.uk

    I'll keep everyone posted.

  • #4
    Regular Coder kewlceo's Avatar
    Join Date
    Mar 2006
    Location
    California, US
    Posts
    484
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by effpeetee View Post
    http://www.exitfegs.co.uk/nine.html
    Can someone give me a rough idea as to how to translate this into CSS.
    Try this out mate:

    CSS
    Code:
    .pics { /* also specify font, color, margins, etc */
        float: left;
    }
    .pics img { /* specify width, height, border, etc */
        display: block;
    }
    .clear { /* clear the floats */
        clear: both;
        height: 0;
    }
    (X)HTML
    Code:
    <ul class="pics">
        <li><a href=""><img src="" alt="Family photos" /></a>Photo caption</li>
        <li><a href=""><img src="" alt="Family photos" /></a>Photo caption</li>
    </ul>
    <div class="clear"><!-- --></div>
    UBERHOST.NET
    Shared, reseller, semidedicated hosting and dedicated server plans.
    DirectAdmin • Installatron • Money-Back Guarantee • 24/7 Support
    Providing "Service Above All Else" since 2005.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by kewlceo View Post
    Try this out mate:

    CSS
    Code:
    .pics { /* also specify font, color, margins, etc */
        float: left;
    }
    .pics img { /* specify width, height, border, etc */
        display: block;
    }
    .clear { /* clear the floats */
        clear: both;
        height: 0;
    }
    (X)HTML
    Code:
    <ul class="pics">
        <li><a href=""><img src="" alt="Family photos" /></a>Photo caption</li>
        <li><a href=""><img src="" alt="Family photos" /></a>Photo caption</li>
    </ul>
    <div class="clear"><!-- --></div>
    Hi Kewlceo.

    This is as far as I have got. As you can see I still have a way to go.
    Any further signposts will be appreciated.

    The following page can also be reached via my index page.

    http://www.exitfegs.co.uk/css.html

    www.exitfegs.co.uk

    effpeetee

  • #6
    Regular Coder kewlceo's Avatar
    Join Date
    Mar 2006
    Location
    California, US
    Posts
    484
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by effpeetee View Post
    This is as far as I have got. As you can see I still have a way to go.
    Any further signposts will be appreciated.
    Sorry my friend, like those chefs on TV, I left a few ingredients out.

    I've put it all together in a single file here, but it is preferable to put the CSS in its own file (as your already have on your site).

    Here's what it looks like live on my test site: http://www.uberhost.net/work/

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <title>Effpeetee's Photo Gallery</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="description" content="A page of family photos.">
        <style type="text/css">
        <!--
          body {
            font: 62.5%/1.6 "Lucida Grande", Tahoma, Verdana, sans-serif;
            background: #000;
            color: #FFF;
          }
          #container {
            width: 500px;
            margin: 0 auto;
          }
          .pics {
            list-style-type: none;
          }
          .pics li { /* also specify font, color, margins, etc */
            float: left;
            margin: 0 20px 25px 0;
          }
          .pics img {
            width: 160px; 
            height: 120px; 
            border: thin solid white;
            display: block;
          }
          .clear { /* clear the floats */
              clear: both;
              height: 0;
          }
        -->
        </style>
      </head>
      
      <body>
        <div id="container">
          <ul class="pics">
              <li><a href="#"><img src="http://www.exitfegs.co.uk/101.jpg" alt="Family photos" /></a>Photo caption</li>
              <li><a href="#"><img src="http://www.exitfegs.co.uk/Web2.jpg" alt="Family photos" /></a>'effpeetee' - Himself.</li>
              <li><a href="#"><img src="http://www.exitfegs.co.uk/98.jpg" alt="Family photos" /></a>Photo caption</li>
              <li><a href="#"><img src="http://www.exitfegs.co.uk/102.jpg" alt="Family photos" /></a>Photo caption</li>
            </ul>
            <div class="clear"><!-- --></div>
        </div>
      </body>
    </html>
    UBERHOST.NET
    Shared, reseller, semidedicated hosting and dedicated server plans.
    DirectAdmin • Installatron • Money-Back Guarantee • 24/7 Support
    Providing "Service Above All Else" since 2005.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Fabulous.
    I am most greatful to you. I can now see where I kept going wrong.
    I am slowly getting my site up to date, thanks almost entirely to the kindness and expertise of Coding Forums friends.

    I have used a seperate style sheet as you said.

    Once again,
    Thanks.

    effpeetee

    http://www.exitfegs.co.uk/css.html

  • #8
    Regular Coder kewlceo's Avatar
    Join Date
    Mar 2006
    Location
    California, US
    Posts
    484
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by effpeetee View Post
    That looks excellent, bud. Good work!
    UBERHOST.NET
    Shared, reseller, semidedicated hosting and dedicated server plans.
    DirectAdmin • Installatron • Money-Back Guarantee • 24/7 Support
    Providing "Service Above All Else" since 2005.


  •  

    Posting Permissions

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