我在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设置,该设置最终将修复所有带有侧栏页面的页面。