文章/答案/技术大牛

发布

问Weebly模板边框
EN

Stack Overflow用户

提问于 2014-10-15 15:48:16

回答 1查看 1.5K关注 0票数 0

因此，我使用来自DivTag模板的模板用于Weebly。我去找他们帮忙，他们说他们帮不了我，因为这不是一个问题，只是一个定制的问题。:(我的客户问模板上的侧边栏是否可以从右边移到左边。我说了我相信但我会检查的。我可以为侧栏页面找到的唯一CSS HTML是：

我找不到任何地方说，目前边栏是在右边。weebly的问题是，它们在页面上有它们的拖放区域，我注意到侧栏有一个单独的拖放区域。

该特定页面的HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1024">

<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>

<!-- JS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

</head>

<body class='no-header  wsite-theme-light'>

<div class="note" style="text-align: center;"><p>This gap is here to allow you to see the text tool bar for the header bar below. When site is published, the gap will disappear</p></div>

<div id="wrapper">

    <div id="bar">
        <div class="frame clearfix">
            <div class="bar-text"><p>{call:text}</p></div>
            <div id="search-button"><i class="af-search"></i></div>
            <div class="social-frame">{social}</div>                
            <div class="search-bar">{search}</div>
        </div>
    </div>  

    <header id="header">
        <div class="navContainer clearfix">
            <div class="logo med-padding">{logo}</div>
            <nav><div id="navigation">{menu}</div></nav>  
        </div>
    </header>

    <div id="main" role="main">
        <div class="frame">
            <div class="content table">                     
                <div class="column32 table-content large-padding">{content}    </div>                   
                <div class="column3 table-content large-padding sidebar-content">{side:content}</div>
            </div>
        </div>
    </div>

    <footer>
        <div id="footer" class="large-padding clearfix">
            <div class="frame">
                <div class="note" style="text-align: center;"><p>Drag &amp; drop footer content here</p></div>
                <div id="footer-content" class="med-padding">{bottom:content}    </div>                 
                <div id="footer-content" class="med-padding"     style="display:none;">{footer}</div>
            </div>
        </div>
        <div id="footer-bottom" class="feature small-padding">
            <div class="frame">
                <div class="copyright"><p>{copyright:text}</p></div>
            </div>
        </div>
    </footer>


</div>


<script type="text/javascript" src="/files/theme/basic-header.js"></script>

</body>
</html>

CSS：

/* --------------------------------------------------------------
                         LAYOUT 
--------------------------------------------------------------- */
/* GENERAL */
.text-box-dark{
padding: 30px !important;
background: rgba(0,0,0,0.8) !important;
}

.text-box-light {
padding: 30px !important; 
background: rgba(255,255,255,0.8) !important;
}

.xsmall-padding {
  padding: 10px 0;
}

.small-padding {
  padding: 20px 0;
}

.med-padding {
  padding: 30px 0;
}

.large-padding {
 padding: 45px 0;
}

.xlarge-padding {
 padding: 65px 0;
}

.aligncenter {
  text-align: center;
}

.sidebar-page div#content {
background: none;
width: 100%;
padding: 0;
}

.column2{
width: 50%;
min-width: 500px;
float: left;
}

.column3 {
  width: 200px;
  min-width: 200px;
  min-height: 300px;
  padding: 25px 20px;
  background: url('sidebarbg.jpg');
  border-left: 1px solid #eee;
  vertical-align: top;
}

.column3 .weebly-area {
min-width: 200px;
min-height: 300px;
}

.column32 {
  min-height: 300px;
  min-width: 730px;
  padding-right: 30px;
  vertical-align: top;  
}

div.sidebar-content {
min-height: 200px;
padding: 25px 45px;
}

.table{display: table;}
.table-content{display: table-cell;}
.center-content.table { height: 100%; margin: 0 auto;}
.center-content.table .table-content {vertical-align: middle;}
.overflow-hidden{overflow: hidden;}
.overflow-visible{overflow: visible;}

当你找到解决办法。你能给我解释一下为什么你说的是那种方式吗？我正在努力学习，我能吸收的知识越多越好。

非常感谢。

html

css

sidebar

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-10-21 15:25:23

Yay得到了一些好的建议，我想我可以和其他人分享

在HTML上将第3列移到第32列上

<div id="main" role="main">
    <div class="frame">
        <div class="content table">                     
            <div class="column32 table-content large-padding">{content}         </div>                   
            <div class="column3 table-content large-padding sidebar-content">{side:content}</div>
        </div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26386752

复制

相似问题

问Weebly模板边框
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Weebly模板边框EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Weebly模板边框
EN