douyalin2258 2015-01-18 15:16
浏览 77

CSS在自定义WordPress主题中折叠布局和神秘边距

I am making a simple wordpress theme for a friend that will be designed specifically for the content he will be posting. I am now in te process of switching out the temporary static content for dynamic php content.

I have limited knowledge of CSS and usually spend half the time googleing things, and now I have encountered the first real problem that I cant find a solution to myself. In the index.php-part of my theme is a div that contains two floated divs, left (main content) and right (extra stuff), the left one will always have content in it (the WP loop fetching the news posts) while the one on the right may at times be empty (here I have a loop that fetches the featured image of posts that I want to highlight, linking to that post).

Now if no posts are shown in the right div, the containing div ignores the left div and collapses. I previously had the problem of it collapsing anyway, which I solved by giving the container this CSS:

    overflow: auto;
}
    * html #main {
    height: 1%;
}

Here is my html for the index.php (static content in 'main_left' will be replaced with a WP loop later):

<?php get_header(); ?>
<div id="main"><div id="main_left"><h2>Välkommen till Klamas Kultur & Nöje!</h2><p class="small">Klamas Kultur & Nöje producerar fars, komedi och barnteater – både inomhus och utomhus – i hela Västsverige, och har gjort så sedan 1987.</p><hr />
<h1>TURNÉ - Våren 2015</h1><p class="small">Publicerat 2014-12-09 18:42</p>
<p>Efter höstens stora succé, med utsålda hus på <a href="#">Fjärås Bygdegård</a>, ger sig gänget under våren 2015 ut på en liten turné. Första stopp blir Vänersborgs Teater där det blir nypremiär SÖNDAG 18/1 kl. 15.00. Då kommer dessutom ett antal Tvåstadsbekantingar att dyka upp på scen, nämligen Thomas Fridén, Maria Zeffer Johnsson samt Thomas Green.  Fyra veckor varar spelperioden för att sedan avslutas med att original-ensemblen återförenas för en finalhelg med föreställningar på Dergårdsteatern i Lerum LÖRDAG 14/2 kl. 19.00 samt på Kungsbacka Teater SÖNDAG 15/2 kl. 15.00.</p>
<h1>TURNÉ - Våren 2015</h1><p class="small">Publicerat 2014-12-09 18:42</p>
<p>Efter höstens stora succé, med utsålda hus på Fjärås Bygdegård, ger sig gänget under våren 2015 ut på en liten turné. Första stopp blir Vänersborgs Teater där det blir nypremiär SÖNDAG 18/1 kl. 15.00. Då kommer dessutom ett antal Tvåstadsbekantingar att dyka upp på scen, nämligen Thomas Fridén, Maria Zeffer Johnsson samt Thomas Green.  Fyra veckor varar spelperioden för att sedan avslutas med att original-ensemblen återförenas för en finalhelg med föreställningar på Dergårdsteatern i Lerum LÖRDAG 14/2 kl. 19.00 samt på Kungsbacka Teater SÖNDAG 15/2 kl. 15.00.</p>
<h1>TURNÉ - Våren 2015</h1><p class="small">Publicerat 2014-12-09 18:42</p>
<p>Efter höstens stora succé, med utsålda hus på Fjärås Bygdegård, ger sig gänget under våren 2015 ut på en liten turné. Första stopp blir Vänersborgs Teater där det blir nypremiär SÖNDAG 18/1 kl. 15.00. Då kommer dessutom ett antal Tvåstadsbekantingar att dyka upp på scen, nämligen Thomas Fridén, Maria Zeffer Johnsson samt Thomas Green.  Fyra veckor varar spelperioden för att sedan avslutas med att original-ensemblen återförenas för en finalhelg med föreställningar på Dergårdsteatern i Lerum LÖRDAG 14/2 kl. 19.00 samt på Kungsbacka Teater SÖNDAG 15/2 kl. 15.00.</p>
    </div>
    <div id="main_right">
        <div id="main_right_top"><h3>AKTUELLT</h3></div>
    <?php query_posts('cat=4 &posts_per_page=3'); while (have_posts()) : the_post(); ?>
        <div class="main_right_contents"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a><a href="<?php the_permalink(); ?>" class="boka">Mer info & Bokning</a></div>
    </div>
    <?php endwhile; ?>
    </div>
<?php get_footer(); ?>

The 'main'-div is inside two additional divs spanning the entire layout; 'dropshadow' and 'wrapper'.

This is the full CSS stylesheet:

body {
    margin: 0px;
    background-attachment: fixed;
    background-image: url(graphics/burnBG.jpg);
    background-repeat: repeat-y;
    background-position: center top;
}
#dropshadow {
    width: 990px;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    background-image: url(graphics/dropShadow.png);
    background-repeat: repeat-y;
    margin-bottom: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
}
#wrapper {
    width: 950px;
    height: 100%;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
}
#header {
    background-color: #FFFFFF;
    height: 260px;
    width: 950px;
    margin-right: auto;
    margin-left: auto;
}
#banner {
    background-color: #FFFFFF;
    margin: 0px;
    height: 225px;
    width: 100%;
}
#slider_container {
    z-index: 9;
    position: relative;
}
#logo {
    z-index: 10;
    margin-top: -225px;
    position: relative;
}
#menu {
    background-color: #ffff2d;
    height: 35px;
    margin: 0px;
}
#main {
    width: 950px;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFFFFF;
    overflow: auto;
}
    * html #main {
    height: 1%;
}
#main_left {
    width: 572px;
    height: 100%;
    float: left;
    border-right-width: 3px;
    border-right-style: dotted;
    border-right-color: #ffff2d;
    padding-top: 10px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
}
#main_right {
    float: right;
    width: 325px;
    height: 100%;
    padding-right: 0px;
    padding-bottom: 20px;
    padding-left: 0px;
}
#main_right_top {
    width: 250px;
    margin-right: 25px;
    margin-left: 20px;
    padding-right: 15px;
    padding-left: 15px;
    height: 28px;
    background-image: none;
    background-color: #883831;
    line-height: 28px;
}
.main_right_contents {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    width: 280px;
    margin-right: 25px;
    margin-left: 20px;
    background-image: url(graphics/diagonalstripes.png);
    background-repeat: repeat;
    margin-top: 10px;
}
#main_full {
    width: 870px;
    height: 100%;
    padding-top: 10px;
    padding-right: 40px;
    padding-bottom: 25px;
    padding-left: 40px;
}
#main_full a:link{
    font-family: "Trebuchet MS";
    color: #000000;
    text-decoration: underline;
}
#main_full a:hover{
    color: #000000;
    text-decoration: none;
    background-color:#ffff2d;
}
#main_full a:visited{
    font-family: "Trebuchet MS";
    color: #000000;
    text-decoration: underline;
}
#footer {
    width: 950px;
    margin-right: auto;
    margin-left: auto;
    height: 150px;
    margin-bottom: 0px;
    border-top-width: 7px;
    border-top-style: double;
    border-top-color: #ffff2d;
    background-image: url(graphics/footerBG.jpg);
    background-repeat: repeat-x;
}
#footer a:link{
    font-family: Arial, Helvetica, sans-serif;
    color: #cb867c;
    text-decoration: none;
}
#footer a:hover{
    color: #000000;
    background-color:#ffff2d;
}
#footer a:visited{
    font-family: Arial, Helvetica, sans-serif;
    color: #cb867c;
}
#footer_contents {
    margin: 0px;
    height: 130px;
    width: 910px;
    padding-right: 20px;
    padding-left: 10px;
    color: #cb867c;
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    vertical-align: bottom;
}
#footer_contents_left {
    float: left;
    width: 600px;
    padding-top: 110px;
}
#footer_contents_right {
    float: left;
    width: 200px;
    padding-top: 10px;
    padding-left: 110px;
}
#copyright {
    width: 865px;
    margin-bottom: 0px;
    padding-right: 45px;
    padding-left: 20px;
    padding-top: 3px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #cb867c;
    padding-bottom: 0px;
    bottom: 0px;
    height: 25px;
    text-align: right;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #cb867c;
    margin-right: auto;
    margin-left: auto;
}
p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    font-weight: normal;
}
p.small{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    font-weight: normal;
}
h1 {
    font-family: "Trebuchet MS";
    font-size: 18px;
    font-style: normal;
    color: #000000;
    font-weight: bold;
}
h2 {
    font-family: "Trebuchet MS";
    font-size: 20px;
    color: #000000;
    font-style: italic;
}
h3 {
    font-family: "Trebuchet MS";
    font-size: 18px;
    font-style: normal;
    color: #E9CDC9;
    font-weight: bold;
}
h4 {
    font-family: "Trebuchet MS";
    font-size: 14px;
    font-style: normal;
    color: #000000;
    font-weight: bold;
    margin-bottom: 5px;
}
hr {
    color: #ffff2d;
    background-color: #ffff2d;
    height: 2px;
    width: 100%;
    border: 0px;
}
#main_left a:link {
    font-family: "Trebuchet MS";
    color: #000000;
    text-decoration: underline;
}
#main_left a:hover {
    color: #000000;
    text-decoration: none;
    background-color:#ffff2d;
}
#main_left a:visited {
    font-family: "Trebuchet MS";
    color: #000000;
    text-decoration: underline;
}
.nav {
    background-color: #ffffff;
}

  .nav ul {
    overflow: auto;
    width: 950px;
    margin: 0;
    padding: 0;
}
.nav li {
    float: left;
    list-style: none;
    background-color: #ffff2d;
    text-align: center;
    padding: 0;
    margin: 0;
    font-family: "Trebuchet MS";
    font-size: 1.2em;
    line-height: 35px;
    height: 35px;
    width: 16.6667%;
    width: calc(100% / 6);
    font-style: normal;
}
.nav a {
  text-decoration: none;
  color: #000000;
  display: block;
  transition: .3s background-color;
}

.nav a:hover {
  color: #ffffff;
  background-color: #883831;
  font-style: italic;
}

.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
.boka {
    width: 200px;
    height: 30px;
    line-height: 30px;
    background-color: #ffff2d;
    text-decoration: none;
    color: #000000;
    display: block;
    margin-right: auto;
    margin-left: auto;
    transition: .3s background-color;
    cursor:pointer;
    font-family:Trebuchet MS;
    font-size: 1.2em;
    padding:6px 8px;
}
.boka:hover {
  color: #ffffff;
  background-color: #883831;
  font-style: italic;
}
.boka:active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
/* Everything below is for ssslider */
.sss {
    height: 0;
    margin: 0; 
    padding: 0;
    position: relative;
    display: block;
    overflow: hidden;
}

.ssslide {
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    overflow: hidden;
}

.ssslide img {
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    position: relative;
    display: block;
}

.sssnext, .sssprev {
    width: 25px;
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    background: url('images/arr.png') no-repeat;
}

.sssprev {
    left: 3%;
    background-position: 0 50%;
}

.sssnext {
    right: 3%;
    background-position: -26px 50%;
}

.sssprev:hover, .sssnext:hover {
    cursor: pointer;
}

I have been trying to fix this for the last 3 hours with no success. Also, there is a margin of a few pixels at the bottom of the page that have been haunting me throughout the project.

Link to site: http://wordpress.klamas.se/

  • 写回答

1条回答 默认 最新

  • doupang5433 2015-01-18 16:18
    关注

    Collapsing Div Issue

    You could write in a check for the content and add a space to keep the div from collapsing.

    <?php
    $args = array(
        'cat' => 4,
        'posts_per_page' => 3
    );
    $the_query = new WP_Query($args);
    if ( $the_query->have_posts() ) {
        while ( $the_query->have_posts() ) {
            $the_query->the_post(); ?>
            <div class="main_right_contents"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a><a href="<?php the_permalink(); ?>" class="boka">Mer info &amp; Bokning</a></div>
        <?php }
    } else {
        echo '&nbsp;';
    }
    wp_reset_postdata();
?>

    Bottom Margin Issue

    The odd margin at the bottom is due to the content being too large for the fixed height footer. With anything content based I wouldn't recommend fixing the height to a pixel value. By applying the gradient using CSS3 with Graceful Degradation and removing the fixed height we ensure the footer will always look correct.

    #footer {
    width: 950px;
    margin-right: auto;
    margin-left: auto;
    border-top-width: 7px;
    border-top-style: double;
    border-top-color: #ffff2d;
    background: #cd655a;
    background: -moz-linear-gradient(top,  #cd655a 50%, #672324 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#cd655a), color-stop(100%,#672324));
    background: -webkit-linear-gradient(top,  #cd655a 50%,#672324 100%);
    background: -o-linear-gradient(top,  #cd655a 50%,#672324 100%);
    background: -ms-linear-gradient(top,  #cd655a 50%,#672324 100%);
    background: linear-gradient(to bottom,  #cd655a 50%,#672324 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cd655a', endColorstr='#672324',GradientType=0 );
}

    References

    Colorzilla - CSS Gradient Generator - A nice quick CSS3 Gradient Generator.

    评论

报告相同问题？

悬赏问题

  • ¥15 微带串馈天线阵列每个阵元宽度计算
  • ¥15 关于无人驾驶的航向角
  • ¥15 keil的map文件中Image component sizes各项意思
  • ¥30 BC260Y用MQTT向阿里云发布主题消息一直错误
  • ¥20 求个正点原子stm32f407开发版的贪吃蛇游戏
  • ¥15 划分vlan后，链路不通了？
  • ¥20 求各位懂行的人，注册表能不能看到usb使用得具体信息，干了什么，传输了什么数据
  • ¥15 Vue3 大型图片数据拖动排序
  • ¥15 Centos / PETGEM
  • ¥15 划分vlan后不通了