• # May 5, 2008 at 3:51 am

    Morning all, well its morning for me, I stay in South Africa.

    Well this whole CSS thing is new to me, so forgive me if i come across sounding like and idiot :)

    I have 2 problems, the first, the layout works and looks 100% in IE but when you move over to FF the table that is centered in IE is floating on the left in FF. The second problem is that i cant work out the menu rollover states, you will see my image has 3 images, as Chris’s screencast suggested… maybe i am overseeing something minor…

    Cool and finally if there are any suggestions to making this layout better any any way shape or form, it would be greatly appreciated… even if its letting me know that i am on the right track. :)

    *edit – suppose a link would help hey…

    peace and love

    # May 5, 2008 at 7:33 am

    This reply has been reported for inappropriate content.

    Hello thedudedman,

    At first I advise you not to use tables for the layout, I think you won’t need a table to present those pictures… But leaving that besides if you add a little style to your table, you can set it centered:


    Of course it’s better to give the table a class and put that margin-code in the class, but just for the example I put it right there.

    # May 5, 2008 at 7:39 am

    This reply has been reported for inappropriate content.

    And for the menu: your hover-state works fine here (mac os x – firefox), but you have to add an active state. And since it looks like you are using a html-file for every page you just have to give the menu-item of the page where you are a extra class:

    And in your css you set:

    ul li {
    background-position: center bottom;
    # May 5, 2008 at 8:26 am

    @ Edwin…

    Thanks for the help man… you say you dont recommend tables, for my example what you suggest i use in place of tables to showcase the images?

    Thanks again for the help man…

    @ Chriss from CSS-Tricks, thanks for the awesome site and the quality community you have produced here, one doesn’t feel intimated to showcase there work and ask for assistance. :D

    # May 5, 2008 at 11:07 am

    This reply has been reported for inappropriate content.

    Well, I think – I don’t know if you people think that too – that in this time, tables should be used only to present data. For presenting pictures you could just use a div…

    First I planned to make something simple, but while I was scripting, I thought ‘lets make something more beautiful of it’ Try the code and look how it looks like :)


    Fotoalbum in a div

    body {
    text-align: center;
    div.album {
    width: 300px;
    margin: 0 auto;
    div.picture {
    width: 75px;
    height: 75px;
    float: left;
    margin: 5px;
    border: 1px solid #404040;
    div.picture div {
    width: 65px;
    height: 65px;
    margin: 4px;
    overflow: hidden;
    border: 1px solid #808080;

    Some people may think the div in a div is something called divites or whatever, but I got a good reason for using it. By setting the overflow to hidden, the inner div cuts out a part of the image, so that if the image is bigger then the div, it just don’t show up. This is very handy when you got pictures of different sizes. You can change how many pictures there are on one row, just by editing the width of the album div.

    # May 6, 2008 at 9:17 am

    Work on your design some. The chair is kind of separated from the rest of the page and the overall feel is a little harsher and darker than I would like the website where I am staying at to be.

    # May 7, 2008 at 8:33 am

    Another thing is this: When using navigational tabs, you should put an ID or class on the currently selected tab. When the page loaded, and I saw the tabs, I wondered which page I was currently at. Then I clicked on Bedroom nothing happened to the site, since it was the site I was currently at.

    Check out CSS-tricks’ own navigation tabs (at top) and you’ll see what I mean. You can clearly see that we’re at the FORUMS-page.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.