我在my Blogger上使用了一个模板,由于它太窄,我调整了侧边栏和主要职位栏。它效果很好,但仅适用于主页。

问题在于侧边栏在所有页面上显示的都不一样。

参见one of the pages侧边栏不相同。



我当前的侧边栏CSS代码是:

#sidebar-wrapper {
  border-radius: 5px;
  color: #A8AAAC;
  background:rgba(0,0,0,0.1);
  float:left; margin: -2430px 150px 100px -120px;
  width:40%;
}




边栏还有一个代码示例,但是即使我尝试更改它,也没有任何反应。

#sidebar-wrapper .widget {margin-bottom: 30px;}

#sidebar-wrapper a:hover{color:#fff}

#sidebar-wrapper h2 {
  color: #C8CACC;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 1.4;
  margin: 30px 0 10px;
  font-family: Oswald,Arial,sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

最佳答案

您遇到的问题是因为您要控制边距的内容,而不是控制id=wrapper div及其所有子页面的尺寸。标头的宽度为1000px,但包装器的宽度为740px。首先,使它们两者的宽度相同。

其次,需要去除主包装纸和侧包装纸的边距。

在每个页面上使用边距来不同地调整内容是一个非常糟糕的做法。接下来,调整两个包装器的百分比,总计为100%。我建议您将width:30%用于侧面包装,而将68%用于主包装(为什么要在主包装中留出2%的空间是在两个包装之间留出一点空间。您可以使用边距来提供空间,但要确保将宽度百分比的边距设为负数,以使两个包装纸都位于同一行中。)

通过其他一些调整,您可以构建一个干净的CSS设置,该设置最终将修复所有带有侧栏页面的页面。

08-05 19:53
查看更多