Question

我的网页可以在[http://www.sarahjanetrading.com/js/j/index.html] [1]找到。任何人都可以访问所有图像和XHTML + CSS。

我是一名具有HTML和CSS知识的网页设计师。该网页存在一些定位问题。我一直试图解决这些问题，但是徒劳无功。

我真的很感谢你们的帮助。

由于

编辑 *验证我的HTML并修复了一些错误后，该网页出现以下需要修复的问题：*

1）uFlip图像在特色内容和主要内容之间创建空白区域。

Answer 1

您可以尝试从头开始设计它。使用容器作为父div。使用标题div，正文或内容div和页脚。给你的容器宽度但没有高度，而是给它一个溢出：隐藏。通过这样做，你设法保持一切井井有条。

你可以尝试从ipad图像的末尾剪切你的设计标题div（这会将事情搞砸）。浮动ipad图像左，其他正确。

在内容部分，jquery将使事情变得更容易。不要忘记给出一个位置：相对于内容div和位置：绝对到箭头div。

页脚也很简单，左侧浮动导航，右侧是社交按钮。

另外不要忘记正确剪切你的psd。切换你的uFlip为png24并切断所有，不要像你那样使用边框。没有必要这样做。

希望这会有所帮助......

Answer 2

您的网址错误。

当我右键点击损坏的图片链接on your site时，我得到了这个......

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

在浏览器中加载，它给出了这个......

未找到

在此服务器上找不到请求的网址 /js/j/images/uflip.png 。

图像实际上正好在另一个网址上加载......

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

查看两个网址的细微差别？

此处的文件名区分大小写。

uflip.png 与 uFlip.png

关于标签的编辑问题：

您的容器宽780像素。

您的标签构造有左/右填充，总共140像素，以及它们之间的1像素边距。问题是您不知道每个选项卡中文本的实际宽度。即使你这样做，每个浏览器也会略有不同。

我建议您指定精确的宽度（258或259像素？）并删除左/右填充。这就是你如何构建橙色标签。

相应地调整宽度......

#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%);
}

Answer 3

您的图片和字体不起作用，因为网址不正确。当我打开Chrome Developer控制台时，我得到：

获取http://www.sarahjanetrading.com/js/j/images/uflip.png 404（未找到）
  获取http://www.sarahjanetrading.com/js/j/fonts/Helveticaneuelt-roman-webfont.woff 404（未找到）
  获取http://www.sarahjanetrading.com/js/j/fonts/Helveticaneuelt-roman-webfont.ttf 404（未找到）
  获取http://www.sarahjanetrading.com/js/j/fonts/Helveticaneuelt-roman-webfont.svg 404（未找到）

这是一个区分大小写的问题。变化：

fonts/Helveticaneuelt-roman-webfont.woff - ＆gt; fonts/helveticaneuelt-roman-webfont.woff
fonts/Helveticaneuelt-roman-webfont.ttf - ＆gt; fonts/helveticaneuelt-roman-webfont.ttf
fonts/Helveticaneuelt-roman-webfont.svg - ＆gt; fonts/helveticaneuelt-roman-webfont.svg

images/uflip.png - ＆gt; images/uFlip.png

网站定位问题

3 个答案: