14 replies [Last post]
yossarian
Offline
Regular
Norfolk, UK
Last seen: 13 years 37 weeks ago
Norfolk, UK
Joined: 2008-01-09
Posts: 12
Points: 0

Dear Forum members,

I have searched everywhere for a solution to my problem but to no avail. I simply wish to center all content in my footer. Now I have tried text-align etc but the text only moves a few pixels and is not centered. See below script and see if you can find a solution please:

#footer {
    background: url(bg_footer.gif) repeat-x #4F4F4F;
    height: 184px;
    width: 760px;
    margin-right: auto;
    margin-left: auto
        ;}
    
#footer ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;}
    
#footer li {
    display: inline;
    float: left;
    padding-right: 10px;}

Any help would be gratefully received!

Y

eddy
eddy's picture
Offline
Enthusiast
Last seen: 10 years 35 weeks ago
Timezone: GMT+2
Joined: 2006-01-27
Posts: 59
Points: 0

How about this:

How about this:

#footer { display:block; background: url(bg_footer.gif) repeat-x #4F4F4F; height: 184px; width: 760px; margin:0 auto; text-align:center; } #footer ul { list-style-type: none; } #footer li { display: inline; }

Anyone who hates kids can't be all bad.
W.C. Fields

yossarian
Offline
Regular
Norfolk, UK
Last seen: 13 years 37 weeks ago
Norfolk, UK
Joined: 2008-01-09
Posts: 12
Points: 0

Thank you eddy. It does

Thank you eddy.

It does move the text a little bit, but it does not place the text in the middle of the footer.... Really have no idea why that is...

Any other suggestions?

Cheers for helping out!

eddy
eddy's picture
Offline
Enthusiast
Last seen: 10 years 35 weeks ago
Timezone: GMT+2
Joined: 2006-01-27
Posts: 59
Points: 0

Then maybe you posted not

Then maybe you posted not all the css code.
Because when I used your CSS, with my alterations, it IS centered, in IE and in FF.
This is what I used, so you can see for yourself:

Test

#footer {
display:block;
background: url(bg_footer.gif) repeat-x #4F4F4F;
height: 184px;
width: 760px;
margin:0 auto;
text-align:center;
}

#footer ul {
list-style-type: none;
}

#footer li {
display: inline;
}

Anyone who hates kids can't be all bad.
W.C. Fields

yossarian
Offline
Regular
Norfolk, UK
Last seen: 13 years 37 weeks ago
Norfolk, UK
Joined: 2008-01-09
Posts: 12
Points: 0

Thanks for persisting eddy.

Thanks for persisting eddy. I have a separate css file with this code in it (appologies for not posting the full code - do you need html as well?)

/*************** General layout *******************/

body {
	background: #CCCCCC url(bg_site.gif) repeat fixed;
	margin: 0px;
	padding: 0px;
	font-family: "Trebuchet MS",Arial, Helvetica, sans-serif;
	font-size: 65%;
	color: #333333;}
	
a:link {color: #666666;}
a:visited {color: #999999;}
a:hover {color: #999999;}
a:active {	color: #999999;}
	
#maincontainer {
	background-color: #FFFFFF;
	height: auto;
	width: 742px;
	margin-right: auto;
	margin-left: auto;
	border-right: 9px solid #EEF0F1;
	border-left: 9px solid #EEF0F1;
	padding-right: 1px;
	padding-left: 1px;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;}

#header {
	background: #0033FF;
	height: 120px;
	width: 100%;
	border-bottom: 1px solid #FFFFFF;
	float: left;
	}

#header h1 {
	margin: 0px;
	padding: 0px;
	background: url(logo1.gif) no-repeat;
	height: 67px;
	width: 222px;
	text-indent: -5000pt;}

#pagemessage {
	background: #353535 url(bg_pagemessage.gif) repeat-x bottom;
	float: left;
	height: 140px;
	width: 100%;
	border-bottom: 1px solid #FFFFFF;}

#pagemessage h1 {
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.8em;
	padding: 8% 0px 0px 3%;
	color: #FFFFFF;
	margin: 0px;
	float: left;}
	
#pagemessage img {
	float: right;
	display: block;
	margin-top: 6%;
	margin-right: 2%;}

#leftcol {
	float: left;
	height: auto;
	width: 410px;
	vertical-align: top;
	background-color: #FFFFFF;}
	
#rightcol {
	height: auto;
	width: 331px;
	border-left: 1px dashed #CCCCCC;
	float: left;
	background-color: #FCFBFB;}
	
#mainimage {
	background-color: #CCCCCC;
	width: 331px;
	float: left;
	height: 207px;}
	
#portfoliopane {
	background-color: #FFFFFF;
	width: 331px;
	float: left;
	height: 435px;}
	
#sitecontent {
	background-color: #FFFFFF;
	padding: 10px;
	height: auto;
	width: 390px;
	float: left;
	font-size: 1.1em;
	color: #666666;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.5em;}
	
#sitecontent a:link {color: #0033FF;text-decoration: none;border-bottom: 1px dashed #669900;	padding: 0.2em;}
#sitecontent a:visited{color: #669900;text-decoration: none;border-bottom: 1px dashed #669900;	padding: 0.2em;}
#sitecontent a:hover {	color: #ffffff;	text-decoration: none;	border-bottom: 1px dashed #669900;	background-color: #0033FF;	padding: 0.2em;}
#sitecontent a:active {color: #669900;text-decoration: none;border-bottom: 1px dashed #669900;	padding: 0.2em;}

#sitecontent h1,h2,h3,h4,h5{
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.6em;
	color: #99CC00;
	margin: 0px;
	padding: 0px;}
	
	#sitecontent h6 {
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	color: #666666;
	margin: 0px;
	padding: 2px;
	width: auto;}
	
#footer {
display:block;
background: url(bg_footer.gif) repeat-x #4F4F4F;
height: 184px;
width: 760px;
margin:0 auto;
text-align:center;
}
   
#footer ul {
    list-style-type: none;
}
   
#footer li {
    display: inline;
}
	
#footer a:link, a:visited,a:hover,a:active {color: #999999;}
	

eddy
eddy's picture
Offline
Enthusiast
Last seen: 10 years 35 weeks ago
Timezone: GMT+2
Joined: 2006-01-27
Posts: 59
Points: 0

yes please. Also the html....

yes please. Also the html....

Anyone who hates kids can't be all bad.
W.C. Fields

yossarian
Offline
Regular
Norfolk, UK
Last seen: 13 years 37 weeks ago
Norfolk, UK
Joined: 2008-01-09
Posts: 12
Points: 0

Here goes, sorry a bit messy

Here goes, sorry a bit messy currently:

///HTML code



FTEST







    
	
	/**/
	
    
    

    
    
	

<div id="maincontainer">
<div id="header">
<p align="left"><span class="style1">  ::  
      
      document.write(TODAY);	
      
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','742','height','98','src','flash/logo1','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','flash/logo1' ); //end AC code

        
        
        
      
</span></p>
  </div>

<div id="TopMenu"> 
<div id="nav">

<ul class="level1">         
<li class="submenu"><a href="//" rel="nofollow">TEST</a></li>
<li class="submenu"><a href="//" rel="nofollow">TEST </a> 
<li class="submenu"><a href="//" rel="nofollow">TEST</a> 
  <ul class="level2">
<li><a href="//" rel="nofollow">TEST</a></li>
<li class="submenu"><a href="//" rel="nofollow">TEST</a> 
<ul class="level3">
<li><a>TEST</a></li>
<li><a href="//" rel="nofollow">TEST</a></li>

 </ul>
</li>
</ul>
</li>
<li class="submenu"><a href="//" rel="nofollow">TEST</a>
<li class="submenu"><a href="//" rel="nofollow">TEST </a> 
<li class="submenu"><a href="//" rel="nofollow">TEST</a>
  <ul class="level2">

<li><a href="//" rel="nofollow">TEST</a></li>
<li><a href="//" rel="nofollow">TEST</a></li>
</ul>
</li>
<li class="submenu"><a href="//" rel="nofollow">TEST</a> 
<ul class="level2">
<li><a href="//" rel="nofollow">TEST</a></li>
<li><a href="//" rel="nofollow">SUBSCRIBE TO OUR MAILING LIST</a></li>
</ul>
</li>
</ul>
</div>

</div>

<div id="leftcol">

<div id="pagetools">

<p>
<h2 class="style4">WELCOME!</h2>
<div id="favourites">
  <div align="left"></div>
</div>

</div>

<div id="sitecontent"> 

<p> 
test here</p>
</div>


</div>

<div id="rightcol">

<div id="mainimage"><img src="img/myImage.png" alt="test test test" width="330" height="207" /></div>

<div id="newsarea">
  <h2>TEST TEST TEST.  Please click to view  larger images.</h2>
  
<a href="img/tst.jpg" rel="lightbox" title="test" rel="nofollow"><img src="img/test.jpg" alt="test 1" /></a> 
<a href="img/tst.jpg" rel="lightbox" title="test" rel="nofollow"><img src="img/test.jpg" alt="test 1" /></a> 
<a href="img/tst.jpg" rel="lightbox" title="test" rel="nofollow"><img src="img/test.jpg" alt="test 1" /></a> 
<a href="img/tst.jpg" rel="lightbox" title="test" rel="nofollow"><img src="img/test.jpg" alt="test 1" /></a> 
<div class="newsdesc style1">
  <div class="newsdesc">
      </div>
  </div>
      
<h2>T</h2>est
<div class="newsdesc">
  <p><img src="img/test.gif" width="90" height="90" align="left" /><img src="img/new.png" width="48" height="48" hspace="5" align="left" />TEST TEST TEST </p>
  
</div>     
     

    </div>

</div>

<div id="clear"><p> </p></div>


</div>

<div id="footer">
<div class="footerinfo">

<p>Copyright 2008. All Rights Reserved<br />

<ul>
<li><a href="default.asp" accesskey="1" rel="nofollow">HOME</a></li>

<li><a href="//" rel="nofollow">Home</a> </li>
<li><a href="//" accesskey="2" rel="nofollow">TEST</a></li>
<li><a href="//" accesskey="3" rel="nofollow">FREE</a></li>
<li><a href="//" rel="nofollow">LINKS</a></li>
<li><a href="//" accesskey="5" rel="nofollow">FAQs</a></li>
<li><a href=";" accesskey="4" rel="nofollow">CONTACT US</a></li>
</ul>
</div>



</div>








Untitled Document





And this is the CSS file:

/*************** General layout *******************/

body {
	background: #CCCCCC url(bg_site.gif) repeat fixed;
	margin: 0px;
	padding: 0px;
	font-family: "Trebuchet MS",Arial, Helvetica, sans-serif;
	font-size: 65%;
	color: #333333;}
	
a:link {color: #666666;}
a:visited {color: #999999;}
a:hover {color: #999999;}
a:active {	color: #999999;}
	
#maincontainer {
	background-color: #FFFFFF;
	height: auto;
	width: 742px;
	margin-right: auto;
	margin-left: auto;
	border-right: 9px solid #EEF0F1;
	border-left: 9px solid #EEF0F1;
	padding-right: 1px;
	padding-left: 1px;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;}

#header {
	background: #0033FF;
	height: 120px;
	width: 100%;
	border-bottom: 1px solid #FFFFFF;
	float: left;
	}

#header h1 {
	margin: 0px;
	padding: 0px;
	background: url(logo1.gif) no-repeat;
	height: 67px;
	width: 222px;
	text-indent: -5000pt;}

#pagemessage {
	background: #353535 url(bg_pagemessage.gif) repeat-x bottom;
	float: left;
	height: 140px;
	width: 100%;
	border-bottom: 1px solid #FFFFFF;}

#pagemessage h1 {
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.8em;
	padding: 8% 0px 0px 3%;
	color: #FFFFFF;
	margin: 0px;
	float: left;}
	
#pagemessage img {
	float: right;
	display: block;
	margin-top: 6%;
	margin-right: 2%;}

#leftcol {
	float: left;
	height: auto;
	width: 410px;
	vertical-align: top;
	background-color: #FFFFFF;}
	
#rightcol {
	height: auto;
	width: 331px;
	border-left: 1px dashed #CCCCCC;
	float: left;
	background-color: #FCFBFB;}
	
#mainimage {
	background-color: #CCCCCC;
	width: 331px;
	float: left;
	height: 207px;}
	
#portfoliopane {
	background-color: #FFFFFF;
	width: 331px;
	float: left;
	height: 435px;}
	
#sitecontent {
	background-color: #FFFFFF;
	padding: 10px;
	height: auto;
	width: 390px;
	float: left;
	font-size: 1.1em;
	color: #666666;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.5em;}
	
#sitecontent a:link {color: #0033FF;text-decoration: none;border-bottom: 1px dashed #669900;	padding: 0.2em;}
#sitecontent a:visited{color: #669900;text-decoration: none;border-bottom: 1px dashed #669900;	padding: 0.2em;}
#sitecontent a:hover {	color: #ffffff;	text-decoration: none;	border-bottom: 1px dashed #669900;	background-color: #0033FF;	padding: 0.2em;}
#sitecontent a:active {color: #669900;text-decoration: none;border-bottom: 1px dashed #669900;	padding: 0.2em;}

#sitecontent h1,h2,h3,h4,h5{
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.6em;
	color: #99CC00;
	margin: 0px;
	padding: 0px;}
	
	#sitecontent h6 {
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	color: #666666;
	margin: 0px;
	padding: 2px;
	width: auto;}
	
#footer {
display:block;
background: url(bg_footer.gif) repeat-x #4F4F4F;
height: 184px;
width: 760px;
margin:0 auto;
text-align:center;
}
   
#footer ul {
    list-style-type: none;
}
   
#footer li {
    display: inline;
}
	
#footer a:link, a:visited,a:hover,a:active {color: #999999;}

eddy
eddy's picture
Offline
Enthusiast
Last seen: 10 years 35 weeks ago
Timezone: GMT+2
Joined: 2006-01-27
Posts: 59
Points: 0

I am sorry yossarian, but I

I am sorry yossarian, but I need the full page, not just some HTML. I mean with the DTD, the header, the lot. Just like I posted my HTML earlier.

Maybe you can provide a link so i can get all the info myself.

Anyone who hates kids can't be all bad.
W.C. Fields

yossarian
Offline
Regular
Norfolk, UK
Last seen: 13 years 37 weeks ago
Norfolk, UK
Joined: 2008-01-09
Posts: 12
Points: 0

Ok here goes (thanks

Ok here goes (thanks again!)

Link

eddy
eddy's picture
Offline
Enthusiast
Last seen: 10 years 35 weeks ago
Timezone: GMT+2
Joined: 2006-01-27
Posts: 59
Points: 0

Your link doesnt work, goes

Your link doesnt work, goes to this page

Anyone who hates kids can't be all bad.
W.C. Fields

yossarian
Offline
Regular
Norfolk, UK
Last seen: 13 years 37 weeks ago
Norfolk, UK
Joined: 2008-01-09
Posts: 12
Points: 0

how about now? Link

:bigoops: how about now?

Link

eddy
eddy's picture
Offline
Enthusiast
Last seen: 10 years 35 weeks ago
Timezone: GMT+2
Joined: 2006-01-27
Posts: 59
Points: 0

yes, thank you. I will see

yes, thank you. I will see what I can do.

Anyone who hates kids can't be all bad.
W.C. Fields

yossarian
Offline
Regular
Norfolk, UK
Last seen: 13 years 37 weeks ago
Norfolk, UK
Joined: 2008-01-09
Posts: 12
Points: 0

Thank you , I look forward

Thank you , I look forward to it!

yossarian
Offline
Regular
Norfolk, UK
Last seen: 13 years 37 weeks ago
Norfolk, UK
Joined: 2008-01-09
Posts: 12
Points: 0

Resolved

Added:

"footer footerinfo p{ text-align:center"}

in CSS and delete footerinfo in html and it worked!!!

Thank you for taking time looking at my problem eddy!

eddy
eddy's picture
Offline
Enthusiast
Last seen: 10 years 35 weeks ago
Timezone: GMT+2
Joined: 2006-01-27
Posts: 59
Points: 0

I was about to look into it,

I was about to look into it, I'm happy you got it yourself.

Anyone who hates kids can't be all bad.
W.C. Fields