DH Templates

Help with CSS/HTML coding!?

Im making a layout for a site, and the whole layout part is going over the websites default template. http://virtualpups.com/viewkennel.php?kennel=70242 Go to that link to see what I mean Where it says fine k-9's and all that is supposed to be under all of the tables, but something in the code is not allowing it to. Help? NEW PORBLEM! I fixes all the other stuff by keeping my layout how it was, but moving it down a bit, and adding <table> at the end, but with no </table> that made the dogs go to the right place. Now my problem is, all the white image links(VHR, VHR olympian, ect.) are supposed to be under the fine k-9's, how would that work?

Public Comments

1. Make sure your Z-index is not set, or set to -99 for example. Zindex makes layers our of your site, allowing problems like you have now if not used properly.
2. The problem is with the big banner thing, the style attributes, position set to absolute and position values force it to overlay the content underneath. Just remove those attributes for the time being to get things working. You may want to consider nesting tables instead of nesting divs. I would recommend creating a css file, call it mainstyle.css or something and then link to it on each page, versus including your styles on each page. That way one change to the style file and the changes effect the entire website. You can include additional style elements on a page if it requires something different. Place <link type="text/css" rel="stylesheet" href="mainstyle.css" /> inside the head tag of each page for example.
3. I would do what the other answerer recommends, pull out all your CSS statements and put them in a separate .css file. It will make your work easier in the long run, and you will have more control over all your HTML. Also, the first thing I noticed was your use of the position:absolute for some of your div's and not for others. This will force parts of it to be in a certain spot and not others. You can keep things pretty close to where they should be by using CSS, well you can actually keep them exactly where you want, but it is easier to keep them close to where you want, and not get too caught up in the exact position. Take a look at this page for examples: http://www.w3schools.com/Css/css_positioning.asp