页面部分中心需要徽标,不包括方形空间中的左侧栏
need logo in center of page section excluding left sidebar in squarespace
网站:https://wells-demo.squarespace.com/
在所有格式的移动设备、桌面设备的方形空间 WELLS 模板中,页面部分中心需要徽标,不包括左侧边栏 (header) etc.I 我正在尝试弄清楚,但没有 result.following 是我的代码
$(document).ready(function(){
$('#headerWrapper #header ').after('<div id="logo1" data-content-field="site-title"><h1 class="logo image" data-shrink-original-size="23" style="letter-spacing: 0.0869565em;"><a href="/"><img src="//static1.squarespace.com/static/5adfd10929711421a9b29d21/t/5adfdbac562fa79909bad158/1524908392416/?format=750w" alt="L ETO BRIDAL" width="130" height=50"></a></h1></div>');
});
#logo{display:none;}
#headerWrapper{top:4px!important}
#logo1 h1 a img {
height:70px!important;
}
#logo1 {
left: 300%;
position: absolute;
text-align: center !important;
top: 10px !important;
transform: translateX(-50%);
您可以使用 w3schools 中的 w3.css 阅读我在下面制作的结构。我给每个 div 都设置了边框颜色,所以你可以看到那个 div 的边界,这会让你很容易学习。
.outer
{
border:1px solid red;
min-height:100px;
width:100%;
}
.inner-left
{
border:1px solid green;
}
.inner-right
{
border:1px solid blue;
}
.centetr
{
text-align:center;
}
.photo
{
width:95%;
margin:0px auto;
height:40px;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-container outer">
<!--left side-->
<div class="w3-quarter inner-left">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
<div class="w3-rest inner-right">
<div class="w3-container w3-margin-bottom centetr">
NAME
</div>
<div class="w3-container">
<div class="w3-half">
<img src="" class="photo">
</div>
<div class="w3-half">
<img src="" class="photo">
</div>
<div class="w3-half">
<img src="" class="photo">
</div>
<div class="w3-half">
<img src="" class="photo">
</div>
</div>
</div>
</div>
根据您当前的 CSS,应该这样做:
#logo {
width: 100%;
text-align: center;
}
@media (min-width: 801px) {
#logo {
position: fixed;
width: calc(100% - 340px);
top: 0;
margin-left: 240px;
box-sizing: border-box;
background-color: #ffffff85;
padding: .5rem 0;
border-bottom: 1px solid #fff;
}
}
注意:在目前的形式下,您的问题对未来的访问者没有多大用处。
网站:https://wells-demo.squarespace.com/ 在所有格式的移动设备、桌面设备的方形空间 WELLS 模板中,页面部分中心需要徽标,不包括左侧边栏 (header) etc.I 我正在尝试弄清楚,但没有 result.following 是我的代码
$(document).ready(function(){
$('#headerWrapper #header ').after('<div id="logo1" data-content-field="site-title"><h1 class="logo image" data-shrink-original-size="23" style="letter-spacing: 0.0869565em;"><a href="/"><img src="//static1.squarespace.com/static/5adfd10929711421a9b29d21/t/5adfdbac562fa79909bad158/1524908392416/?format=750w" alt="L ETO BRIDAL" width="130" height=50"></a></h1></div>');
});
#logo{display:none;}
#headerWrapper{top:4px!important}
#logo1 h1 a img {
height:70px!important;
}
#logo1 {
left: 300%;
position: absolute;
text-align: center !important;
top: 10px !important;
transform: translateX(-50%);
您可以使用 w3schools 中的 w3.css 阅读我在下面制作的结构。我给每个 div 都设置了边框颜色,所以你可以看到那个 div 的边界,这会让你很容易学习。
.outer
{
border:1px solid red;
min-height:100px;
width:100%;
}
.inner-left
{
border:1px solid green;
}
.inner-right
{
border:1px solid blue;
}
.centetr
{
text-align:center;
}
.photo
{
width:95%;
margin:0px auto;
height:40px;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-container outer">
<!--left side-->
<div class="w3-quarter inner-left">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
<div class="w3-rest inner-right">
<div class="w3-container w3-margin-bottom centetr">
NAME
</div>
<div class="w3-container">
<div class="w3-half">
<img src="" class="photo">
</div>
<div class="w3-half">
<img src="" class="photo">
</div>
<div class="w3-half">
<img src="" class="photo">
</div>
<div class="w3-half">
<img src="" class="photo">
</div>
</div>
</div>
</div>
根据您当前的 CSS,应该这样做:
#logo {
width: 100%;
text-align: center;
}
@media (min-width: 801px) {
#logo {
position: fixed;
width: calc(100% - 340px);
top: 0;
margin-left: 240px;
box-sizing: border-box;
background-color: #ffffff85;
padding: .5rem 0;
border-bottom: 1px solid #fff;
}
}
注意:在目前的形式下,您的问题对未来的访问者没有多大用处。