1. 홈
  2. 질의 응답
  3. 사용자 정의 WordPress 테마의 CSS 축소 레이아웃과 신비한 여백

사용자 정의 WordPress 테마의 CSS 축소 레이아웃과 신비한 여백

2015-01-18 3 views
0

나는 게시 할 컨텐트를 위해 특별히 설계된 친구를 위해 간단한 WordPress 테마를 만들고 있습니다. 이제 동적 인 PHP 컨텐트에 대한 임시 정적 컨텐트를 전환하는 과정에 있습니다.사용자 정의 WordPress 테마의 CSS 축소 레이아웃과 신비한 여백

저는 CSS에 대한 지식이 제한되어 있고 일반적으로 Google 검색 시간의 절반을 소비합니다. 이제는 해결책을 찾을 수없는 첫 번째 실제 문제가 발생했습니다. 내 테마의 index.php 부분에는 left (기본 내용)과 right (추가 내용)의 두 개의 떠 다니는 div가 들어있는 div가 있고 왼쪽에는 항상 내용이 있습니다 (뉴스 루프를 가져 오는 WP 루프). 오른쪽에있는 것은 때때로 비어있을 수 있습니다 (여기에 강조 표시하려는 게시물의 추천 이미지를 가져 와서 해당 게시물에 링크하는 루프가 있습니다).

이제 오른쪽 div에 게시물이 표시되지 않으면 포함 div가 왼쪽 div를 무시하고 접습니다. 나는 이전에 내가 컨테이너이 CSS함으로써 해결 어쨌든 붕괴 그것의 문제가 있었다 : 여기 

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

가 'main_left'에서 index.php를 (정적 컨텐츠에 대한 내 HTML입니다 WP 루프로 대체됩니다 나중에) : 

<?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(); ?>

'main'-div는 전체 레이아웃에 걸쳐있는 두 개의 추가 div 안에 있습니다. 'dropshadow'및 'wrapper'. 내가 성공하지 못했다 마지막 3 시간 동안이 문제를 해결하기 위해 노력 해왔다

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; 
}

:

이 전체 CSS 스타일 시트입니다. 또한 페이지 하단에는 프로젝트 전체에서 나를 괴롭 히고있는 몇 픽셀의 여백이 있습니다. 사이트에

링크 : http://wordpress.klamas.se/

출처

2015-01-18 ducks

답변

0

붕괴 사업부 문제

당신은 콘텐츠에 대한 검사에 작성하고 붕괴 사업부를 유지하기 위해 공간을 추가 할 수 있습니다.

<?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(); 
?>

아래쪽 여백 문제

하단에 홀수 마진 내용이 고정 된 높이 풋터 너무 큰 존재에 기인한다. 콘텐츠 기반으로 픽셀 값을 높이로 고정하지 않는 것이 좋습니다. Graceful Degradation 기능이있는 CSS3를 사용하여 그래디언트를 적용하고 고정 된 높이를 제거하면 바닥 글이 항상 올바르게 보입니다.

#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); 
}

참조

Colorzilla - CSS Gradient Generator - 좋은 빠른 CSS3 그라데이션 생성기.

출처

2015-01-18 16:18:30 asherstoppard

+0

답변 해 주셔서 감사 드리며 여백 문제에 대한 해결책을 제공해 주셔서 감사합니다. 축소 된 div에 관해서는, PHP 코드를 루프에 통합하여 카테고리 4의 게시물과 최대 3 개의 게시물 만 표시하는 방법을 모르겠습니다. – ducks

+0

전혀 문제 없습니다. 필요한 경우 Wordpress 루프로 PHP 스 니펫을 업데이트했습니다. 당신이 어떻게 그 일을 시작하는지 알려주세요! – asherstoppard

+0

니스! 하지만 이제는 모두 하나의 PHP 태그입니다. 어떻게 the_content를'

Mer info & Bokning
'으로 지정해야합니까? – ducks

관련 문제

 관련 문제