Johnny,
I believe there are several issues here that need to be resolved. One of them already mentioned is the validation. This is VERY important.
Aside form that...
Alignment
Your site is not aligning correctly because you have positioned items specifically tailored to your browser window dimensions. This is a bad idea. The goal is to build the page so it looks correct on all browser no matter what the dimensions. Obviously I don't think you did this on purpose. Key concept here is use your "container" and all child elements will move accordingly. Assuming you want this site centered, here is how I would go about it:
HTML Solution
HTML:
<body>
<div class="container">
...All child elements...
</div>
</body>
Code:
div.container {
position:relative;
width:960px /* Fyi, 960 is a more compatible width than 1050 */
margin:0 auto;
}
Website Markup (positioning)
The overall structure of your site has a few issues:
- Use CSS wherever possible. Dont use the "background" attribute in a body tag, set a class and define the background within the style. You can then use CSS background positioning to adjust the background
- Blatant overuse of tags, specifically the DIV tag. This is directly related to my next point.
- Too much positioning! There is a method to the madness and I suggest only using positioning when you absolutely (no pun) need it. For example the "sidebar" use a right float instead? Main goal: keep it simple
- Avoid using large negative text indents. I would find a way to integrate the H1 tag so it is visible on the page; hence why not use it where you have the H2? (H1 doesn't have to be at the top of the page, but it is a very important SEO element)
- Use the Gilder/Levin method for image based buttons
Body and BG Image
Code:
body {
background:#000 url(images/newbg2.jpg) center top no-repeat;
margin:0;
padding:0;
}
Simplified Layout
HTML:
<div class="container">
<ul class="navigation">
<li class="header"><a href="index.html">Cask-Brokers.com<br/>Buying, selling, & exchanging Whiskey casks online</li>
<li><a href="">Home</a></li>
....Remaining Links
</ul>
<img src="images/homepic.jpg" alt="Add Info about the image! (SEO)"/>
<div class="maincontent">
<a href="" class="mail-link"><span></span>Send a message to the industry experts</a>
<a href="" class="dt-link"><span></span>Purveyor of the world's...</a>
<h1>Welcome to Cask-Brokers.com....</h1>
<p>Cask-Brokers.com is an online portal...</p>
<p>The site is most suitable...</p>
</div>
<ul class="footer-menu">...</ul>
<ul class="footer-contact>
<li>4 Upperkirkgate, Huntly</li>
<li>...
</ul>
</div>
Gilder/Levin Image-based Buttons
HTML:
<a href="#" class="test"><span></span>Image Covering A Link</a>
Code:
a.test {
position:relative; /* Needed for the span tag */
display:block;
font:normal 9pt/13pt Arial, san-serif;
color:#fff;
text-decoration:none;
width:100px; /* Width of your image */
height:50px; /* Height of your image*/
}
a.test span {
background:transparent url(images/testImg.png) center no-repeat; /* The image that covers the text*/
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
I am limited in time today, but I can help you with the CSS for the simplified layout. Just ask.
All in all this will make your page(s) cleaner and easier to read, and its more semantically correct.
Good luck!
