How do I narrow the footer?
-
Hi all,
I am currently running WordPress 3.01 and my website’s theme is FashionPress 1.0.
My website is https://www.cyprus-now.com
Now, I am very new to WordPress and blogging. I am still on a steep learning curve.
I would like some advice, in simple terms on how to narrow my footer at the bottom of the website’s page so that the footer is directly in line with the rest of my websites layout and falls directly within the A4 layout.
I have been spending hours resarching the internet to find out and solve this issue, but to no avail. I am now frustrated and pulling teeth.
Please help…..
-
There are two div tags at the bottom of your site:
<div id=”footer”>
<div id=”footerbox”>One of the two, maybe both, should have a width. My guess is currently thats set to 100%. What you’d need to do is give the div a set width and margin-left:auto; margin-right:auto; in your CSS file.
If you can find those two ids in the style.css file and post them, should be able to help more if you still don’t understand.
Thanks Versipellis!
Do I find these div tags in the Stylesheet (style.CSS) or footer.php file?
I am looking at both right now!
The contents of my footer.php is as follows:
<div class=”clear”></div>
<div id=”footer”>
<div id=”footerbox”>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Footer Widget’) ) : ?>
<div class=”left”>
<h3>
<?php _e(“Footer Widget #1”, ‘themejunkie’); ?>
</h3>
<div class=”box”>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper ultrices tortor quis sodales. Proin scelerisque porttitor tellus, vel dignissim tortor varius quis. Proin diam eros, lobortis sit amet viverra id, eleifend ut tellus. Vivamus sed lacus augue.</div>
</div>
<div class=”left”>
<h3>
<?php _e(“Footer Widget #2”, ‘themejunkie’); ?>
</h3>
<div class=”box”>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper ultrices tortor quis sodales. Proin scelerisque porttitor tellus, vel dignissim tortor varius quis. Proin diam eros, lobortis sit amet viverra id, eleifend ut tellus. Vivamus sed lacus augue.</div>
</div>
<div class=”left”>
<h3>
<?php _e(“Footer Widget #3”, ‘themejunkie’); ?>
</h3>
<div class=”box”>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper ultrices tortor quis sodales. Proin scelerisque porttitor tellus, vel dignissim tortor varius quis. Proin diam eros, lobortis sit amet viverra id, eleifend ut tellus. Vivamus sed lacus augue.</div>
</div>
<?php endif; ?>
<div class=”clear”></div>
</div>
<!–end: footerbox–>
</div>
<!–end: footer–>
<div id=”bottom”>
<div id=”bottombox”>
<div class=”left”>Copyright ? 2009 “>
<?php bloginfo(‘name’); ?>
. All rights reserved.</div>
<div class=”right”>Designed by
<?php _e(“Theme Junkie”, ‘themejunkie’); ?>
. Powered by WordPress.</div>
</div>
<!–end: bottombox–>
</div>
<!–end: bottom–>
</div>
<!–end: wrapper–>
<?php if(get_theme_mod(‘track’) == ‘Yes’) { ?>
<!–begin: blog tracking–>
<?php echo stripslashes(get_theme_mod(‘track_code’)); ?>
<!–end: blog tracking–>
<?php } else { ?>
<?php } ?>
</body></html>The contents of my Stylesheet (style.CSS) is as follows:
/*
Theme Name: FashionPress
Theme URL: https://theme-junkie.com/
Description: A free theme for entertainment related blogs.
Author: Roy Guan
Author URI: https://theme-junkie.com/
Version: 1.0
Tags: Fixed Width, Adsense Ready, Widget Ready, Advanced Theme OptionsChangelog:
v1.0 – 09/02/2008
Initial Release
*//* RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:”;content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}a {text-decoration:none;}.clear{clear:both}
.right {float:right;}
.left {float:left;}/******************
* OVERALL *
******************/
body {
background: #0099cc;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}#wrapper {
width: 980px;
margin: 5px auto;
padding: 0;
}/******************
* HYPERLINKS *
******************/
a, a:visited, a:active {
color: #666;
text-decoration: none;
}a:hover {
background: #fd0859;
color: #fff;
text-decoration: none;
}/******************
* TOP *
******************/
#top {
height: 28px;
margin: 0;
padding: 0;
color: #666;
line-height: 31px;
}#top a, #top a:visited {
color: #fff;
margin: 0 10px 0 10px;
}#top .left a:hover {
background: none;
text-decoration: underline;
}#top .right a:hover {
background: none;
}.register {
margin: 0 10px 0 0 !important;
}.login {
margin: 0 0 0 10px !important;
}.rss {
background: url(images/rss.gif) no-repeat -1px -1px;
padding: 0 0 0 8px;
}.rss a, .twitter a, .facebook a {
}.rss a:hover, .twitter a:hover, .facebook a:hover {
border-bottom: 1px solid #fff;
}.twitter {
background: url(images/twitter.gif) no-repeat -1px -2px;
padding: 0 0 0 8px;
}/******************
* SEARCH FORM *
******************/
#searchform {
margin: 0 0 0 10px;
padding: 0;
line-height: 28px;
}.searchinput {
background: #fff url(images/search.gif) no-repeat 4px 2px;
width: 160px;
font-size: 12px;
color: #666;
margin: 0;
padding: 2px 2px 2px 20px;
border: 1px solid #f0f0f0;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}.searchsubmit {
width: 30px;
background: #bdd6ff;
border: 1px solid #fff;
margin: 0;
padding: 1px 0 0 0;
color: #fff;
font-weight: bold;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}/******************
* HEADER *
******************/
#header {
height: 100px;
margin: 0;
padding: 0;
}.logo {
background: url(images/logo.png) no-repeat;
float: left;
width: 240px;
height: 90px;
margin: 0;
padding: 0;
}.ad728x90 {
float: right;
width: 728px;
height: 90px;
margin: 0;
padding: 0;
}.ad728x90 img {
border: none;
}/******************
* MENU *
******************/
#menu {
background: #fff;
height: 28px;
margin: 3px 0 0 0;
padding: 0;
border: 1px solid #ddd;
}#menu .current a {
background: #fd0859;
color: #fff !important;
}#menu ul {
float: left;
list-style: none;
margin: 0 0 0 1px;
padding: 0;
}#menu li {
float: left;
list-style: none;
margin: 0;
padding: 0;
border-right: 1px solid #ddd;
}#menu ul li {
margin: 0 0 0 -1px;
padding: 0;
list-style: none;
border-right: 1px solid #045;
}#menu li a, #menu li a:link, #menu li a:visited {
margin: 0;
padding: 7px 12px 7px 12px;
color: #333;
display: block;
font-size: 14px;
font-weight: bold;
}#menu li a:hover, #menu li a:active {
background: #fd0859;
margin: 0;
padding: 7px 12px 7px 12px;
color: #fff;
display: block;
text-decoration: none;
border-bottom: none;
}#menu li li a, #menu li li a:link, #menu li li a:visited {
background: #fff;
width: 130px;
float: none;
margin: 0;
padding: 7px 12px 7px 12px;
color: #000;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}#menu li li a:hover, #menu li li a:active {
background: #fd0859;
color: #fff;
padding: 7px 12px 7px 12px;
}#menu li ul {
z-index: 9999;
position: absolute;
height: auto;
width: 155px;
margin: 0;
padding: 0;
left: -999em;
}#menu li li {
border: none;
}#menu li ul a {
width: 120px;
}#menu li ul a:hover, #menu li ul a:active {
}#menu li ul ul {
margin: -29px 0 0 156px;
border: none;
}#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
left: -999em;
}#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {
left: auto;
}#menu li:hover, #menu li.sfhover {
position: static;
}/******************
* HOMEPAGE *
******************/
#col1 {
background: #bdd6ff;
float: left;
width: 630px;
margin: 10px 0 0 0;
padding: 10px;
clear: both;
}#contentbox {
background: #fff;
margin: 0 0 10px 0;
padding: 10px;
border: 1px solid #999;
}/******************
* CONTENT *
******************/
#content {
background: #fff;
float: left;
width: 600px;
margin: 0;
padding: 10px 15px 10px 15px;
color: #555;
}#content h2 {
padding: 0 0 10px 0;
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #999;
}.byline {
padding: 10px 0 15px 0;
}.author {
text-transform: uppercase;
}/******************
* ENTRY *
******************/
.entry {
line-height: 18px;
margin: 0;
padding: 0;
}.entry p {
margin: 0 0 10px 0;
padding: 0;
}.entry img {
margin: 0;
padding: 0;
}.entry ul li {
padding: 0;
margin: 0;
font-weight: bold;
color: #555;
}.entry ul li a {
font-weight: normal;
color: #555;
}.entry ul li ul li {
padding: 0;
margin: 0;
}.entry ol li {
list-style: decimal;
padding: 0;
margin: 0;
background: none;
}.entry h1 {
font-size: 18px;
font-weight: normal;
color: #333;
border-bottom: 3px solid #E1E1E1;
padding-bottom: 3px;
margin: 5px 0 3px 0;
}.entry h2 {
font-size: 16px;
font-weight: normal;
color: #333;
padding-bottom: 3px;
margin: 5px 0 3px 0;
height: auto;
text-indent: 0;
}.entry h3 {
font-size: 13px;
font-weight: bold;
color: #444;
padding-bottom: 3px;
text-indent: 0;
margin: 5px 0 3px 0;
}.entry h4 {
font-size: 13px;
font-weight: bold;
margin: 0;
line-height: 16px;
height: auto;
padding: 5px 0 5px 0;
color: #555;
text-indent: 0;
}.entry h5 {
font-size: 13px;
font-weight: bold;
margin: 0;
line-height: 16px;
height: auto;
padding: 5px 0 5px 0;
color: #555;
text-indent: 0;
}.entry h6 {
font-size: 12px;
font-weight: bold;
margin: 0;
line-height: 16px;
height: auto;
padding: 5px 0 5px 0;
color: #555;
text-indent: 0;
}/******************
* ENTRY META *
******************/
.entryfooter {
margin: 10px 0 0 0;
padding: 5px 0 5px 0;
border-bottom: 1px solid #ccc;
font-size: 11px;
text-align: right;
text-transform: uppercase;
}.link {
background: #fff url(images/plink.gif) no-repeat 0 -1px;
margin: 0 0 0 10px;
padding: 0 0 0 18px;
}.comments {
background: #fff url(images/comment.gif) no-repeat 0 -1px;
margin: 0 0 0 10px;
padding: 0 0 0 18px;
}.meta {
background: #fff url(images/folder.gif) no-repeat 0 5px;
padding: 5px 0 0 17px;
font-size: 11px;
}.meta span {
text-transform: uppercase;
}.meta span a:link, .meta span a:visited {
color: #fd0859;
}.meta span a:hover {
color: #fff;
}.tags {
background: url(images/tag.gif) no-repeat 0 0;
margin: 0 0 0 10px;
padding: 0 0 0 17px;
}/******************
* IMAGES *
******************/
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
padding: 0;
}img.alignnone {
margin: 0 0 10px 0;
padding: 0;
display: inline;
}img.alignright {
margin: 0 0 10px 10px;
padding: 0;
display: inline;
}img.alignleft {
margin: 0 10px 10px 0;
padding: 0px;
display: inline;
}.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}.alignright {
float: right;
margin: 0 0 10px 10px;
}.alignleft {
float: left;
margin: 0 10px 10px 0;
}.wp-caption {
background: #f7f7f7;
text-align: center;
padding: 4px 0 5px 0;
border: 1px solid #e6e6e6;
}.wp-caption img {
margin: 0 0 5px 0;
padding: 0px;
border: 0px;
}.wp-caption p.wp-caption-text {
margin: 0;
padding: 0 0 0 0;
font-size: 11px;
font-weight: normal;
line-height: 12px;
}/******************
* SIDEBAR *
******************/
#sidebar {
background: #bdd6ff;
float: right;
width: 300px;
margin: 10px 0 0 0;
padding: 0 10px 10px 10px;
}#sidebarbox {
background: none;
padding: 0;
}#sidebar .box {
margin: 0;
padding: 10px;
background: #fff;
color: #666;
line-height: 18px;
}#sidebar .box a {
color: #666;
}#sidebar .box a:hover {
color: #fff;
}#sidebar h3 {
margin: 10px 0 0 0;
padding: 10px 10px 0 10px;
background: #fff;
color: #666;
font-size: 15px;
font-weight: bold;
}
.widget {
margin: 0;
padding: 0;
}.leftwidget {
float: left;
width: 143px;
margin: 0;
padding: 0;
}.rightwidget {
float: right;
width: 145px;
margin: 0;
padding: 0;
}.widget ul, .leftwidget ul, .rightwidget ul {
margin: 0;
padding: 0;
}.widget ul li, .leftwidget ul li, .rightwidget ul li{
list-style: none;
margin: 0;
background: #fff url(images/star.gif) no-repeat 0 8px;
padding: 5px 0 5px 15px;
border-bottom: 1px solid #f0f0f0;
}.ad300x250 {
background: #fff;
width: 300px;
height: 250px;
margin: 10px 0 0 0;
}.ad300x250 img {
border: none;
}/******************
* SUBSCRIBE *
******************/
#subscribeform {
margin: 10px 0 0 0;
padding: 0;
line-height: 20px;
}.subscribeinput {
width: 160px;
font-size: 11px;
color: #666;
margin: 0;
padding: 3px 3px 3px 25px;
border: 1px solid #e6e6e6;
background: #fff url(images/mail.gif) no-repeat 4px 2px;
}.subscribeinput:focus {
border: 1px solid #191919;
}.subscribesubmit {
width: 60px;
background: #bdd6ff;
border: 1px solid #bdd6ff;
margin: 0;
padding: 0 0 1px 0;
color: #fff;
font-weight: bold;
}/******************
* FLICKR *
******************/
.flickr a {
background: none;
}.flickr img {
background: #f0f0f0;
margin: 4px;
padding: 4px;
}.flickr img:hover {
background: #fd0859;
}/******************
* COMMENTS *
******************/
.comments-box {
zoom: 1;
margin: 30px 0 0 0;
}.comments-box img {
vertical-align: middle;
}.comments-box h3 {
color: #666;
font-size: 1.4em;
letter-spacing: 0;
}#respond {
background: #fff;
margin: 20px 0 0 0;
padding: 5px;
}#respond p {
color: #777;
line-height: 1.4em;
margin: 10px 0 0 0;
}.cancel-comment-reply {
margin: 5px 0 0 0;
padding: 2px 0 2px 0;
font-size: 11px;
}.cancel-comment-reply a {
background: #f9f9f9;
color: #000;
padding: 1px 3px;
border: 1px solid #f0f0f0;
}.text {
border: 1px solid #ddd;
padding: 2px;
color: #777;
width: 200px;
}/************************
* COOMENT FRAMEWORK *
************************/
ol.commentlist a:link {
text-decoration: none;
}ol.commentlist li div.vcard cite.fn a.url:hover {
text-decoration: none;
}ol.commentlist {
margin: 10px 0 0 0;
padding: 0;
background: #fff;
}ol.commentlist li {
margin: 10px 0 10px 0;
padding: 10px;
list-style-type: none;
border: 1px solid #e9e9e9;
}ol.commentlist li.alt {
}ol.commentlist li.bypostauthor p {
}ol.commentlist li.byuser {
}ol.commentlist li.comment-author-admin {
}ol.commentlist li.comment {
}ol.commentlist li div.comment-author {
}ol.commentlist li div.vcard {
}ol.commentlist li div.vcard cite.fn {
font-style: normal;
font-weight: bold;
padding: 1px 0 0 18px;
background: url(images/user.gif) no-repeat 0 0;
}ol.commentlist li div.vcard cite.fn a.url {
color: #222;
background: none;
}ol.commentlist li div.vcard img.avatar {
float: right;
}ol.commentlist li div.vcard img.avatar-32 {
padding: 2px;
background: #fff;
border: 1px solid #ddd;
}ol.commentlist li div.vcard img.photo {
padding: 2px;
background: #fff;
border: 1px solid #ddd;
}
ol.commentlist li div.vcard span.says {
color: #888;
}ol.commentlist li div.commentmetadata {
}ol.commentlist li div.comment-meta {
margin: 3px 0 0 0;
font-size: 0.9em;
}ol.commentlist li div.comment-meta a {
background: none;
color: #aaa;
text-decoration:none;
}ol.commentlist li p {
margin: 15px 0 0 0;
line-height: 1.4em;
}ol.commentlist li ul {
}ol.commentlist li div.reply {
background: #f9f9f9 url(images/replybg.png) repeat-x;
color: #fff;
width: 33px;
margin: 10px 0 0 0;
padding: 1px 4px 1px 4px;
line-height: 14px;
font-size: 10px;
text-transform: uppercase;
}ol.commentlist li div.reply a {
color: #fff;
}ol.commentlist li div.reply a:hover {
background: none;
}ol.commentlist li ul.children {
}ol.commentlist li ul.children li {
margin: 10px 0 0 0;
background: #fff;
border: 1px solid #e9e9e9;
}ol.commentlist li ul.children li li.alt {
}ol.commentlist li ul.children li.bypostauthor {
}ol.commentlist li ul.children li.byuser {
}ol.commentlist li ul.children li.comment {
}ol.commentlist li ul.children li.comment-author-admin {
}ol.commentlist li ul.children li.depth-2 {
}ol.commentlist li ul.children li.depth-3 {
}ol.commentlist li ul.children li.depth-4 {
}ol.commentlist li ul.children li.depth-5 {
}ol.commentlist li ul.children li.odd {
}ol.commentlist li.even {
}ol.commentlist li.odd {
}ol.commentlist li.parent {
}ol.commentlist li.pingback {
}ol.commentlist li.thread-alt {
}ol.commentlist li.thread-even {
}ol.commentlist li.thread-odd {
}/********************
* COMMENT FORM *
********************/
#commentform {}
#commentform input {
width: 210px;
margin: 0 5px 1px 0;
padding: 5px;
border: 1px solid #ddd;
}#commentform input:focus {
border: 1px solid #191919;
}#commentform .user {
padding: 3px 3px 3px 25px;
background: #fff url(images/user.gif) no-repeat 5px 3px;
color: #666;
}#commentform .email {
padding: 3px 3px 3px 25px;
background: #fff url(images/mail.gif) no-repeat 5px 3px;
color: #666;
}#commentform .url {
padding: 3px 3px 3px 25px;
background: #fff url(images/link.gif) no-repeat 5px 3px;
color: #666;
}#commentform textarea {
width: 75%;
height: 100px;
padding: 2px;
border: 1px solid #ddd;
}#commentform textarea:focus {
border: 1px solid #191919;
}#commentform .submit {
margin: 0;
padding: 4px;
color: #999;
font-weight: bold;
border: 1px solid #ddd;
background: #f8f8f8;
width: 155px;
}#commentform .submit :hover {
background: #333;
border: 1px solid #191919;
text-decoration: underline;
color: #fff;
}/******************
* FOOTER *
******************/
#footer {
background: #bdd6ff;
margin: 15px 0 0 0;
padding: 10px;
color: #666;
line-height: 20px;
list-style: none;
}#footerbox {
background: #fff;
padding: 10px;
}#footerbox ul li {
list-style: none;
margin: 0;
background: #fff;
padding: 3px 0 3px 0;
border-bottom: 1px solid #f0f0f0;
}#footerbox .box {
width: 298px;
margin: 0 15px 0 0;
}
#footerbox h3 {
margin: 0;
padding: 0 10px 0 0;
background: #fff;
color: #666;
font-size: 15px;
font-weight: bold;
}#footerbox ul ul {
display: none;
}
#footerbox img {
padding: 5px;
}/******************
* BOTTOM *
******************/
#bottom {
background: #bdd6ff;
margin: 15px 0 0 0;
padding: 10px;
color: #666;
line-height: 15px;
}#bottom a {
border-bottom: 1px dotted #666;
}#bottom a:hover {
border-bottom: none;
}#bottombox {
background: #fff;
height: 15px;
padding: 10px;
}Sorry for the long quotes guys!
I really don’t know what to do to fix this issue and that is really bothering me.
Your patience and advice would be greatly appreciate.
Just remember to talk in simplistic, step by step terms! I am not experienced in this stuff at all…..
Does anyone have any advice please?
This issue is very frustrating for me! ??
- The topic ‘How do I narrow the footer?’ is closed to new replies.