Positioning Issue in Website

My webpage can be found at [http://www.sarahjanetrading.com/js/j/index.html][1]. All the images and XHTML+CSS is accessible by anyone.

I am a web designer with some knowledge of HTML and CSS. The webpage is having some positioning problems. I have been trying for a while now 开发者_运维百科to fix the issues but in vain.

I would really appreciate any help from you guys.

Thanks

EDIT *After validating my HTML and fixing a couple of errors, the webpage has the following issue that need fixes: *

1) The uFlip image creating a blank space between the featured and the main content.

You can try to design it from the beginning. Use container as a parent div. Use a header div, a body or content div and a footer. Give your container a width but no height, instead give it a overflow:hidden. By doing that you managed to keep everything in order.

You can try to cut your designs header div from the end of the ipad image(that will fasten things up). Float ipad image left and others right.

In content section, jquery will make things easier. Don't forget to give a position:relative to content div and position:absolute to arrow divs.

Footer is also simple, float navigation left, and social buttons right.

Also don't forget to cut your psd correctly. Cut you uFlip as a png24 and cut it all, don't use borders as you did. there is no need doing that.

Hope this helps...

Your images and fonts don't work because the URLs are incorrect. When I open the Chrome Developer console, I get:

GET http://www.sarahjanetrading.com/js/j/images/uflip.png 404 (Not Found)
GET http://www.sarahjanetrading.com/js/j/fonts/Helveticaneuelt-roman-webfont.woff 404 (Not Found)
GET http://www.sarahjanetrading.com/js/j/fonts/Helveticaneuelt-roman-webfont.ttf 404 (Not Found)
GET http://www.sarahjanetrading.com/js/j/fonts/Helveticaneuelt-roman-webfont.svg 404 (Not Found)

It's a case sensitivity problem. Change:

fonts/Helveticaneuelt-roman-webfont.woff -> fonts/helveticaneuelt-roman-webfont.woff
fonts/Helveticaneuelt-roman-webfont.ttf -> fonts/helveticaneuelt-roman-webfont.ttf
fonts/Helveticaneuelt-roman-webfont.svg -> fonts/helveticaneuelt-roman-webfont.svg

images/uflip.png -> images/uFlip.png

Your URL has got to be wrong.

When I right-click on the broken image link on your site, I get this...

http://www.sarahjanetrading.com/js/j/images/uflip.png

Loaded in a browser, it gives this...

Not Found

The requested URL /js/j/images/uflip.png was not found on this server.

The image is actually loading fine at this other url...

http://www.sarahjanetrading.com/js/j/images/uFlip.png

See the minor difference in the two URL's?

File-names are case-sensitive here.

uflip.png versus uFlip.png

Edit Regarding your Tabs Issue:

Your container is 780 pixels wide.

Your tabs are constructed with a left/right padding of 140 pixels total as well as a 1 pixel margin between them. The problem is that you do not know the actual width of the text within each tab. Even if you did, it would be slightly different in each browser.

I recommend that you specify an exact width (258 or 259 px ?) and remove the left/right padding. It's how you constructed your orange tabs up top.

Adjust width accordingly...

#main-tabs li a {
float: left;
display: block;
text-align: center;
width: 259px;
color: #555555;
font-size: 18px; 
padding-top: 15px; padding-bottom: 17px;
text-shadow: 2px 0px 0px #ffffff;
filter: dropshadow(color=#ffffff, offx=2, offy=0); 
background: #e0e9ef; 
background: -moz-linear-gradient(top, #e0e9ef 0%,#d0d9df 40%,#b1bbc0 80%,#9ca6ab 100%); 
background: -webkit-linear-gradient(top, #e0e9ef 0%,#d0d9df 40%,#b1bbc0 80%,#9ca6ab 100%); 
background: -o-linear-gradient(top, #e0e9ef 0%,#d0d9df 40%,#b1bbc0 80%,#9ca6ab 100%); 
background: -ms-linear-gradient(top, #e0e9ef 0%,#d0d9df 40%,#b1bbc0 80%,#9ca6ab 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf39', endColorstr='#e0e9ef',GradientType=0 ); 
background: linear-gradient(top, #e0e9ef 0%,#d0d9df 40%,#b1bbc0 80%,#9ca6ab 100%);
}