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. :)
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.
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:
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 :)
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Fotoalbum in a div
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.
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.