Question

我是一名自由网页设计师。虽然我对XHTML有很好的理解，但我正在创建的一些网站在垂直位置的移动设备上显示效果不佳。我完成的最后一个网站要求我让网站跨越整个网站。我使用100％宽度实现了这一点，但是当浏览器缩小时，页面顶部的导航栏会移动。

简而言之，我发布这份工作是为了提供XHTML代码，它将为我提供一个可重复使用的容器，可以在PC，手机或平板电脑上大小调整：

请参阅下面的示例网站。这些是我想要实现的尺寸，外观和感觉。

以下是我在上一个项目中使用的一些CSS。

#backgrdwrapper
{
width: 100%;
background-color: #000000;
margin: 0 auto;
}

#wrapper
{
width: 100%px;
margin: 0 auto;
}

#header
{
width: 100%px;
height: 150px;
background-color: #000000;
margin: 0 auto;
}

#spaceheader

{

height:15px;

}


#navigation
{
width: 1000px;
height: 65px;
background-color: #000000;
padding-top:1px;
padding-bottom:1px;
margin: 0 auto;
}

#content
{
width: 980px;

padding: 10px 10px;
background-color: #000000;
margin: 0px auto;
}

请参阅下面的示例网站。这些是我想要实现的尺寸，外观和感觉。

www.wemakewebsites.com

www.seamonster.com

www.double-eye.com

由于

韦恩

Answer 1

我自己也是自由网络开发人员，并花了几个月的时间试图弄清楚如何正确定位我的所有网站，以便它们可以在我的笔记本电脑，iPhone和iPad上工作。经过相当长的一段时间后，我想出了如何做到这一点。

我相信我可能会看到您的问题，因为您的导航宽度使用的是1000px，而您的内容宽度是980px。它永远不应超过960px。因为这基本上是使一切适合的神奇数字。所以你要做的就是将导航宽度和内容宽度改为960px，你应该都很好。

我确实看到你试图补偿内容区域。虽然这确实有效，但它并不完全“正确”。因此，如果您愿意，可以保留您的内容区域，但如果您确实将宽度更改为960，请确保您摆脱了填充。

因此，您希望将#navigation和#content更改为：

#navigations {
 position: relative;
 width: 960px;
 margin: 0px auto 0;
 padding-top: 1px;
 padding-bottom: 1px;
}

#content {
 position: relative;
 width: 960px;
 margin 0px auto 0;
}

那应该适合你。

干杯！

可重复使用的html包装器，适用于所有设备

1 个答案: