Wordpress全宽脚注不工作 [英] Wordpress Full Width Footer not working
本文介绍了Wordpress全宽脚注不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想通过分配#footer：100％来使我的页脚全宽，但它不会变满;
当我创建.container和。包装到100％它变成全宽，但内容也变成全宽。这里的形象！ （将.container和.wrapper设置为100％）！
这里是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.pngalt =newsletterwidth =16px height =16px/> Newsletter< / a>
< / li>
< li>
< a href =http://www.facebook.com/target =_ blank =nofollow>< img src =<？php bloginfo（'template_url'）; ？> /images/facebook.pngalt =facebookwidth =16pxheight =16px/> Facebook< / a>
< / li>
< li>
< a href =http://www.twitter.com/target =_ blank =nofollow>< img src =<？php bloginfo（'template_url'）; ？> /images/twitter.pngalt =twitterwidth =16pxheight =16px/> Twitter< / a>
< / li>
< li>
< a href =https://plus.google.com/target =_ blank =nofollow>< img src =<？php bloginfo（'template_url'）; ？> /images/googleplus.pngalt =googlepluswidth =16pxheight =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;颜色：＃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;颜色：＃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;颜色：＃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！重要; }
.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 {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;颜色：＃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 / top.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;} b $ b .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;}
。 {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;颜色：＃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;颜色：＃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;颜色：＃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;颜色：＃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;显示：block; text-align：center; float：right;背景：＃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;显示：block; padding：8px 15px;背景：＃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 {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;颜色：＃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;颜色：＃55247a;显示：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;颜色：＃55247a;显示：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;颜色：＃B400B4;显示：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;宽度：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。 margin-left：3px;}
.footer_left .menu li {font-size：18px; margin：4px 0;}
.footer_right {height：auto;宽度：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;背景：＃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形式的标签{font-family：arial; font-size：22px;颜色：＃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;}
}
为什么只有页脚不会变成全角???
请...
解决方案
首先，你应该在 body 之前放置 wp_footer（）; 从任何共享包装器或容器中删除页脚div，并将其插入独立的包装器或容器中。对此新的包装器添加 width：100％规则。
EDIT p>
你看到你需要什么吗？
EDIT 2
您的DOM树如下所示：
< html lang =de-DExmlns：fb = http://ogp.me/ns/fb#class =listic_slider_fouc>
< head>< / head>
< body class =home page page-id-146 page-template-defaultstyle =>
< div class =inner>
< div class =container>
< div class =wrapper>
< head class =logo> ...< / header>
< div class =clear>< / div>
< nav> ...< / nav>
< div class =banner> ...< / div>
< center> ...< / center>
< div id =search3> ...< / div>
< div id =contentclass =test> ...< / div><！ - content - >
< div class =footer_background>< / div>
< div class =footer> ...< / div>
< / div><！ - wrapper - >
< div class =clear>< / div>
< / div><！ - container - >
< / body>
< / html>
但它应该看起来像：
< html lang =de-DExmlns：fb =http://ogp.me/ns/fb#class =listic_slider_fouc>
< head>< / head>
< body class =home page page-id-146 page-template-defaultstyle =>
< div class =inner>
< div class =container>
< div class =wrapper>
< header class =logo> ...< / header>
< div class =clear>< / div>
< nav> ...< / nav>
< div class =banner> ...< / div>
< center> ...< / center>
< div id =search3> ...< / div>
< div id =contentclass =test> ...< / div><！ - content - >
< / div><！ - wrapper - >
< div class =clear>< / div>
< / div><！ - container - >
<！ - RIGHT PLACE - >
< div class =footer_background>
< div class =footer> ...< / div>
< / div>
<！ - RIGHT PLACE - >
< / body>
< / html>
有一个WordPress 包含标签，名为 get_footer（）; 。此函数必须在每个页面模板中调用（除了header.php和footer.php）。在你的情况下，它应该在 .wrapper 和 .container div之外调用。
请记住移动 wp_footer（）; 从现在位置到< / body> 之前的操作，以避免脚本在错误的地方等等。 p>
CSS规则：
.footer_background {
width： 100％;
background-color：＃6e6e6f;
}
.footer {
width：902px;
height：auto;
font-family：arial;
padding：0px 0 30px 0px;
margin：0 auto;
}
希望它有帮助，让我知道如果你陷入困境！
编辑3
示例：
header.php
< html>
< head>
<！ - 标题TAGS - >
< / head>
<？php wp_head（）; >
< body>
< div class =container>
< div class =wrapper>
index.php
<？php get_header（）; >
< div class =content>
<？php if（have_posts（））：while（have_posts（））：the_post（）; >
< div class =post>
< h2><？php the_title（）; ？>< / h2>
< p><？php the_excerpt（）; ？>< / p>
< / div><！ - .post - >
< / div><！ - .content - >
< / div><！ - .wrapper - >
< / div><！ - .container - >
<？php get_footer（）; >
footer.php
< div class =footer_background>
< div class =footer>
<！ - 您的页脚块 - >
< / div>
< / div>
<？php wp_footer（）; >
< / body>
< / html>
I want to make my footer full width but its not becoming full with by assigning #footer:100%;
Well, When i make the .container and .wrapper to 100% it become full width but content also become full width. here the image! (with .container and .wrapper to 100% )!
here is 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>
here is 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;}
}
any ideas??? why only footer is not becoming full width???
please...
解决方案
First of all you should place wp_footer(); just before body closing tag. Remove your footer div from any shared wrapper or container and insert it in an indipendent one. To this new wrapper add the width:100% rule.
EDIT
Do you see what you need?
EDIT 2
Your DOM tree looks like this:
<html lang="de-DE" xmlns:fb="http://ogp.me/ns/fb#" class="listic_slider_fouc">
<head></head>
<body class="home page page-id-146 page-template-default" style="">
<div class="inner">
<div class="container">
<div class="wrapper">
<header class="logo">...</header>
<div class="clear"></div>
<nav>...</nav>
<div class="banner">...</div>
<center>...</center>
<div id="search3">...</div>
<div id="content" class="test">...</div><!--content-->
<div class="footer_background"></div>
<div class="footer">...</div>
</div><!--wrapper-->
<div class="clear"></div>
</div><!--container-->
</body>
</html>
But it should looks like:
<html lang="de-DE" xmlns:fb="http://ogp.me/ns/fb#" class="listic_slider_fouc">
<head></head>
<body class="home page page-id-146 page-template-default" style="">
<div class="inner">
<div class="container">
<div class="wrapper">
<header class="logo">...</header>
<div class="clear"></div>
<nav>...</nav>
<div class="banner">...</div>
<center>...</center>
<div id="search3">...</div>
<div id="content" class="test">...</div><!--content-->
</div><!--wrapper-->
<div class="clear"></div>
</div><!--container-->
<!-- RIGHT PLACE -->
<div class="footer_background">
<div class="footer">...</div>
</div>
<!-- RIGHT PLACE -->
</body>
</html>
There's a WordPress Include Tags, called get_footer();. This function must be called in every page template ( except header.php and footer.php ). In your case it should be called outside from your .wrapper and .container div.
Remember to move wp_footer(); action from now position to just before </body> closing tag in order to avoid script block in wrong place etc, etc.
The CSS rule:
.footer_background {
width: 100%;
background-color: #6e6e6f;
}
.footer {
width: 902px;
height: auto;
font-family: arial;
padding: 0px 0 30px 0px;
margin: 0 auto;
}
Hope it helps, let me know if you get stuck!
EDIT 3
Example:
header.php
<html>
<head>
<!-- Header TAGS -->
</head>
<?php wp_head(); ?>
<body>
<div class="container">
<div class="wrapper">
index.php
<?php get_header(); ?>
<div class="content">
<?php if( have_posts() ) : while( have_posts() ) : the_post(); ?>
<div class="post">
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
</div><!-- .post -->
</div><!-- .content -->
</div><!-- .wrapper -->
</div><!-- .container -->
<?php get_footer(); ?>
footer.php
<div class="footer_background">
<div class="footer">
<!-- Your footer blocks -->
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>
这篇关于Wordpress全宽脚注不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
