1. дома
  2. Вопрос и ответ
  3. Wordpress Full Width Footer

Wordpress Full Width Footer

2013-08-25 3 views
0

Я хочу сделать свой нижний колонтитул полной шириной, но не заполняется, назначая #footer: 100%;Wordpress Full Width Footer

Ну, когда я делаю .container и .wrapper до 100%, он становится полной шириной, но контент также становится полной. вот изображение! (с .container и .wrapper до 100%)!

Ссылка на изображение: http://i44.tinypic.com/33ysups.jpg

здесь footer.php

<?php wp_footer();?> 

    <div class="footer"> 
    <div class="footer_left"> 
     <h3>text here</h3> 
     <ul> 
      <?php dynamic_sidebar('footer-left');?>    
     </ul> 
    </div> 
    <div class="footer_left"> 
     <h3>Weitere Informationen:</h3> 
     <ul> 
      <?php dynamic_sidebar('footer-mid');?> 
     </ul> 
    </div> 

    <div class="footer_right"> 
     <h3>text here</h3> 
     <ul> 
      <li> 
       <a href="#"><img src="<?php bloginfo('template_url');?>/images/newsletter.png" alt="newsletter" width="16px" height="16px" />Newsletter</a> 
      </li> 
      <li> 
       <a href="http://www.facebook.com/" target="_blank" rel="nofollow"><img src="<?php bloginfo('template_url');?>/images/facebook.png" alt="facebook" width="16px" height="16px" />Facebook</a> 
      </li> 
      <li> 
       <a href="http://www.twitter.com/" target="_blank" rel="nofollow"><img src="<?php bloginfo('template_url');?>/images/twitter.png" alt="twitter" width="16px" height="16px" />Twitter</a> 
      </li> 
      <li> 
       <a href="https://plus.google.com/" target="_blank" rel="nofollow"><img src="<?php bloginfo('template_url');?>/images/googleplus.png" alt="googleplus" width="16px" height="16px" />Google +</a> 
      </li> 
     </ul> 

    </div> 

</div> 

</body> 
</html>

здесь style.css

* {margin:0px; padding:0px;} 
img { border:none; outline: none;} 
ul,li {list-style:none;} 
body {background: url(images/bg.png) repeat;} 
h2 { font-family:Arial; font-size:16px; font-weight: bold; color: #95cd32;} 
h4 { font-family:Arial; font-size:16px; font-weight: normal; color:#b400b4;} 
h3 {font-family:Arial; color:#b400b4; font-size:16px; margin:15px;} 
a { font-family:Arial; text-decoration: none; } 


@font-face { 
    font-family: 'JellykaCuttyCupcakes'; 
    src: url('fonts/Jellyka CuttyCupcakes.ttf'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'HarabaraHand'; 
    src: url('fonts/HarabaraHand.ttf'); 
    font-weight: normal; 
    font-style: normal; 
} 


.container {width:902px; height: auto; margin:0 auto;} 
.wrapper {width:902px; height: auto; margin: 0 auto;} 
.logo {width:902px; height:140px; top: 12px;} 
.logo img {} 
.logo h1 {font-size:42px; margin:0; margin-left:20px; padding:0px 0 0 20px; background: url(images/header_logo.jpg) 0% 50% no-repeat; text-indent:-9999px;} 
.logo a {text-decoration: none; margin:0; padding:0px; display:inline; } 
.logo span {margin-left:20px; font-size:22px; color: #8D8D8D;} 

/***************************************************************************************** 
**************************** menu ******************************/ 

#nav { width:100%; height:54px; background-color: #ffffff; } 
#nav ul{ list-style-type: none; margin-bottom: 5px; padding-top:10px; z-index:500;} 
#nav ul ul {padding:2px;} 
#nav ul ul li a {background:#A1D34C; color:#fff;} 
#nav ul ul li a:hover {background:#AF00BD; color:#fff;} 
#nav ul li{ display: inline; float:left; margin-right:0px; padding:0; position:relative;} 

#nav ul li:hover>a { cursor: pointer; color:#A1D34C; } 
#nav li li>a:hover { background:#B301B7;} 
.menu-main-menu-container ul li+li {border-left:2px solid #b000b1;} 

ul.sub-menu{ width:200px; height:auto; position:absolute; top:35px; display:none; } 

.menu-main-menu-container ul li a {text-decoration:none; font-size:18px; color:#b000b1; text-transform:uppercase; text-align:left; font-weight:bold; padding:5px 32px; display:block;} 

#nav li ul{ position:absolute; width:200px; display:none; top:100%; left:0; } 
#nav li:hover ul{ display:block;} 
#nav li li{ border-left:0;} 

.sub-menu li{ float:left;  width:100%; border-bottom:1px solid #B401B2;} 
.sub-menu li:last-child{border:none!important;} 
ul.sub-menu li a:hover{ background:#95cd32!important; } 


.banner{ width:100%; height:330px; margin:20px 0px 15px; background:#fff; overflow:hidden;} 
.banner img {width:100%; height:330px;} 

#cat { padding:12px 7px 6px; margin-right:10px; font-size:18px; border:none; background:#fff; -webkit-border-radius: 10px; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 10px; -moz-border-radius-bottomleft: 0; border-radius: 10px; border-bottom-left-radius: 0; width:150px; } 

/***************************************************************************** 
**************************************** Search *******************************************/ 
#search {height:40px; background-color: #f9f9f9; padding:15px 10px; } 
#search input[type=text],input[type=submit] { width:445px; margin-right:10px; padding:10px 15px 7px; font-family:Arial; font-size:14px; color:#000; border:none; background:#fff; -webkit-border-radius: 0px; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 0px; -moz-border-radius-bottomleft: 0; border-radius: 0px; border-bottom-left-radius: 0; } 
input[type=submit] {background:#a2d34d; color:#fff; width:auto; margin-top:0px!important; } 


.ssingle {width:610px;margin:0px 5px 20px 0px;height:100%;color:#666;font: 13px Arial;background:#f9f9f9 url(images/title.png) top repeat-x;padding:5px; border:1px solid #dadaaa;} 
.ssingle h2 {margin: 0px 0 0px 0;padding: 10px 0px 10px 10px;text-align: left;font: 24px Arial;font-weight:normal;overflow:hidden; } 
.ssingle h2 a, .ssingle h2 a:link, .ssingle h2 a:visited {color:#B401B2; background-color: transparent;} 
.ssingle h2 a:hover {color: #228fc4;background-color: transparent;} 
#single_post_head .post-thumb img{ max-width:250px;} 
.title{margin: 0 0 0 0px;padding: 0px 0px 0px 0px;} 
h2.pagetitle {padding:0px; margin:0 0 15px; font-size:30px;text-align:center;color:#A3D34C;font-family:Arial; text-shadow:1px 3px 10px #CCCCCC;} 
h2.pagetitle a {color:#507409;} 
.cover { margin:0 0;padding: 0px 10px ;} 
.entry { margin:0 0; padding: 0px 0px ;} 
.entry a:link, .entry a:visited { background-color: transparent;} 
.entry a:hover {color:#fff;background-color: transparent;text-decoration: none;} 
.entry ul, .entry ol{ margin: .4em 0 1em; line-height: 150%;} 
.entry ul li, .entry ol li{ list-style-position:outside; margin-left: 1.6em;} 
.entry p{font-size:16px; margin:0px 0px 5px; padding:5px 0px; line-height:22px;} 
.singleinfo {font:10px Arial; text-transform:uppercase; color:#B98302; padding:5px 0px;} 
.category{ padding:5px 0 5px 5px; } 
.category>a:link,.category>a:visited{ color:#F7DB18; } 
.category>a:hover{ color:#fff; } 

#navigation{ margin:10px 0px 0px 0px; padding:0px 5px 10px 0px; width:700px; } 

    /***********************************content************************************/ 
#content{ width:100%; height:auto; float: left; margin:20px 0 0 0px;} 
#content>h3 {margin-left:25px; font-size:16px; font-family: Arial;} 
.content_left{ width:625px; height:auto; float:left; font-family:Arial; margin-left:10px; margin-top: 0px;} 
#nach_themen {width:600px; height:auto; border:1px solid #ccc; padding:10px 5px; margin-bottom:5px; background:#fff; -webkit-border-radius: 0px; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 0; -moz-border-radius-bottomleft: 0; border-radius: 0; border-bottom-left-radius: 0;} 
#nach_themen .themen {width:184px; height:auto; border:1px solid #ccc; float:left; margin-left:10px;} 
#nach_themen .themen img {width:180px; height:130px; padding:2px;} 
#nach_themen .themen h2 {text-transform:uppercase; color:#a3d34c; text-align:center; margin:20px 0 10px;} 

.blog_post{width:608px; height:auto; float:left; margin-top: 5px;} 
.blog_post img { width:250px; height:auto; float:left; margin: 10px 18px 20px 4px;} 
.blog_post.blog_template img{ margin:margin: 10px 10px 20px 10px;} 
.blog_post.blog_template .post_content{ margin-right:10px; padding-top:5px;} 
.blog_post.blog_template .post_content p{ color:#000;} 
.blog_post h2 {margin:4px 0 8px;} 
.blog_post ul{ list-style-type:none;} 
.blog_post ul li{ width:100%; height:auto; float:left; margin-bottom:30px; border:3px solid #ccc;} 

.post_image{width:250px; height:auto; float:left; margin:0 20px 15px 0px;} 

.post_content {width:300px; height:auto; float: left;} 
.post_content h4 {font-family: Arial; font-size:16px; color:#55247a;} 
.post_content h3 {font-weight:normal; font-family:Arial; font-size:14px; color:#000; margin:8px 0 3px; padding:0;} 
.post_content p {font-size:16px; font-family:Arial; line-height:22px; margin:10px 0;} 
.post_content span:nth-child(4){font-size:14px; font-family:Arial; width:300px; height:auto; float:left; margin:10px 0 4px; } 
.post_content span:nth-child(5){font-size:16px; font-weight:bold; font-family:Arial; color:#a3d34c; width:200px; height:auto; float:left; margin:10px 0; } 
.post_content .read_more{ display:block; color:#fff; font-family:Arial; font-size:16px;} 

.single_post_image{width:250px; font-family:Arial; height:auto; float:left; margin:0 20px 15px 0px;} 
.single_post_content{width:335px; font-family:Arial; height:auto; float:right;} 


.featured_post {overflow:hidden; float:left; font-family:Arial; /*border:1px solid #ccc;*/ margin-bottom:20px;} 
.featured_post h2 {color:#a3d34c; margin:5px 0 15px 0;} 
.featured_post img {margin:10px 15px 15px 5px; border:none; float:left;} 
.featured_post p {height:auto; float:none; font:18px, font-family:Arial; font-weight:normal; text-align:justify; padding:0 8px 5px;} 

.home_post .post_content{ width:auto!important; height:auto; float:none!important; font-family:Arial; padding: 5px 5px 10px 0;} 
.home_post img { width:250px; height:auto; float:left; margin: 4px 30px 0px 0px;} 
.home_post.page_single .featured_image{ padding-left:10px; padding-top:10px; height:200px; margin-bottom:10px;} 
.home_post.page_single .featured_image img{ width:600px; max-width:600px height:auto; float:left; margin:0; } 
.home_post.page_single h2{ color:#B400B4; margin-top:20px; font-family:Arial; margin-left:10px;} 
.read_more{ width:34px; height:20px; font-size:28px; margin:0 10px 10px 0; padding:7px 8px 5px; display:block; text-align:center; float:right; background:#a3d34c; color:#fff; -webkit-border-radius: 0px; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 0px; -moz-border-radius-bottomleft: 0; border-radius: 0px; border-bottom-left-radius: 0; } 


.first_post .post_content{ width:300px; height:auto; float:right; padding: 5px 5px 10px 0;} 
.first_post img{ margin:5px 15px 15px 3px!important;} 
.first_post span{ display:none;} 
.first_post h2, .read_more{ display:none;} 
.first_post .read_more{ display:none !important;} 
.first_post h3{ display:none;} 
.first_post h4{ display:none;} 

.out_post{width:585px; height:auto; float:left; padding:10px 15px; border:1px solid #ccc;} 


#single_post_head{ height:auto; float:left; padding-bottom:15px; font-family:Arial, border:1px solid #ccc; padding:10px;} 
#single_post_head .home_post{ color:#000;} 
.single_post{width:100%; height:auto; float:left; font-family:Arial; padding-bottom:15px; border-top:1px solid #ccc;} 
.single>h2 {margin:10px 0 15px 0;} 
/*.single p{float:left; font:18px, font-family:Arial; text-align:justify; }*/ 
.single>span {float:left; font:18px, font-family:Arial; width:275px; height:auto; } 
#para {font:16px Arial;} 
#cus_single h2 {margin:10px 0 20px;} 
#cus_single span {float:left; font:18px, font-family:Arial; width:120px; height:auto; } 
#cus_single p {float:left; width:150px; height:auto; } 
#cus_single>p:nth-child(2) {float:left; font:18px; font-family:Arial height:auto; min-height:120px; width:220px;} 
#course {padding:13px 0 0 0;} 
#course>h2{float:left; margin:10px 0; width:230px; font-size: 20px;} 
#course>a {float:left; display:block; padding:8px 15px; background:#B2CF39; color:#fff; font-size: 16px; margin-left:70px; -webkit-border-radius: 0px; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 0px; -moz-border-radius-bottomleft: 0; border-radius: 0px; border-bottom-left-radius: 0;} 

#customText {width:885px; height:auto; float:left; margin-bottom:15px;} 
#customText h3 {margin:0 0 5px; font-size:16px; } 
#customText .textwidget {font-family: Arial; font-size:14px; text-align:justify; word-wrap:break-word; line-height: 24px; } 

#custom_social {width:870px; height:auto; margin:20px 0 40px;} 

#telefon { float: right; line-height: 22px; margin-top: 2px; width: 305px; } 

.single_child {width:100%; height:auto; float:left; padding-bottom:15px; border-bottom:1px solid #ccc;} 

.nothing { font-size: 15px; background-color:transparent; border: 0px solid; } 

/************************************************************************************* 
******************************** sidebar **********************************************/ 
.sidebar{ width:250px; height:auto; float: right; margin:0px 0 0 12px; background:#fff;} 
#sidebar_widgets {width:230px; height:auto; float:left; padding:8px 5px; margin-bottom:5px; background:#a3d34c; color:#fff; font-family:Arial; -webkit-border-radius: 10px; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 10px; -moz-border-radius-bottomleft: 0; border-radius: 10px; border-bottom-left-radius: 0;} 
#sidebar_widgets li {float:left; margin:10px 10px 10px 35px; list-style-image: url(images/list-style.png); font-size:14px; font-weight:bold;} 
.sidebar_widgets {width:230px; height:auto; float:left; padding:8px 5px; margin:10px 0px; color:#000; } 
#newsletter { font-size:14px; font-family: Arial; width:213px; padding:10px; height:auto; border:1px solid #ccc;} 
#newsletter img {float:left; height:40px; width:40px;} 
#newsletter h3{text-transform:uppercase; width:140px; color:#55247a; display:block; float:left; padding:0; margin:10px 0 10px 10px;} 
#newsletter h3 span {font-family: Arial; font-size:16px; color:#b400b4;} 
#newsletter a:link, a:visited, a:hover {font-family: Arial; color:#55247a;} 

#facebook { width:213px; padding:10px; height:20px;} 
#facebook h3{text-transform:lowercase; font-size:22px; color:#55247a; display:block; float:left; padding:0; margin:10px 11px;} 
#facebook h3 span {color:#b400b4;} 
#facebook .fb-overlay {position:relative; left:0!important;} 

#google { width:213px; padding:10px 10px 0; height:30px; border:1px solid #ccc;} 
#google h3{font-size:22px; margin:0 0 2px 0; padding:0; color:#B400B4; display:block; float:left; } 
#google span:nth-child(2) {font-size:35px;} 
#google>span:nth-child(4) {font-size:25px; font-family:JellykaCuttyCupcakes,HarabaraHand; margin-right:15px; float:right;} 
#google img {vertical-align:middle; margin-left:10px;} 

.testimonial_slides {height:300px; width:100%;} 

.Home_post{width:608px; float:left;} 
.Home_post ul{ list-style:none;} 
.Home_post ul li{ width:100%; float:left; margin-bottom:30px; border:1px solid #A5A5A5;} 
.Home_post img{ width:250px; height:auto; margin:10px 20px 15px 5px;} 
.Home_post .post_content{ width:325px; height:auto; float:right;} 



/******************************************footer****************************************/ 
.footer{width:960px; height:auto; float:left; font-family:arial; padding:0px 0 30px 0px; background:#6e6e6f;} 
.footer_left {height:auto; width:35%; margin:10px 0 0 15px; padding:0; float:left; } 
.footer_left h3 {color:#fff; margin-bottom:15px; margin-left:0;} 
.footer_left a{ width:100%; height:auto; float:left; font-size:14px; margin-bottom:5px;} 
.footer_left a:link, a:hover, a:visited {color:#fff;} 
.footer_left .menu {list-style:none; margin-left:3px;} 
.footer_left .menu li{font-size:18px; margin:4px 0;} 

.footer_right {height:auto; width:25%; margin:10px 0 0 15px; padding:0; float:left;} 
.footer_right ul { margin-left:17px; padding:0; } 
.footer_right img {vertical-align:middle; margin:0 10px 5px 0; height:23px; width:23px;} 
.footer_right h3 {color:#fff; margin-bottom:15px; margin-left:15px;} 
.footer_right a{ width:100%; height:auto; float:left; font-size:14px;} 
.footer_right a:link, a:hover, a:visited {color:#fff;} 
.Social_Widget {margin-left:17px;} 

.clear {clear:both;} 


/* nsu-form */ 
.nsu-form input[type=text] { width:220px; padding:13px 10px 7px; font-size:18px; color:#fff; border:none; background:#D1D7C8; -webkit-border-radius: 10px; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 10px; -moz-border-radius-bottomleft: 0; border-radius: 10px; border-bottom-left-radius: 0; } 
.nsu-form p:nth-child(2) {margin:5px 0 0 80px;} 
.nsu-form input[type=submit] {background:#b400b4; color:#fff; width:auto; cursor:pointer;} 
.nsu-form label {font-family:arial; font-size:22px; color:#55247A; margin-right:10px;} 
.nsu-error {margin-left:10px; color:red;} 

.sign_up .nsu-signed-up {font-family:tahoma; font-size:20px;} 
.sign_up {width:600px; height:auto; padding:0; margin:0; float:left;} 
.sign_up h3 {font-family:Arial; font-size:22px; padding:0; margin:5px 0 15px;} 
.sign_up img {width:600px; height:200px; margin:5px;} 

}

любые идеи ??? почему только нижний колонтитул не становится полной шириной ???

пожалуйста ...

источник

2013-08-25 DanVan

+0

Возможно, попробуйте опубликовать только важный код, в противном случае он запутывается. Вы пробовали: bottom: 0; Слева направо: 0; право: 0; для обертки? Сделайте снимок, но я не знаком с WordPress. –

+0

он не работает! И весь код, связанный с wordpress .container и .wrapper. любой способ сделать полный с нижним колонтитулом неконтейнер и .wrapper ??? – DanVan

+0

Установили ли вы #html, body {padding: 0; margin: 0;} –

ответ

0

Вы должны переместить колонтитула <div class="footer"> ... </div> из контейнеров, как .container и .wrapper, если у них есть width:902px;

HTML:

 <div class="footer"> 
      <!-- footer content --> 
     </div> <!-- end of footer --> 

    </div> <!-- end of container has width:902px --> 

</body> 
</html>

Изменение:

</div> <!-- end of container has width:902px --> 

    <div class="footer"> 
     <!-- footer content --> 
    </div> <!-- end of footer --> 

</body> 
</html>

CSS:

.footer{ 
    width:100%; 
    /*another styles here*/ 
}

Ваш код не достаточно реализуема. Возможно, нужны некоторые изменения CSS тоже.

источник

2013-08-25 20:56:11 hallaji

+0

Hallalji Откуда я могу переместить нижние колонтитулы? нет кода нижнего колонтитула в любом файле только wordpress foorer code – DanVan

+0

@DanVan Я обновил ответ. – hallaji

+0

НЕ РАБОТАЕТ !!!!! – DanVan

Смежные вопросы

 Смежные вопросы