Jump to content

PHP/CSS Issue - Page footer not extending all the way across the page, etc.

carlmartin10

By carlmartin10
in PHP Coding Help

Recommended Posts

carlmartin10 Newbie

carlmartin10

Posted
Posted

My site:  www.billboardfamily.com

Running Wordpress 3.0

 

Demo site that works properly...the way mine used to, but does not anymore: http://www.wpcorner.com/demo/

 

Ok. My footer is not extending all the way across the page, like it should. In addition to that, there is now a scrollbar at the bottom of the browser, which should not be there. I have been tinkering with this, but can  not get it fixed. I know it is likely some small markup error, but I need help finding and correcting it. Any help is appreciated.  thanks.

 

footer.php

<div class="break"></div>

</div>
<!-- END body -->

</div>
<!-- END wrapper -->
</div>
<!-- BEGIN bottom -->
<div id="footer">

<!-- BEGIN wrapper -->
<div class="wrapper">

<div align="center">
<img src="<?php bloginfo('template_url'); ?>/assets/images/partners.png" alt="PLEASE VISIT OUR PARTNERS"/></div>

<!-- BEGIN top -->
<div id="top">

	<div class="box">
		<div class="name">
			<a href="#"><img align="center" alt="top" src="<?php bloginfo('template_url'); ?>/assets/images/comingsoon.png"/></a>
			<a class="title">Partner #1</a> <br/>
			<a class="title2">Coming Soon</a>
		</div>
		<div class="text2">
			<p>This is where the partner synopsys will be located for this partner when completed.</p>
			<a href="#" class="more">Read More >></a>
		</div>
		<div class="break"></div>
	</div>
	<div class="box">
		<div class="name">
			<a href="#"><img alt="top" src="<?php bloginfo('template_url'); ?>/assets/images/comingsoon.png"/></a>
			<a class="title">Partner #2</a> <br/>
			<a class="title2">Coming Soon</a>
		</div>
		<div class="text2">
			<p>This is where the partner synopsys will be located for this partner when completed.</p>
			<a href="#" class="more">Read More >></a>
		</div>
		<div class="break"></div>
	</div>
	<div class="box">
		<div class="name">
			<a href="#"><img alt="top" src="<?php bloginfo('template_url'); ?>/assets/images/comingsoon.png"/></a>
			<a class="title">Partner #3</a> <br/>
			<a class="title2">Coming Soon</a>
		</div>
		<div class="text2">
			<p>This is where the partner synopsys will be located for this partner when completed.</p>
			<a href="#" class="more">Read More >></a>
		</div>
		<div class="break"></div>
	</div>

</div>
<!-- END top -->

</div>
<!-- END wrapper -->



<!-- BEGIN wrapper -->
<div class="wrapper">	


<p id="info">© 2010 The Billboard Family<br />All Rights Reserved 
<br /><br />

	→ <a href="http://billboardfamily.com/" target="_blank">Submit A Review</a><br />
				 	→ <a href="/terms-and-conditions">Terms & Conditions</a><br />

				 	→ <a href="/partners">Partners</a><br />
				 	→  <a href="/contact">Contact Us</a></p> 


</div>


<!-- END wrapper -->


<!-- END bottom -->


</body>

</html>

 

style.css

* {
margin: 0; padding: 0;
}
body {
text-align: left;
font: 13px Verdana;
color: #566777;
background: #ffffff url(../images/headerbg.gif) repeat-x 0 0;
}
a {
text-decoration: none;	
outline:0;

}
a:hover {
text-decoration: underline;	
outline:0;

}
img {
border: 0;
}

.break {
font-size: 0;
width: 0; height: 0;
clear: both;
}
.alignleft {
float: left;
margin: 4px 10px 5px 0;
}
.alignright {
float: right;
margin: 4px 0 5px 10px;
}
.aligncenter {
text-align: center;
}
.hidden {
display: none;
}

/** BEGIN wrapper  **/
.wrapper {
width: 885px;
margin: auto auto;
text-align: left;
}
/** END wrapper **/

/** BEGIN header **/
#header {
height: 178px;
}
#header .search {
	float: right;
	margin-top: 11px;
}
	#header .search form {
		background: url(../images/search.png) no-repeat 0 0;
		height: 49px;
		width: 284px;
	}
	#header .search form input {
		float: right;	
		background-color: transparent;
		border: 0;
		font-size: 0.8em;
		color: #FFFFFF;
		height: 38px;
		width: 223px;	
		margin-top: 5px;
		text-transform: uppercase;
	}
	#header .search form button {
		float: left;	
		width: 59px;
		height: 49px;
		background-color: transparent;
		border: 0;
		color: transparent;
		text-indent: -9999px;	

}


#header .subscribe {
	position: relative;
	top: 75px;
	left: 635px;		
	float: left;
	text-align: center;
	color: #ffffff;

}

#header .purchase {
	clear: both;
	position: relative;
	bottom: 21px;
	left: 725px;		



}

#header .logo {
	clear: both;
}
	#header .logo h1 {
		padding-bottom: 32px;
	}
	#header .logo h1 a {
		position: relative;
		bottom: 15px;
		background: url(../images/logo.png) no-repeat 0 0;
		display: block;
		text-indent: -9999px;
		height: 62px;
		width: 352px;	
	}


#header ul {
	list-style-type: none;	

}
	#header ul li {
		float: left;	
		margin-right: 15px;
	}
		#header ul li a {
			padding: 5px 8px;	
			color: #FFFFFF;
			text-transform: uppercase;
			text-decoration: none;
			font-size: 0.9em;
			font-weight: bold;
		}
		#header ul li a:hover {
			background-color: #b9c3cf;	
		}
/** END header **/

/** BEGIN featured **/
#featured {
padding: 43px 53px 0 53px;
background: #b7c3cf;
}
#featured .l {
	float: left;
	margin-right: 22px;
	margin-top: 75px;
}
#featured .items {
	width: 650px; height: 240px;
	overflow: hidden;
	margin-right: 10px;
	float: left;
}
#featured .feat {
	width: 650px;
}
	#featured .featuredimg {
		display: block;
		float: left;
		border: 5px solid #ffffff;
		margin-bottom: 45px;
		margin-right: 25px;
		width: 240px; height: 190px;
		overflow: hidden;
	}
	#featured .feat img {
		width: 240px;
	}
	#featured .feat .text {
		float: right;
		width: 375px;	
		padding-top: 5px;
	}
		#featured .feat .text h2 a {
			text-decoration: none;
			color: #566777;	
			font-size: 1.9em;
			font-family: Arial;
			padding-bottom: 10px;
		}
		#featured .feat .text p {
			color: #5f6168;	
			font-size: 0.9em;
		}
#featured .r {
	float: right;	
	margin-top: 75px;
}
/** END featured **/

/** BEGIN top **/
#top {
clear: both;
padding: 20px 0;


}
#top .box {
	width: 240px;
	float: left;
	margin: 0 40px 0 14px;
}
	#top .box .name {
		height: 58px;
		background: url(../images/border.gif) repeat-x 0 bottom;
	}
		#top .box .name img {
			float: left;	
			padding-bottom: 5px;
			padding-right: 9px;
		}
		#top .box .name .title {
			color: #566777;
			text-transform: uppercase;	
			text-decoration: none;
			font-weight: bold;
			font-family: Arial;
			font-size: 1.1em;
		}
		#top .box .name .title2 {
			text-transform: uppercase;	
			text-decoration: none;
			font-family: Arial;
			color: #5f6168;
			font-size: 0.8em;
		}
	#top .box .text2 {
		clear: both;
		margin: 15px 0 40px 6px;	
	}
		#top .box .text2 p {
			color: #76848f;
			font-size: 0.8em;
			margin-bottom: 20px;
		}	
		#top .box .text2 .more {
			font-size: 0.8em;
			color: #38b5c4;	
			text-decoration: underline;
		}
/** END top **/

/** BEGIN body **/
#body {
clear: both;
}
/** END body **/

/** BEGIN content **/
#content {
width: 511px;
float: left;
}
#content .post {
	margin-bottom: 22px;
	margin-top: 37px;
	clear: both;
}
	#content .post h2 {
		font-size: 1.8em;
		text-transform: uppercase;
		font-family: Arial;
		font-weight: bold;
		padding-bottom: 18px;
		background: url(../images/border.gif) repeat-x 0 bottom;
	}
	#content .post h2 a {
		color: #566777;
		text-decoration: none;
	}
	#content .post img {
		float: left;
		padding: 5px;
		background-color: #FFFFFF;
		margin: 17px 11px 19px 4px;	
	}
	#content .post p {
		margin-top: 20px;
		font-size: 0.9em;
		line-height: 1.5em;
		color: #566777;	
	}
	#content .post .date {
		color: #566777;
		height: 20px;
		padding-top: 5px;
		clear: both;
	}
	#content .post .category a {
		background: url(../images/category.gif) no-repeat 0 0;
		color: #566777;
		padding-left: 29px;
		padding-right: 10px;
		text-decoration: underline;
		height: 16px;
	}
	#content .post .comments a {
		background: url(../images/comments.gif) no-repeat 0 0;
		color: #566777;
		padding: 0 10px 5px 23px;
		text-decoration: underline;
		height: 20px;
	}
	#content .entry {
		font-weight: bold;
		color: #00a5b6;
		text-decoration: none;
		text-transform: uppercase;
		background: url(../images/previous.gif) no-repeat 0 6px;
		padding-left: 15px;
	}
	#content .last {
		margin-bottom: 70px;	
	}
#content .postnav {
	text-transform: uppercase;
	font-weight: bold;
	padding: 20px 0;
}
	#content .postnav a {
		text-decoration: none;
	}
/** END content **/

/** BEGIN sidebar **/
#sidebar {
float: right;
width: 326px;
padding-bottom: 40px;
}
#sidebar .box2 h2 {
	text-transform: uppercase;
	color: #566777;
	font-size: 1.1em;
	font-family: Arial;
	padding-bottom: 11px;
	margin-top: 32px;
	background: url(../images/border.gif) repeat-x 0 bottom;
}
#sidebar .sub ul {
	list-style-type: none;	
}
	#sidebar .sub ul li {
		float: left;
		margin-top: 11px;
		margin-bottom: 17px; 
		margin-right: 6px;
		margin-left: 10px;	
	}
#sidebar .ad {
	clear: both;	
}
	#sidebar .ad img {
		float: left;
		margin-right: 10px;
	}
	#sidebar .ad p {
		font-size: 0.8em;
		color: #81848a;	
		margin: 5px 0 20px 0;
	}
	#sidebar .ad .time {
		text-decoration: none;
		font-size: 0.8em;
		color: #00a5b6;	
	}
#sidebar .pop ul {
	list-style-type: none;	
}
	#sidebar .pop ul li {
		float: left;	
		width: 320px;
		margin: 10px 0 10px 10px;
	}
	#sidebar .pop ul li img {
		background-color: #FFFFFF;
		padding: 5px;
		margin-right: 11px;
		float: left;
		width: 50px; height: 50px;
	}
	#sidebar .pop ul li .title {
		color: #5f6168;
		font-weight: bold;
		text-decoration: none;
	}
	#sidebar .pop ul li .artcom {
		color: #3ab7c5;
		text-decoration: none;
		font-size: 0.8em;	
	}
	#sidebar .pop ul li p {
		margin-top: 15px;
		margin-bottom: 5px;	
	}
#sidebar .flick img {
	width: 80px; height: 80px;
	margin: 5px;
}
#sidebar .flick h2 {
	margin-bottom: 7px;
}
#sidebar .video {
	margin: 15px 0;	
}
#sidebar .cat {
	width: 135px;
	float: left;
	margin-right: 20px;	
}
	#sidebar .cat ul {
		list-style-type: none;
		margin-left: 10px;
	}
	#sidebar .cat ul li {
		padding-top: 18px;
	}
	#sidebar .cat ul li a {
		color: #5f6168;		
		font-size: 0.9em;
		text-decoration: none;
	}
	#sidebar .cat ul li a:hover {
		color: #00a5b6;

	}
/** END sidebar **/

/** BEGIN footer **/
#footer {
background: #000000 url(../images/footerbg.gif) repeat-x 0 0;
height: 340px;
clear: both;
padding: 15px 0;
}
#footer #reviews {
	float: left;
	border-right;
	color: #999999;

}

#footer #info {
	padding-left: 10px;
	float: right;
	color: #999999;
	border-left: 1px solid #515151;
}
#info a {
    		text-decoration: none;
   		color: #007fff;
}		
#info a:hover {
   		text-decoration: underline;
    		color: #007fff;
}  





/** END footer **/


/** begin pages submenu **/
#header li ul {
clear: both;
position: absolute;
list-style-type: none;
display: none;
z-index: 200;
height: auto !important;
padding-top: 1px;
padding-left: 0 !important;
margin-left: -1px;
background-image: none !important;
border-width: 0 0 1px !important;
border-color: #ffffff;
border-style: solid;
}
#header li ul li {
	clear: both;
	margin: 0 !important;
	background-image: none !important;
	border-width: 1px 1px 0;
	border-style: solid;
	border-color: #ffffff;
	padding: 0 !important;
}
#header li ul li a {
	padding: 4px 15px !important;
	line-height: 1.5em;
	width: 170px;
	background-color: #015A77;
}
#header li ul li a:hover {
	background-color: #000033 !important;
	background-image: none !important;
}
/** end pages submenu **/

/** BEGIN miscellaneous **/
#content .single {
padding: 20px;
margin-bottom: 50px;
}
#content .single p {
	line-height: 1.5em;
	margin-bottom: 10px;
}
#content .single ul, #content .single ol {
	list-style-position: inside;
	margin-bottom: 10px;
}
#content .single li {
	line-height: 1.5em;
	padding: 2px 0;
}
#content .single blockquote {
	padding: 10px 10px 5px;
	margin-bottom: 10px;
	background-color: #eeeeee;
	border-width: 1px 0;
	border-style: solid;
	border-color: #bbbbbb;
}
#content .single h3, #content .single h4, #content .single h5, #content .single h6 {
	font-size: 1.2em;
	margin-bottom: 5px;
}
#content .single h2 {
	font-size: 2em;
}
#comments {
padding: 20px;
}
#comments a {
	text-decoration: none;
}
#comments h2 {
	font-size: 1.2em;
	margin: 10px 0;
}
#comments p {
	margin-bottom: 10px;
	line-height: 1.6em;
}
#comments form {

}
#comments form p {
	margin-bottom: 5px;
}
	#comments form input {
		margin-right: 5px;
	}
	#comments form input, textarea {
		border: 1px solid #bbbbbb;
		font-size: 0.9em;
		font-family: Verdana;
		padding: 4px;
		background-position: 4px 4px;
		background-repeat: no-repeat;
	}
	#comments form input {
		width: 240px;
		border: 1px solid #bbbbbb;
	}
	#comments form textarea {
		width: 350px;
		padding: 4px 4px !important;
		border: 1px solid #bbbbbb;
	}
	#comments form button {
		border: 1px solid #a0a0a0;
		font-size: 1em;
		font-family: Verdana;
		padding: 2px 6px;
	}
.commentdetails {
	margin-top: 25px;
}
.commentauthor {
	margin-bottom: 5px !important;
	font-weight: bold;
}
.commentdate {
	font-size: 0.8em;
	margin-bottom: 5px;
	color: #909090;
}
.required {
	color: #ff0000;
}
h2.title {
font-size: 1em !important;
text-transform: uppercase;
color: #565656;
padding-top: 30px;
}
.notfound {
padding: 40px;
}
.notfound h2 {
	font-size: 18px;
	font-weight: normal;
	margin-bottom: 10px;
}

/** END miscellaneous **/

/** BEGIN wordpress 2.7 comments **/
#comments ol {
list-style-type: none;
clear: both;
padding: 0;
margin: 0;
}
#comments .buffer {
	padding: 10px;
}
#comments ol li {
	margin-bottom: 10px;
}
#comments ol li ul li {
	border: 1px solid #eeeeee;
	padding: 10px;
}
#comments ol li .avatar {
	float: right;
}
#comments ol li .comment-author {

}
	#comments ol li .comment-author .fn {
		font-weight: bold;
		font-size: 1.2em;
	}
#comments ol li .comment-meta {
	font-size: 0.9em;
	color: #999999;
	margin: 5px 0 10px;
}
#comments ol li .reply {
	font-size: 0.9em;
	font-weight: bold;
	padding-bottom: 10px;
}
#comments .children {
	list-style-type: none;
}
#comments .navigation {
padding: 0 0 40px;
font-size: 0.9em;
}
#comments .navigation a {
	color: #999999;
	padding: 3px 8px;
	border: 1px solid #bbbbbb;
}
#comments .navigation a:hover {
	color: #000000;
	border-color: #000000;
	text-decoration: none;
}
#comments .says {
display: none;
}
/** END wordpress 2.7 comments **/

Pikachu2000 Prolific Member

Pikachu2000

Posted
Posted

I don't think it's probably a PHP issue. I also don't think the problem is with the footer being too narrow, but rather with the header being too wide, which would also explain the sudden appearance of the scrollbar at the bottom . . . That's about all the insight I can offer; CSS isn't really my strong point.

carlmartin10 Newbie

carlmartin10

Posted
  • Author
Posted

even though this is the wrong forum for this. your problem lies with the width of the div named purchase.

find .purchase and add width: 20px; and your problem is solved.

 

Oh, my. I knew it was a simple error on my part. You have no idea how much that simple answer means to me. You have made my day, and I thank you!

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.