Question

我非常擅长编程并尝试自定义我正在使用的主题。但是，我有几个问题，如果我解决一件事，其他东西打破。我已经研究了大约3天的解决方案，我认为现在是时候与CSS有更多经验的人一起寻求帮助了。

我尝试设置一个JSFiddle，但它无法正常工作，因为我无法直接访问HTML文件。该网站是www.preethijagadeesh.com。是否可以查看html / css文件并提供以下要求的建议？

标题中心（我相信这可以在＆＃39; site_header＆＃39; 粘贴在下面的类）。我使用保证金来改变百分比，它看起来各种浏览器不同。
我还想修复＆＃39;标题，以便我滚动标题时和我一起去。我使用了＆＃39; position：fixed＆＃39;但它导致所有的＆＃39;指数＆＃39;中的内容ID（在下面粘贴）覆盖在title / site_header上。＆＃39;关于＆＃39;中的文字页面似乎在左侧更多右边有很多空白区域。无论我无法得到什么无论我更新哪个班级，内容都要居中。
导航项下显示的line / border_bottom应为与文本长度相同。我尝试更新它，但现在每次我将鼠标悬停在文本/选项移动的项目上
覆盖a 悬停时缩略图上的黑色。我得到了＆＃39;有点＆＃39;工作。只是当我将鼠标悬停在缩略图，图像和图像上时＆＃39;背景颜色＆＃39;闪烁
扩大缩略图之间的差距。现在，有两列，只要放一些就好了他们之间的空间。

如果我能提供任何其他信息，请告诉我。

Answer 1

更改

.header_image { float: left; margin-top: 80px; max-width: 100%; } 到

.header_image {
    text-align: center
    margin-top: 80px;
    max-width: 100%;
}

将这些添加到.site_header：

.site_header{ /* old css remains here... */ position: fixed; top: 0; left: 0; right: 0; }

将填充属性从a移动到父级（.page_link div）。

和5.我无法在你的jsfiddle上显示缩略图，所以我无法给出答案。但对于4我认为这样的事情会有所帮助：在缩略图html中添加<div class="thumbnail-overlay"></div>。对于CSS：

.thumbnail-overlay{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1; 
    /* this z-index should be higher than the thumbnails' child element. If no z-index is set for their child element leave it at 1 */
}

.thumbnail-overlay:hover{
    background-color: rgba(0,0,0,0.5);
}

Answer 2

希望这有帮助。

.header_image是浮动的，因此您无法很好地居中。如果您移除浮动然后使用text-align: center;，则图像应居中。
不确定您希望标题出现在哪里 - 它应该在内容的上方还是在内容的左侧？
您已从链接中删除了padding以调整下划线的大小，但它仅在悬停时更改。这就是导致＆＃34;跳跃的原因。导航链接。如果您将此代码添加到.navigation a（而不是.navigation a:hover），这应该很有效：

.navigation a { 填充：0; margin-right：6px; margin-left：7px; }
请尝试使用.thumb_image:hover，而不是使用.thumbnail:hover .thumb_image，看看它是否有助于闪烁。此外，可以删除background-position: 0 -30px;。
是否使用插件生成和控制缩略图？缩略图图像上使用的绝对定位将使其难以重新定位。

Answer 3

您应该在将网站迁移到主机之前离线创建网站并查看您的工作。

如果您的主机不允许您迁移您的网站和/或拒绝您访问您的HTML文件，则需要找到一个新的网络托管服务商。

用于自定义主题的各种CSS问题

3 个答案: