Hi all, I've just had my site - www.sheffieldvipers.co.uk submitted to the review sections and a few people are suggesting changes. I jsut wanted to see what was the best way about doing them. First off the page is centered in Firebox but not in IE, any help? It was suggested to cut the header image into 3 and use a table to put ti together to save on loading time. I was to work towards Sematic code so I'm not usre if this is a good idea. Should images be in HTML or in the CSS? Lastly - The hover over on the navigation bar does not cover the whole section, how would I get to not leave the little black bar at the bottom? Many Thanks CaffPhil
put in the css #container { width:800; margin: 0 auto; } this will center the whole thing. And you should put the banner pic in the css. I also see that you dont have a doctype. You must ALWAYS have a doctype!
Sorry, HDaddy, but while we want that to work (what you posted above), I think that's what he already has. So, it's centered in every smart browser. However, IE will not center with that without coming out of Quirks mode. <html> <head> ^this is at the top of your document. No doctype. So long as you don't have a proper doctype, the way to center in IE (and the only way to center in IE5.5 or 5) is with text-align: center; on the body and back to left on maybe #container. However, since you say you want semantic, proper code : ) then you want to choose a doctype. Since this looks like regular HTML, I'd give you this one: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> Now you can actually test your code in the W3C validator too! (good for catching unclosed tags etc). Also, the centering you have/or what HDaddy gave you would also work in IE6 and 7. Yeah, the header should be a background image of #header, which won't change loading time at all-- if you've got an image editing programme like Gimp or Photoshop or PainShopPro or one of those, try saving the image as .gif, .png (prolly will be the biggest) and .jpg with the quality a little lower, and see who's biggest, and who has the best resolution/look for the smallest filesize. I doubt it but you might be able to make that header smaller. You have alt text on the image, but what's even better is image-replacement with actual text hiding behind it. Check out the techniques at the bottom here: http://www.mezzoblue.com/tests/revised-image-replacement/ You have I see an h2 somewheres but the logical, semantic thing is to have (either the name of the website OR the name of the page) listed in an <h1>, then sub sections in <h2> and <h3> etc. Don't choose them based on how they look on the page, cause you can always change how they look. Choose them based on what you would use if this was a report. An <h2> should denote a section which falls under the main title <h1> and if another part is equally "high" on the tree and is equal importance, it too can have an <h2> heading it. And <h3> would then be a sub of one of the <h2>s. For your menu... what I normally do is make the a's into blocks (since this is a horizontal menu, you'd need to float: left instead of display: block) and set the height equal to the height of the menu and the line-height equal to that. You've got a height of the menu set in px (30) and then a line-height in em, which I'm not sure if the two are the same amount... move that line-height to the a instead. You can keep that div around the menu, but you don't need it. A ul is a block element too. <ul id="menu"> <li>... etc</li> </ul> Code (markup): #menu { height:30px; width: 800px; background-color:black; border-top:solid 2px;[b] <--needs a colour here[/b] border-bottom:solid 2px;[b] <--ditto[/b] margin:0; padding:0; font-size:small;[b]<--hard to read[/b] line-height:2; [b]<--move this to the a[/b] white-space:nowrap; } #menu li { list-style-type:none;<-- this could be listed on the ul itself display:inline; } #menu li a { text-decoration:none; padding: 7px 33px; <--??? instead, just set the padding for the sides: 0 30px; font-family:arial; color:white; [b]float: left; line-height: 30px; (or the em one but make sure it's the same as the menu height... instead of padding you could also set a width, your choice[/b] } [b]#menu li a:focus, [/b]#menu li a:hover[b], #menu li a:active[/b] { background-color:#f58020; } Code (markup): The last bit-- Might as well get focus working for keyboarders, and since IE6 is dumb and doesn't have focus, it thinks :active means kinda the same thing, so we stick it in there for it (it really means it should do this on actual CLICK but that's IE6 for you). I only modified your code; this is not how I would code it if I were to rewrite it (but everyone has their own style, no biggie).
Edit, I also added in the px in the #menu's width and height. In HTML, setting the width of an image is simply done in numbers because "px" is understood. However in CSS you need to tell it what it is, otherwise the browser has to guess that you meant pixels.
Thanks for the post Stomme poes. That was really helpful. I am going to have a go at re-arranging the code this afternoon. Just out of curiosity, which parts would you ahve coded differently?
some browsers dont go by pix they go buy pts or percentages all of them read percentages toy with this it will work i had the same problem. and if your using dream weaver change your screen resolution to 1024 x 768 this is the most widely used resolution in the world.
^I haven't found a browser yet that did not understand px. He was clearly trying to set his widths in px but he merely had width: 800; And you may NOT do that. He also would not want to set a box in pt and who wants a container 800% wide? pt is for print. It does not display stable across different screen resolutions as the browser must try to guess "How many centimeters/inches should this font display as?" which is better to ask of paper, which has a set height and width.