|
HTML - Help Centering My Footer?
Hello all,
I'm hoping someone can help me with what should be a super simple thing, but I'm not sure if I've just been staring at this code too long or what. Basically all I am trying to do is center my footer on the page, but it seems glued to the left side. I've tried putting in <div align="center" within my HTML, and auto values for my margins in CSS, but neither seem to do the trick. Can anyone help me out? Related markup is below: <div id="footer" align="center"> <div class="container"> <div class="leftFooter"> <ul class="footerNavMain top"> <li class="first"><a href=" ">Products</a></li> <li> | </li> <li><a href=" ">FAQ</a></li> <li> | </li> <li class="last"><a href=" ">Where To Find Us</a></li> </ul> <ul class="footerNavMain bottom"> <li class="first">Phone Number</li> <li> | </li> <li class="last"><a href=" ">Email Link</a></li> </ul> <div class="copyright"> <sup>©</sup> 2011 Copyright™, All Rights Reserved. </div><!-- copyright close div --> </div> <!-- left footer close div --> </div><!-- container close div --> </div> CSS #footer { background: url("/Assets/footer2.jpg") no-repeat scroll 0 0; display: block; float: left; height: 75px; width: 900px; margin-left: auto; margin-right: auto; } #footer .container { height: 75px; margin-left: auto; margin-right: auto; padding-right: 45px; padding-top: 3px; width: 900px; } #footer .leftFooter { background: none repeat scroll 0 0; color: #FFFFFF; display: block; float: left; height: 100%; margin-left: 5 px; overflow: hidden; position: relative; width: 900px; } #footer .rightFooter { background: none repeat scroll 0 0 #4E4E4E; color: #FFFFFF; display: block; float: right; height: 100%; margin-left: 15 px; position: relative; width: 355px; } #footer .copyright { display: block; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; height: 15px; left: 0; line-height: 13px; position: absolute; text-align: center; top: 50px; width: 900px; z-index: 1; font-weight: 700; } #footer a:link{ color: #FFFFFF; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; } #footer a:visited { color: #FFFFFF; text-decoration: none; font-size: 11px; } #footer a:hover{ color: #000000; text-decoration: underline; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; } #footer ul.footerNavMain { display: block; float: left; margin-top: 5px; width: 900px; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; } #footer ul.footerNavMain.top { margin-left: 185px; width: 900px; } #footer ul.footerNavMain.bottom { margin-left: 145px; width: 900px; color: #000000; } #footer .footernavMain li { display: block; float: left; padding-left: 4px; padding-right: 4px; } #footernav li a:link { color: #FFFFFF; text-decoration: none; font-size: 11px; } #footernav li a:visited { color: #FFFFFF; text-decoration: none; font-size: 11px; } #footernav li a:active { color: #000000; text-decoration: underline; font-size: 11px; } #header nav li.last, #footerNavMain li.last { padding right: 0; } #footer .footerNavMain li.first { background: none repeat scroll 0 0 transparent; padding-left:0; } Similar TutorialsHello, I'm working on a site, but have run into a problem I'm not sure how to deal with. The contents of the footer area of the page are centered within a Div as you can see at the url: http://www.mylessinclair.com/testsite/ However, I think it might be easier on the eye if the links and content were centered underneath the main content panel. I'm trying to avoid the use of tables in achieving this, so I'm thinking that I need two Divs side by side for the footer. One 150px wide as in the side bar above it, marked up as float left - and then just center the footer contents in the other Div ? Am I on the right track here, or is it a bit more complicated? Hope someone can advise. Many thanks, Myles ....I had enough! My footer is all over the place! Why can't it just move down when the text becomes longer! I am just using <div>. My header, the nav bar and the right side bar are fixed and I want the footer to just fit in underneath. Anybody got some code which solves that problem? Chris PHP Code: <?php echo "<div class='mainarea'>"; include ("includes/header.inc"); include ("includes/navigation.inc"); if ($var == 'service' or $var == 'consultancy') { echo "<div class='textarea_services'><p><br /></p>"; include ("text.php"); echo "</div>"; } else { echo "<div class='textarea'><p><br /></p>"; include ("text.php"); echo "</div>"; } if ($var != 'service' and $var != 'consultancy'){include ("includes/rightside.inc");} if ($var != 'privacy'){include ("includes/footer.inc");} echo "</div>"; ?> The footer on my webpage stays with the bottom of the window - now when I make the window smaller, the footer moves with the window and then stays there, when I scroll down, the footer stays in the middle of the text. WHAT'S WRONG? Please have a look: http://www.stainless-expert.com/new/index.php Thanks Chris Hi, im trying to create a footer that sticks to the bottom of my page and stays there. Please help, im sorta new with this, html/css stuff, I have tried many of the codes that i have searched on google. Any other ways? Please tell me. Thanks I couldn't find my footer anywhere on my page, when I copied a footer from another page of mine, it put the footer in the wrong place and I can't get it to go back to being a footer instead of part of the content box. Please help! This is the website I'm working on: http://glacurh.nacurh.org/GLACURH2011/ I cannot, for the life of me, get a footer put below everything with a thin, solid border on it with text aligned in the middle. The footer width, including the border, should be 800x40. The background color should be #FABF8F. Please help! I don't know what I'm doing wrong! You all rock! I have a website and I used css to make my Div tags set to absolute. The only problem is that when you open it in a browser, the browser won't open big enough and wil block out some of my content (forcing me to scroll to the left or maximize the borswer to see the whole page) . How do i make the divs always appear in the center of the page always. Also how do i make it so when you change the siz of the browser my divs will change with it to remain in the center. I tried doing the margin auto trick but it still doesn't work. Here is my stle sheet code and the web page html code... any help would be appreciated. /* CSS Document */ #wrapper {margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 0;;} body { margin : 0px 0px 0px 0px; background-color: #E1AE5A; background-repeat: repeat; } #top { position: absolute; height: 48px; width: 900px; left: 250px; top:3px; border:0px none; z-index:1; color: #000033; } #main { position: absolute; top: 542px; left: 328px; z-index:5; width: 745px; color: #FFFFFF; height: 28px; } #flash { position: absolute; top: 130px; left: 299px; z-index:4; width: 803px; color: #FFFFFF; height: 419px; } .style1 { font-family: Eurostile; color: #FFFFFF; } .style2 { font-family: Helvetica; } #Layer1 { position:absolute; left:300px; top:121px; width:804px; height:540px; z-index:3; background-color: #000033; border: medium solid #FFFFFF; } .style3 { font-family: Eurostile; } #Layer2 { position:absolute; left:111px; top:170px; width:71px; height:124px; z-index:4; } .style4 {color: #000000} #Layer3 { position:absolute; left:482px; top:72px; width:37px; height:56px; z-index:2; } #Layer4 { position:absolute; left:652px; top:72px; width:24px; height:31px; z-index:2; } #Layer5 { position:absolute; left:822px; top:72px; width:84px; height:58px; z-index:2; } #Layer6 { position:absolute; left:992px; top:72px; width:95px; height:50px; z-index:2; } #Layer7 { position:absolute; left:331px; top:139px; width:750px; height:446px; z-index:9; } #Layer11 { position:absolute; left:319px; top:72px; width:12px; height:10px; z-index: 2; } #Layer8 { position:absolute; left:302px; top:98px; width:791px; height:48px; z-index:10; } #Layer9 { position:absolute; left:299px; top:40px; width:32px; height:20px; z-index:0; } #Layer10 { position:absolute; left:1016px; top:595px; width:24px; height:26px; z-index:10; } and the html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" land="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="styles.css" rel="stylesheet" type="text/css"> </head> <body> <div id="top"> <h1 align="center" class="style3 style4">on The side, Inc. </h1> <p align="center" class="style3"> </p> </div> <div class="style2 style3" id="main">on The side is a value added promotional marketing organization focused on working with companies to make them more market-facing. We take time to learn about our clients' business model, industry and previous marketing agendas before taking a next step OR leap - if necessary.</div> <div id="Layer1"></div> <div id="flash" align="center"> <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="425" height="400"> <param name="movie" value="main.swf"> <param name="quality" value="high"> <embed src="main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="425" height="400"></embed> </object> </div> <div id="Layer3"><a href="who.html"><img src="who.jpg" width="100" height="70" border="0"></a></div> <div id="Layer4"><a href="what.html"><img src="what.jpg" width="100" height="70" border="0"></a></div> <div id="Layer5"><a href="ideas.html"><img src="ideas.jpg" width="100" height="70" border="0"></a></div> <div id="Layer6"><a href="why.html"><img src="why.jpg" width="100" height="70" border="0"></a></div> </body> </html> so what is the easiest and best way to center a div within a div? or a div within anything else for that matter. How do you center vertically? and How do you venter horizontally? how can i center the nav on this page? http://fantasyfootball.pzproductions.com/testing Hello, I'm not a web designer in any sense, but I'm doing this website for a friend. However, I can't figure out how to set the footer to the position I need it to be in. I need the white text to appear on the blue bar that goes across the bottom of the page. But the footer keeps starting at the bottom of the page and it's just getting to the point where I've spent way too many hours trying to figure it out and it's making me pretty mad. Here's the page I'm specifically talking about: http://dianarusselldesign.com/bbb.html I'm using Dreamweaver 8 because I'm poor, and again, NOT a web designer. Here's a screencap of what the css and dreamweaver set ups look like. http://i367.photobucket.com/albums/oo120/meepum/css.jpg http://i367.photobucket.com/albums/oo120/meepum/bbb.jpg PLEASE HELP! Thank you! Hello, So I posted a while ago that I'm having issues with the footer on a website I'm making for a friend. Here's a jpg of how it looks now: http://i367.photobucket.com/albums/o...epum/weird.jpg So I really really need the footer to be RIGHT UNDER the sidebar. I can find all kinds of tutorials online about making the footer "sticky" to the bottom of the page, but nothing about making it start at an exact location. The sidebar ends at 519px and I want the footer to start at 525px. I've tried putting that into the position property, but in dreamweaver it just shows up crossed out. Does anyone have any input? I'm getting so frustrated and angry that I can't fix this. It's driving me nuts. Thank you for any help!!! Ok I just deleted about 100 links off of this page: http://lmiinc.com/LMIinc_Links.html And now as you can see there is some extra space. What do I have to do in order to make it look "normal"? Thanks. I'll having issue on my page, I want to insert a footer for the copyright of this page but I cannot figure out what or how could I insert a footer to my css code and html code. Code: body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
font-family: Arial, Helvetica, sans-serif;
background: #FFFAFA;
}
a:link {
color: #1C1C1C;
text-decoration: none;
} /* unvisited link */
a:visited {
color: #1C1C1C;
text-decoration: none;
} /* visited link */
a:hover {color: #0099CC} /* mouse over link */
a:active {color: #0099CC} /* selected link */
.seperators {color: white}/* Navigation selector */
#nav {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
#nav a:link {
color: #FFFFFF;
text-decoration: none;
} /* unvisited link */
#nav a:visited {
color: #FFFFFF;
text-decoration: none;
} /* visited link */
#nav a:hover {color: #0099CC} /* mouse over link */
#nav a:active {color: #0099CC} /* selected link */
/* menu*/
/* left column */
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
background: #F5F5F5;
border-bottom: 0.5pt solid RGB(0,0,0);
border-right: 0.5pt solid #D3D3D3;
}
#left .searchengine {
width: 180px;
margin: 10px;
background: #DCDCDC;
padding-bottom: 4px;
padding-top: 4px;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#left img {width: 180px; margin: 10px;}
#left .leftbox {width: 180px; margin: 10px;}
#left .leftbox .leftheaderbox {
background: url('../images/Header.gif') #E2E2E2;
background-repeat: no-repeat;
height: 30px;
font-size: 14px;
font-weight: bold;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#left .leftbox .leftheaderbox span {
top: 7px;
left: 6px;
position: relative;
color: #F0F8FF;
}
#left .leftbox .leftheaderlist {
background: url('../images/headerlist.gif') #E2E2E2;
background-repeat: no-repeat;
height: 25px;
font-size: 12px;
font-weight: bold;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#left .leftbox .leftheaderlist span {
top: 7px;
left: 7px;
position: relative;
color: #F0F8FF;
}
#left .leftbox .leftboxlist{
border-top: 1px outset;
font-size: 10px;
background: #E2E2E2;
background-repeat: no-repeat;
background-position: 5px;
padding-left: 18px;
padding-top: 4px;
height: 18px;
border-left-style: none;
border-right-style: none;
border-top-style: none;
border-bottom: 0.5pt solid RGB(0,0,0);
}
/* middle column */
#center {
position: absolute;
top: 155px;
width: 543px;
margin-left: 230px;
margin-right: 230px;
background: #F5F5F5;
border-bottom: 0.5pt solid RGB(0,0,0);
border-right: 0.5pt solid #C8C8C8 ;
}
#center .middlenav{
width: 543px;
height: 20px;
background: #A80000;
border-bottom: 1.5pt solid #D2B48C;
}
#center .middlecontent{
width: 543px;
}
#center .middlecontent .title{
position: relative;
font-size: 12px;
font-weight: bold;
text-align: left;
margin: 5px;
background: #D3D3D3;
color: #708090;
border-top: 1.5pt solid #A80000;
border-bottom: 1.5pt solid #A80000;
}
#center .middlecontent .content{
position: relative;
margin: 5px;
font-size: 10px;
text-align: justify;
text-indent: 5px;
}
/* right column */
#right {
position: absolute;
right: 15px;
top: 160px;
width: 200px;
background: #F5F5F5;
border-bottom: 0.5pt solid RGB(0,0,0);
border-right: 0.5pt solid #D3D3D3;
}
#right .rightbox {width: 180px; margin: 10px;}
#right .rightbox .rightheaderbox {
background: url('../images/Header.gif') #E2E2E2;
background-repeat: no-repeat;
height: 30px;
font-size: 14px;
font-weight: bold;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#right .rightbox .rightheaderbox span {
top: 7px;
left: 6px;
position: relative;
color: #F0F8FF;
}
#right .rightbox .rightheaderlist {
background: url('../images/headerlist.gif') #E2E2E2;
background-repeat: no-repeat;
height: 25px;
font-size: 12px;
font-weight: bold;
border-bottom: 0.5pt solid RGB(0,0,0);
}
#right .rightbox .rightheaderlist span {
top: 7px;
left: 7px;
position: relative;
color: #F0F8FF;
}
#right .rightbox .rightboxlist{
border-top: 1px outset;
font-size: 10px;
background: #E2E2E2;
background-repeat: no-repeat;
background-position: 5px;
padding-left: 18px;
padding-top: 4px;
height: 18px;
border-left-style: none;
border-right-style: none;
border-top-style: none;
border-bottom: 0.5pt solid RGB(0,0,0);
}
And here the actual output/page I want the footer to be like as my header just a rectangular, please someOne help me with this. i have a problem in a footer that if the content of the page did not fill the all the page the footer will not be in front of the status bar' but it is not working well on firefox and internet explorer in the same time] so how i can put the footer above the status bar in the pages that not contains alot of data??? to see what i mean plz open this link in internet explorer and firefox th see the difference http://www.graphicano.com/john/index.htm with css: .bodydwn { background-image: url(images/body_dwn.jpg); padding-left: 280px; font-size: 10px; vertical-align: middle; } and http://www.graphicano.com/john/index2.htm with css .bodydwn { background-image: url(images/body_dwn.jpg); padding-left: 280px; font-size: 10px; vertical-align: middle; width: 100%; position: absolute; bottom: 0px; } Hello HTML experts. I need someone's help urgently. I am trying to obtain the header & footer html of my site. I know I'm supposed to go to VIEW SOURCE and whatnot....but then when I get there I get stuck as I do not understand this html stuff........ Please help me...... My site is dishnetworkoffers.net I'm not sure whether this is a CSS problem or Html but I'm gonna post it here any way. My footer moves up on my photos pages. I put the footer php file in the exact place I put it on the home page. I don't get why it moves up on my photo page though. Here is the link http://www.wizardsbuzz.com/photos I'm trying to add some buttons at the end of every post and this is the code I was given:
Code: <a expr:href='"http://www.yardbarker.com/author/new?pUrl=" + data:post.url + "&pHead=" + data:post.title' target='_blank'><img src='http://www.yardbarker.com/images/extern/bark_wide.gif' style='border: 0; padding: 0 0 0 15; vertical-align: bottom;'/></a> <a expr:href='"http://ballhype.com/post/url/?url=" + data:post.url + "&title=" + data:post.title'><img alt='BallHype: hype it up!' height='22' src='http://images.ballhype.com/img/hype/button_96x22.png' width='96'/></a> I tried to paste that in after the line: " <div class='post-footer-line post-footer-line-3'/>" but it keeps showing me an error. I'm using a blogger blog by the way. Thanks for any help you can give. I forgot to mention the site is http://notqualifiedtocomment.blogspot.com/ Hello, I've been trying to get a footer bar at the fixed bottom position. So far, it seems to work in FF, IE and I also checked in the new Google Chrome browser. However, in IE something strange happens: when a menu in the navigation gets expanded, the footer shifts over the width of the navigation div to the right. You can see the site and the problem at this test page. When you go over "hoofdstukken" in the menu, the footer div moves to the right - at least in my IE7. Any ideas what could cause this - and how to solve it? Thanks in advance. Kind regards, Tom Hello, I'm having real trouble aligning images to the 'exact' centre in different browsers. I'm using <div align="middle"> </div> around the whole code at the moment, which aligns horizontally in Chrome and Firefox, but not IE9. But even this does not vertically align as well. Afraid I don't know much about CSS or any other div tags. I built the site in Dreamweaver - this is the code straight from site: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <div align="middle"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.test.com</title> <style type="text/css"> <!-- body { background-color: #000; } --> </style></head> <body> <img src="comet3.jpg" width="933" height="658" border="0" align="middle" usemap="#Map" /> <map name="Map" id="Map"><area shape="circle" coords="885,123,9" href="comet2.html" /><area shape="circle" coords="916,124,9" href="comet4.html" /><area shape="rect" coords="785,71,904,103" href="contact.html" /><area shape="rect" coords="665,70,756,109" href="about.html" /> <area shape="rect" coords="371,73,462,112" href="index.html" /> <area shape="rect" coords="499,70,632,111" href="portfolio.html" /> <area shape="poly" coords="891,118" href="#" /> </map> </body> </html> </div> Really need some help with this! Thanks for any assistance Cheers J |
|||||||