first CSS layout

[katiepie]

Very much a work in progress, currently just the homepage but Im hoping theres some CSS experts around to confirm Im on the right track. Seems to work fine in IE6/Netscape7 but not sure of any others?
Im really loving CSS as opposed to tables!
any feedback would be fab.
www.deepseaphotography.com
thanks.

[rapid]

looks good.

if fact, your menu looks very good. the only thing that would make it look better is not having the bottom box so its a symmetrical triangle. could remove the button to the home page as you dont need it on the home page, and then do the same with the button for each of the other pages. the only problem with this is that the menu buttons are in different places on each page making it a bit more work for visitors to navigate the site, but it might be worth sacrificing usability for design.

did you know you can create the same mouseover effect with css? take a look at meyerweb (http://www.meyerweb.com/eric/css/edge/popups/demo.html).

if you do keep all the buttons you could also have the effect on all the time to indicate which page the visitor is on, or use a different color. should also disable the link to the current page, especially if you dont indicate the current page in some way.

could make the bottom right logo a link to the home page (assuming its going to be on every page) so visitors have a sure-fire way of getting back to the home page.

why is 'unique image collection' in a larger font and colored? can see why the name of the site is done this way but not the other text. kind of makes it look like it should be a link or something, why else would it be drawing the visitors attention to it?

since the main text and title in the bottom right corner are grey, how about making the menu text and border the same color? or, get rid of the border around the main content so that it blends in to the background.

lets us know when the whole site is up and running.

[Jona]

You might try making an elastic layout, instead of a fixed-width one. This way, the layout will scale-to-size for any monitor. Just a thought. Looks very innovative and very clean, though. Good work!

[katiepie]

thanks for the feedback, its really useful.
Im trying to do the mouseover effect with css, I can change the background colour but only that around the text, not the whole box? I know you can do it with cells in a table but not sure about a css box.. hope this is making sense!

[Jona]

Take out the P tags and give the ID's to the A's. Then add this line:


display: block;


That should make everything, including whitespace, part of the link, instead of just the text/image. Increase padding to increase whitespace.

[katiepie]

thanks again, Ive just managed to do the rollover, beats using javascript!
Just one more question.. I tried having a flexible size, but I cant float the boxes against the text as they are positioned as absolute so when you resize the text just continues to flow accross the page which looks really bad. Any suggestions would be appreciated. thanks again for the help.:)

[Jona]

Originally posted by katiepie
thanks again, Ive just managed to do the rollover, beats using javascript!
Just one more question.. I tried having a flexible size, but I cant float the boxes against the text as they are positioned as absolute so when you resize the text just continues to flow accross the page which looks really bad. Any suggestions would be appreciated. thanks again for the help.:)

I'd go for floats instead of absolute positioning when making a layout as a rule, since floated elements are so much easier to deal with. Not at first, I admit, but currently your CSS would have to be entirely re-done to get it to scale-to-font-size. I'd do it for you, but when I tried to save the files to my computer, the backgrounds give me a 404, so I'm kind of working blindfolded.

[katiepie]

Thanks to everyone who gave me feedback, Ive just uploaded an updated version, www.deepseaphotography.com
Ive made some of the changes as suggested, the only thing thats not working is the mouseover bit on active.
Can anyone comment on the navigation, not to jumbled up in the top right?

[rapid]

no, i dont think the menu looks jumbled, i think it looks really good.

have you thought of justifying the text and moving it around a bit so it follows the square steps of the menu?

found a slight problem. when the text size is increased in firefox it continues outside the box it was in. it isnt really a big problem as most people use IE and even more have no idea or need to resize text but as your text is quite small, and if you want the site to be perfect, you might want to think about fixing it.

other than that i think the whole site looks great. well done.

[azzwepe]

Hello,
I know absolutely nothing about CSS, But i'm becoming very interested on what it's all about.

anwyays
Your css script probably isn't loading correctly for everyone except you :-)
watch out for this line:
"<link href="file:///C|/Documents%20and%20Settings/Cat%20Keane/Desktop/explore_the_abyss/text.css" rel="stylesheet" type="text/css">"


Sean

[katiepie]

Yeah, sorry folks, the site that is currently shown at www.deepseaphotography.com is not the original site that was there when I first posted on this thread! (what your looking at is an old, and very rusty site which Im currently upgrading) Please ignore!!
The new site will be uploaded at some point this week and I shall let you know.

[palmertires]

I noticed the layout for your site is table-based...were you previously trying to design with CSS?

I found this site a helpful resource for learning CSS.
http://www.maxdesign.com.au/presentation/

Also, there are many other resources on the web...

I started my site with tables, and then switched to CSS...definitely a better method (still learning, but happier).

Good luck with your site (I like the black background...It works conceptually well with the deep sea photography)!