Question

所以我正在使用DivTag Templates for 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;}

当你找到解决方案时。你能解释一下为什么它需要像你说的那样。我正在努力学习，而且我可以吸收更多的知识。

非常感谢。

Answer 1

我得到了一些好的建议并且认为我会与其他人分享

将第3列移到HTML 32上的第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>

Weebly模板边栏

1 个答案: