Hi there, I'm here to ask for people to analyse my css coding. Below is the link along with the original design work I am trying to achieve: Coding: http://twadz.com/imageuploader Original Design: http://twadz.com/imageuploader/imageuploader2.jpg (sorry no permissions to post live links yet) It's my first css-coded site so I'd appreciate it if you guys could point out any tips to improve the coding. Please note that the middle content part is all over the place in IE, so this will be another thing I am looking to fix here! Also, if you look at the left bar on the layout, I am struggling to make all of the links like the top green-ish colour. I can achieve this, however I can't seem to do it without having to duplicate a part of the html code. I still want to keep my original yellow link style. Another thing, if you see the large Browse bar in the middle, I can't seem to place padding from the text without it also extending the height of the actual bar. So how's this first time coding? Thanks a lot, help is really appreciated! Ed
DO NOT use inline javascript, use an external script and don't rely on JS being there. More semantic names, avoid names like : middle/left/right/top/bottom/red/green/blue/yellow As these are presentational. Go for names such as error/content/sidebar/main content/warning/intro/contact-form Your navigation is not complex, no need for the extra wrapper around it. Looks like you forgot to make each of your nav items list items, that or you avoided making them <li>s because you couldn't figure out how to get them to be horizontal (float the lis/anchors and contain the float with parent ul). Design-wise, when I first took a look at the page I didn't know exactly what it was, because almost all upload sites use natural form input buttons that are familiar to the user because they're styled by the OS, so I didn't even know you could upload anything.. I would stick to regular inputs and not try to go all graphical here. Also, would convert the navigation rollovers to CSS rollovers, change the value of the alt attribute for the logo, if the image doesn't appear for whatever reason the text "logo" will appear, and I will get confused because logo is TOO generic, make it alt="UploadSite" or something and wrap it around in an h1 so users with no CSS on can notice the difference because of the natural styles given by the browser for headers. Try using less divs, they're all over the place (classic case of the divitus). Example at the bottom, you have a div for the bottom logo which you could've just given an ID to the anchor and not a div (remember that anchor is inline by default, make it block to give it dimensions). For the first time, not bad though.
You can also just set display: inline; and white-space: nowrap; to your list items as well. * { /* this is used to set the margins and padding on EVERYTHING to zero so they don't have to be reset to 0 later on; just add margins and padding where needed in your main styles */ margin: 0; padding: 0; } #menu { list-style: none; } #menu li { display: inline; white-space: nowrap; } Code (markup): <ul id="menu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> Code (markup):
Then float the anchors (which I forgot to mention in the previous post), set the height and leading (that's line-height in CSS parlance) to the same value, and then tile your background image. This would be a much better example (sans background images): #menu { background: #CCC; color: inherit; height: 2em; /* IE Haslayout - fix double margin */ line-height: 2em; list-style: none; } #menu li { display: inline; white-space: nowrap; } #menu a { background: #0E0; color: inherit; float: left; height: 2em; margin-right: 1px; padding: 0 0.5em; text-decoration: none; } #menu a:active, #menu a:focus, #menu a:hover { background: #FF8; color: #000; } Code (markup): <ul id="menu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> Code (markup):
Hm. I've always floated my LIs, nice tip on the white space.. I've always known about it but have rarely used it.
Thanks a lot for the advice, I will work my way through it! - even though I hardly understand lol In the meantime, could anyone help me with one of my points in the topic post regarding multiple link styles. Soulscratch, I looked at my code and couldn't find any wrapper around my navigation, where is it? How do I do the image rollovers in CSS? Thanks!
Do you notice the :hover state that's on the link style on the last example I gave? #menu a:hover { } that's where you'd put the styles for your hover state. If you want to see how image based menus work, check out Paul O'Brien's example at www.pmob.co.uk/temp/navimagereplace.htm
Regarding re-naming the divs - I'm not worried about this atm, I'm aiming to fix the site coding, then do those kind of things. Yeh I did notice it, however I'm struggling to get it to work. Wouldn't using that css above make all 4 images have the same rollover? <ul id="menu"> <li><a href="#" a class="home"><img src="../imageuploader/images/home.gif" alt="home" /></a></li> <li><a href="#" a class="about"><img src="../imageuploader/images/about.gif" alt="about" /></a></li> <li><a href="#" a class="advertise"><img src="../imageuploader/images/advertise.gif" alt="advertise" /></a></li> <li><a href="#" a class="contact"><img src="../imageuploader/images/contact.gif" alt="contact" /></a></li> </ul> .home a:hover { background: url(../imageuploader/images/rollovers/home.gif); } Shouldn't that work for my first rollover image?
Not if you give each list item a class or ID (make sure the ID has a unique value for each attribute instance if you use it).
It didn't work anyway. I am now trying to place all menu images on the css: <ul id="nav"> <li><a id="home" href="#" /></li> </ul> a#home { background: url(images/home.gif) repeat: none; height:28px; width:60px; } a#home:hover { background: url(images/rollovers/home.gif) repeat: none; } This worked to start with, but now I can't see the image at all in a browser? - it's invisible :/ - surely I'm missing a simple command? It's pretty difficult being chucked a load of code and the implementing it - I'm new to this. I need my code adjusted and then told what has been changed. SoulScratch: I have removed the div for the bottom logo, however it has resulted in the copyright bar to the right being shifted out of position. Thanks!