|
CSS - Css Middle Div And Footer Div Problem
Hello. I have no idea how to fix my problem, and I am hoping someone would be kind enough to help me.
I have set up my template to have a wrapper div with a top, middle, and bottom div inside. What I need to do is have the footer (bottom div called (wrapper_bottom) move down when the content in the middle div (wrapper_middle) has more content added. Currently, when content is added to the middle div (wrapper_middle), it pushes the bottom div content out of the way. Maybe I have the divs set up wrong or maybe have them listed in the html file incorrectly? I have uploaded a zip file of my files he www (*) dpegues (*) com (slash) site_help (*) zip Also, I have posted a live version of it at: www (*) dpegues (*) com (slash) site_help It contains my site images, the template in the folder called Templates, and the css file. And one more thing if everyone doesn't mind - how do I keep the bottom buttons attached to the bottom of the footer bar? I am learning CSS right now, and unfortunately have to teach myself. I think I have learned a lot though in the few days I have been doing it!!! Thank you everyone. Similar TutorialsHi I am quite familiar with CSS but am stumped on how I could do the following. Basically I need a template with a header, body and footer, I know, sounds simple right, but I need to have the middle body section of the page stretching to the height of the browser, so that the space in between the header and footer is filled in with the middle container. The middle container that stretches to the required height needs to have a background image that cannot be covered over by the header or the footer. This is the problem, because if the middle container is set to 100% height, then a scroll bar is always present because of the header and footers height. I have been able to create what I am trying to do with a table, but obviously I want to avoid using a table for a layout. Is there any way to recreate this but via CSS? Take a look at the table layout and change the size of your browser to see the effect I am aiming for, but in CSS http://labwaves.com/temp/index3.php This is an attempt in CSS, but It requires me to set the headers and footers background image to the same as the bodys background image, with I can't have . http://labwaves.com/temp/index2.php Congratulations on making it to the end of this long, but hopefully un-confusing post Thanks and any reply's are really, really appreciated as I am so stuck on this one! Hi again, i've built an image gallery using an unordered list and php to grab 'em from the database. when you first go to the page (both in FF and IE) the footer bar sits in the middle of the page, until you refresh, then it's fine. same thing happens when you click to enlarge it. Here's the page Here's the CSS; Code:
/* SHOWCASE STYLE - firefox */
html>body ul.showcase {
margin:5px 1px;
margin:auto;
list-style: none;
width:760px;
}
html>body li.showcase {
margin-top:5px;
margin-left:10px;
float:left;
width:180px;
}
/* SHOWCASE STYLE - IE */
* html ul.showcase {
margin:5px 1px;
margin:auto;
list-style: none;
width:750px;
}
* html li.showcase {
margin-top:5px;
margin-left:8px;
float:left;
width:179px;
}
img.showcase {
border:1px solid #CCCCCC;
}
i'm sure it's somethin' to do with clearing the floats, but i just don't get why it's cool after you refresh. thanks! http://cheers-sendai.com/fluidframe.htm has a great and simple example of 3 cols (OK, 2 cols in the middle section makes "4 cols"), header and sticky footer, where the middle col has overflow:auto so it can be scrolled. GREAT example, I think (due to the use of bg colors, etc.). The left/right/width values of the divs are manipulated so that the middle section runs from 10% to 90% and the left/right divs fill in accordingly. I'd like to be able to set, for example, the left and right divs to be 150 px wide (NO percentages!) and have the middle section stretch between them (regardless of viewport width) and be able to be scrolled, too. The problem I see is that most examples use percentages. I can set the left div to be a fixed width, then set the middle section left coord. to be, say, 150px, but then I need to set its width to stretch to "150 to the left of the right side of the viewport" and I don't know how to do this. Thanks. Ive tried to put stuff to the left of the news room in the blank spot and cannot seem to do so.. here is css: Code:
#header {
position: relative;
margin: 0 auto;
background: transparent url(img/bg/header-v2.gif) no-repeat bottom left;
height: 235px;
width: 760px;
text-align: left;
z-index: 10;
}
'#content {
position: relative;
background-color: #FFFFFF;
height:inherit;
width: 760px;
margin: 0 auto 0 auto;
text-align: left;
border: 1px double rgb(72,183,239);
overflow: hidden;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#leftpanel{
position: inherit;
float: left;
background-color: #f5f5f5;
height: inherit;
width: 170px;
margin-left: 3px;
}
#leftpanel-head{
width: 158px;
height: 26px;
background-image: url(img/bg/leftpanel-head.png);
padding-left: 12px;
color: #FFFFFF;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 4px;
}
#content-right {
width: 585px;
height: inherit;
float: right;
}
#newsroom {
float: right;
width: 300px;
height: 30px;
margin-left: 2px;
}
#newsroom-header {
width: 300px;
height: inherit;
background-image:url(img/bg/video-player-head.png);
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}
#welcome{
float: left;
height: 27px;
width: 279px;
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}
#welcome-text {
float: left;
height: 27px;
width: 279px;
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}
#primary-nav {
position: absolute;
background: transparent url(img/bg/primary-nav-v2.gif) no-repeat;
list-style: none;
width: 760px;
height: 26px;
top: 203px;
left: 1px;
z-index: 10;
padding-left: 5px;
}
#primary-nav li {
float: left;
background-position: 0 -26px;
}
#primary-nav li ul {
position: absolute;
background: transparent url(img/primary-nav-top.png) no-repeat;
list-style: none;
width: 159px;
left: -9999px;
margin-left: -9px;
padding-top: 5px;
}
#primary-nav a {
display: block;
height: 0px !important;
text-decoration: none;
overflow: hidden;
}
#primary-nav li a {
background-position: 0 0;
}
#primary-nav li#nav-1 {
background: transparent url(img/bg/nav-1.png) no-repeat;
margin-right: 1px;
}
#primary-nav li#nav-2 {
background: transparent url(img/bg/nav-2-shopping.png) no-repeat;
margin-right: 1px;
}
#primary-nav li#nav-3 {
background: transparent url(img/bg/nav-3-restaurants.png) no-repeat;
margin-right: 1px;
}
#primary-nav li#nav-4 {
background: transparent url(img/bg/nav-4-hotels.png) no-repeat;
}
#primary-nav li#nav-5 {
background: transparent url(img/bg/nav-5-history.png) no-repeat;
}
#primary-nav li#nav-6 {
background: transparent url(img/bg/nav-6-links.png) no-repeat;
}
#primary-nav li#nav-7 {
background: transparent url(img/bg/nav-7-about.png) no-repeat;
}
#primary-nav li#nav-1:hover,
#primary-nav li#nav-1.sfhover,
#primary-nav li#nav-2:hover,
#primary-nav li#nav-2.sfhover,
#primary-nav li#nav-3.hover,
#primary-nav li#nav-3.sfhover,
#primary-nav li#nav-4:hover,
#primary-nav li#nav-4.sfhover,
#primary-nav li#nav-5:hover,
#primary-nav li#nav-5.sfhover,
#primary-nav li#nav-6:hover,
#primary-nav li#nav-6.sfhover,
#primary-nav li#nav-7:hover,
#primary-nav li#nav-7.sfhover{
background-position: 0 -26px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#primary-nav li#nav-1 a,
#primary-nav li#nav-2 a,
#primary-nav li#nav-3 a,
#primary-nav li#nav-4 a,
#primary-nav li#nav-5 a,
#primary-nav li#nav-6 a,
#primary-nav li#nav-7 a {
width: 107px;
height /**/: 26px;
padding: 26px 0 0 0;
}
#primary-nav li#nav-1 ul li,
#primary-nav li#nav-2 ul li,
#primary-nav li#nav-3 ul li,
#primary-nav li#nav-4 ul li,
#primary-nav li#nav-5 ul li,
#primary-nav li#nav-6 ul li,
#primary-nav li#nav-7 ul li{
background: transparent url(img/bg/primary-nav-link-up.png) no-repeat;
height: 21px;
}
#primary-nav li#nav-1 ul li.bottom,
#primary-nav li#nav-2 ul li.bottom,
#primary-nav li#nav-3 ul li.bottom,
#primary-nav li#nav-4 ul li.bottom,
#primary-nav li#nav-5 ul li.bottom,
#primary-nav li#nav-6 ul li.bottom,
#primary-nav li#nav-7 ul li.bottom{
background: transparent url(img/bg/primary-nav-bottom.png) no-repeat;
height: 14px;
width: 159px;
}
#primary-nav li#nav-1 ul li a,
#primary-nav li#nav-2 ul li a,
#primary-nav li#nav-3 ul li a,
#primary-nav li#nav-4 ul li a,
#primary-nav li#nav-5 ul li a,
#primary-nav li#nav-6 ul li a,
#primary-nav li#nav-7 ul li a {
overflow: hidden !important;
overflow: visible;
font-size: 10px;
color: #FFF;
height: 19px !important;
height: 19px;
width: 107px;
padding: 1px 3px 2px 19px;
}
#primary-nav li#nav-1 ul li a:hover,
#primary-nav li#nav-2 ul li a:hover,
#primary-nav li#nav-3 ul li a:hover,
#primary-nav li#nav-4 ul li a:hover,
#primary-nav li#nav-5 ul li a:hover,
#primary-nav li#nav-6 ul li a:hover,
#primary-nav li#nav-7 ul li a:hover {
background: transparent url(img/bg/primary-nav-link-over.png) no-repeat 0 0;
}
#primary-nav li:hover ul,
#primary-nav li.sfhover ul {
left: auto;
}
html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html class="sIFR-active" id="home" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head style="background-color: rgb(255, 0, 0);">
<title>TysonsCorner.com™</title>
<link rel="shortcut icon" href="#">
<link href="home.css" rel="stylesheet" type="text/css">
<link href="global.css" rel="stylesheet" type="text/css">
<link href="nav1.css" rel="stylesheet" type="text/css">
</head><body>
<div id="container">
<!-- HEADER AREA STARTS HERE -->
<div id="content">
<div id="header">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="760" height="200" id="Banner(FLASH) - Beta" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="Banner(FLASH) - Beta.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="Banner(FLASH) - Beta.swf" quality="high" bgcolor="#ffffff" width="760" height="200" name="Banner(FLASH) - Beta" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<ul id="primary-nav">
<!-- PRIMARY NAVIGATION (CATEGORIES) STARTS HERE -->
<li id="nav-1"><a href="#" title="Tysons Corner Homepage">Tysons Homepage</a>
<ul>
<li><a href="#" title="Tysons 1 Stores">News</a></li>
<li><a href="#" title="Tysons 2 Stores">Events</a></li>
<li><a href="#" title="More Tysons Shopping">Contact Us</a></li>
<li class="bottom"></li>
</ul>
</li>
<!-- PRIMARY NAVIGATION (BRANDS) STARTS HERE -->
<li id="nav-2"><a href="#" title="Tysons Corner Shopping">Tysons Shopping</a>
<ul>
<li><a href="#" title="Tysons 1 Stores">Tysons I</a></li>
<li><a href="#" title="Tysons 2 Stores">Tysons II</a></li>
<li><a href="#" title="More Tysons Shopping">More Shopping</a></li>
<li class="bottom"></li>
</ul>
</li>
<!-- PRIMARY NAVIGATION (PRODUCTS) STARTS HERE -->
<li id="nav-3"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<ul>
<li><a href="#" title="Cajun Food">Cajun</a></li>
<li><a href="#" title="Grilled Food">Grilled</a></li>
<li><a href="#" title="Foreign Food">Foreign</a></li>
<li><a href="#" title=" Full List Restaurants">Complete List</a></li>
<li class="bottom"></li>
</ul>
<li id="nav-4"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<li id="nav-5"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<li id="nav-6"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<li id="nav-7"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
</li>
</ul>
</div>
<div id="leftpanel">
<div id="leftpanel-head">
Search
</div>
<form id="form1" method="post" action="">
<p>
<label>
<input type="text" name="IDsearch" id="IDsearch" width="150"/>
</label>
</p>
</form>
<div id="leftpanel-head">
Events Calendar
</div>
<div id="leftpanel-head">
Sponsored Ads
</div>
<script type="text/javascript"><!--
google_ad_client = "pub-8246327012745782";
/* 120x600, created 10/23/08 */
google_ad_slot = "1782998545";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="newsroom">
<div id="newsroom-header">News Room</div>
</div>
<div id="welcome">Test</div>
<div id="newsroom">
<script language="javascript" src="http://www.thenewsroom.com//mash/swf/voxant_player.js?a=V3126802&m=669243&w=300&h=290&v=2"></script>
</div>
</div>
</body></html>
Demo: http://www.reston.com/Tysons Corner COM I am trying to create a footer and facing a problem while doing so... This is my html code: Code: <div id="container"> <div id="main"> <div id="terms"> // content </div> // closing terms </div> // closing main <div id="footer"> // content </div> </div> // closing container And css is Code: html, body {
height:100%;
margin:0;
background: #F0FAFF;
}
#container {
min-height:100%;
position:relative;
}
#main {
height:100%;
font-size:150%;
clear:both;
overflow:auto;
padding-bottom:80px;
}
#footer {
position:absolute;
background-color:#FF6633;
bottom:0;
width:100%;
height:80px;
}
#termsandpolicy {
position:absolute;
left:3%;
width:72%;
top:90px;
}
And result that I get is http://www.walknshine.com/termsofuse.php What is the problem...I have searched in google a lot but not able to get any significant css code...plzz help.... The dreaded CSS footer. I've managed to get it working perfectly in IE, but Firefox isn't happy atm. If you resize the window so that it needs to be scrolled down the footer soon gets very messed up. If you figure that out then you really, really know your stuff. Or you're a lot more awake than I am. http://www.vaya.ws/vayadesign/ I have an odd problem with my footer layout. I use 1280x1024 resultion and it works fine but when I change to a lower resultion or reduce browser window from full screen or put on longer text so you need to scroll the page down my footer doesn't sit on the bottom of the page. Check the attached screenshots and the css code bellow to see my exact problem. Code:
#footer {
position: absolute;
margin-left: -50%;
left: 50%;
bottom: 0px; !important;
text-align: center;
font-family: Verdana, Arial, sans-serif;
font-size: 9px;
padding: 5px;
padding-bottom: 8px;
background-image: url(../images/design/bg.gif);
}
Any idea? Thanks Hiya everyone. Right am having major issues with my new site. The problem i am finding, is that my footer is not at the foot at the page when the content in the middle of the page is not big enough. When i add a doze of lines to the main layer it's OK. please check these : Works ok with content in the middle Click here without much content - footer rises. Click Here I've spend 3 hours try to sort out this annoying problem out. Basically i want the footer to main a defined size, remaining at the very bottom of the page. Would someone be kind enough to assist me please ? I am having problems with the footer of our site on the homepage at http://www.themax.co/ . This problem is ONLY occurring in the AOL browser (yes, it's annoying). See the attached image... In the AOL browser, the footer links (HOME, ABOUT, etc.) are sitting ontop of the READ MORE buttons (in the 3 bottom boxed). I tried adding a <div style="clear:both"></div> between the footer and the boxes, but that didn't work. Then I tried a min-height hack - I added the <div class="prop"></div> and <div class="clear"></div> tags to each of the boxes. But that didn't work (the prop and clear class are defined in my stylesheet) ... but that didn't work either. Ug. Running out of ideas. Please help. this is where it is about: sdomien .be/sdomien6-positionated/ the footer (now it is just the red ugly thing) looks like i want it in IE7, but when i open it in IE8 or FF it seems to be not like in IE7 what did i do wrong? #footer{background-color:red; width:100%; position:relative; bottom:auto;margin-bottom:0 auto;} hi Guys, Ive had a play and cant solve this problem. Ive got a gradient that is 200px tall that repeats across the top of my page set as the background. I also have a container with a width of 850px centered. I need to create another gradient that repeats across the bottom of the page (200px tall also). What ive done is taken the footer div out of the container and put it underneath in the html set the width to 100% height to 200px and repeated the background - this works but if there is no content in the container the footer sits half way up the page sooooo I add position: absolute with bottom: 0px which brings the footer to the bottom of the page even if no content is in the container SWEET but if I start streching the actual browser window up and down the footer will ride over any other element on page. Hello, I have a problem with a footer on a website I'm building. I want it to my down as text fills the space between the top blue thing, and the bottom blue thing, but as you can see, the text skip past the bottom. I want the bottom to be pushed down by the text. Here's the site And here's the css Hope you can help me with this. Hi. I've been banging my head against the wall for ages with this! Could someone please explain, and perhaps offer some code, on why the footer on the Home and About Me pages (http://www.freewebs.com/mike-elley/) renders the page header and title below, differently. These pages seem to work fine in IE6. I'm testing on Opera 7.23 by the way. Thanks very much for any help! Hi, I've created a page with two tables, which is basically structured like <table> main content </table> <table id="footer"> footer content </table> and in my style sheet i have Code:
#footerid {
position: absolute;
bottom: 0px;
}
The problem is that the footer is overlapping the content if the content is greater then a page's length. What I need is for the footer to come after the content table insetad of overlapping as it is now. Does this require some sort of id attached the first table? Thanks for any help on this one Hi, I am generating what should be a simple css layout. I have a header, some left content (which is comprised of layers that hold an image and some over the top to form a kind of navigation tablet), some content to the right of that for text, and finally a footer. Bog standard design... The problem I have is that the content to the right of the left content is sat below both the left content and the footer currently. What it should be doing is sitting to the right of the left content and where the text 'grows' push the footer down the page: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* mac hide \*/
html, body {height:100%}
/* end hide*/
body {
padding:0;
margin:0;
color: #000000;
}
#wrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:224px;
border-top:0px solid #feffff;
border-bottom:0px solid #feffff;
overflow:hidden;
color: #000000;
}
#content {
background-color: #ccc;
padding-bottom: 50px;
}
* html #footer {/*only ie gets this style*/
\height:40px;/* for ie5 */
he\ight:38px;/* for ie6 */
}
#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 0px white;
}
#navlist li a {
color: #4E261B;
text-decoration: none;
font-family: palatino linotype, helvetica, sans-serif;
font-size: .90em;
line-height: 200%;
}
a{
font-family: Tempus Sans ITC;
color: #4E261B;
font-weight: bold;
font-size: 14pt;
}
#content {
background-color: white;
padding-bottom: 50px;
padding-left: 200px;
padding-top: 0px;
}
#footer {
background-color: #ff0;
width: 100%;
height: 50px;
line-height: 50px;
position: absolute;
bottom: 0 !important;
bottom: -1px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<img border="0" src="images/Banner_flat.jpg" alt="Banner" width="100%" height="224" align="left" />
</div>
<div style="position: absolute; width: 169px; height: 243px; z-index: 1; left: 4px; top: 229px" id="layer1">
<img border="0" src="images/bridetablet1.bmp" alt="Menu" width="190" height="302" /></div>
</div>
<div style="position: absolute; width: 169px; height: 243px; z-index: 2; left: 14px; top: 257px" id="layer2">
<div id="navcontainer"></div>
<ul id="navlist">
<li><a href="hello" class="c2">Home</a></li>
<li><a href="About%20Us" class="c2">About Us</a></li>
<li><a href="User%20Register" class="c2">User Register</a></li>
<li><a href="User%20Log-In" class="c2">User Log-In</a></li>
<li><a href="Supplier%20Log-In" class="c2">Supplier Log-In</a></li>
<li><a href="Join" class="c2">Join</a></li>
</ul>
</div>
<div id="content">
<p>Stuff.</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p><p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Thanks, G Hey Guys, It's turning out to be 'one of those days'. I thought I had a pretty good understanding of using containers and a footers 'bottom' property to make sure the footer lines up with the last elements of the page. I've set it up in code and just can't seem to find why the footer is showing up at the top of the page. Anyone spot the problem? -----------> CSS references outside file Code: #footer_global
{
background-color: #FFFFFF;
font-family: helvetica,;
position: absolute;
left: 0px;
width: 812px;
height: auto;
z-index: 0;
bottom: auto;
}
----------------Page Coding Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css_layout.css" rel="stylesheet" type="text/css" />
<link href="css_fonts.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#body_container
{
background-color: #FFFFFF;
font-family: helvetica,;
margin:0;
padding:0;
position: absolute;
left: 0px;
top: 216px;
width: 812px;
height: 277;
z-index: 0;
}
#site_container
{
background-color: #FFFFFF;
font-family: helvetica,;
margin:0;
padding:0;
position: absolute;
left: 30px;
top: 50px;
width: 812px;
height: auto;
z-index: 0;
}
</style>
</head>
<body>
<div id="site_container">
<div id="header_global">
<!-- ImageReady Slices (global_header.psd) -->
<table id="Global_Header" width="812" height="216" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="images/global_header_01.jpg" width="480" height="51" alt=""></td>
<td>
<img src="images/global_header_02.jpg" width="163" height="51" alt=""></td>
<td> </td>
</tr>
<tr>
<td colspan="3">
<img src="images/global_header_04.jpg" width="480" height="52" alt=""></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3">
<a href="index.html"><img src="images/global_header_07.jpg" width="157" height="113" alt="Ask_Bob" border="0"></a></td>
<td rowspan="3">
<a href="main_P3_input.html"><img src="images/global_header_08.jpg" width="161" height="113" alt="Project_Pricing_Profiler" border="0"></a></td>
<td rowspan="3">
<a href="main_identify_input.html"><img src="images/global_header_09.jpg" width="162" height="113" alt="Identity_Local_Companies" border="0"></a></td>
<td rowspan="3">
<a href="main_workshop_input.html"><img src="images/global_header_10.jpg" width="163" height="113" alt="Workshop_Opportunities" border="0"></a></td>
<td>
<img src="images/global_header_11.jpg" width="169" height="21" alt=""></td>
</tr>
<tr>
<td>
<a href="http://www.churchsolutionsmag.com/" target="_blank"><img src="images/global_header_12.jpg" width="169" height="83" alt="Featured_Sponsor" border="0"></a></td>
</tr>
<tr>
<td>
<img src="images/global_header_13.jpg" width="169" height="9" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>
<div id="body_container">
<div id="body_main_global">
<img src="images/index_body.jpg" width="642" height="277" alt="Ask_Bob">
</div>
<div id="sponsors_global">
<!-- ImageReady Slices (sponsors.psd) -->
<table id="Global_Sponsors" width="170" height="277" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="4">
<img src="images/global_sponsors_01.jpg" width="7" height="277" alt=""></td>
<td>
<img src="images/global_sponsors_02.jpg" width="163" height="19" alt=""></td>
</tr>
<tr>
<td>
<a href="http://www.csdus.com" target="_blank"><img src="images/global_sponsors_03.jpg" width="163" height="89" alt="CSD" border="0"></a></td>
</tr>
<tr>
<td>
<a href="http://trane.com/Default.asp" target="_blank"><img src="images/global_sponsors_04.jpg" width="163" height="71" alt="Trane" border="0"></a></td>
</tr>
<tr>
<td>
<a href="http://www.****ersonandassociates.com/" target="_blank"><img src="images/global_sponsors_05.jpg" width="163" height="98" alt="****erson_And_Associates" border="0"></a></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>
</div>
<div id="footer_global">
<!-- ImageReady Slices (global_footer.psd) -->
<table id="Global_Footer" width="812" height="140" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9">
<img src="images/global_footer_01.jpg" width="479" height="17" alt=""></td>
<td rowspan="3"><img src="images/global_footer_02.jpg" width="164" height="93" alt="" /></td>
<td rowspan="3">
<a href="index.html"><img src="images/global_footer_03.jpg" width="169" height="93" alt="Brought_To_You_by_NACDB" border="0"></a></td>
</tr>
<tr>
<td>
<a href="info_building_main.html"><img src="images/global_footer_04.jpg" width="105" height="21" alt="Building_A_Church" border="0"></a></td>
<td>
<img src="images/global_footer_05.jpg" width="3" height="21" alt=""></td>
<td>
<a href="info_qualifications_main.html"><img src="images/global_footer_06.jpg" width="92" height="21" alt="Our_Qualifications" border="0"></a></td>
<td>
<img src="images/global_footer_07.jpg" width="4" height="21" alt=""></td>
<td>
<a href="info_resources_main.html"><img src="images/global_footer_08.jpg" width="90" height="21" alt="Church_Resources" border="0"></a></td>
<td>
<img src="images/global_footer_09.jpg" width="3" height="21" alt=""></td>
<td>
<a href="info_about_main.html"><img src="images/global_footer_10.jpg" width="67" height="21" alt="About_NACDB" border="0"></a></td>
<td>
<img src="images/global_footer_11.jpg" width="3" height="21" alt=""></td>
<td>
<a href="info_contact_main.html"><img src="images/global_footer_12.jpg" width="112" height="21" alt="Contact_Us" border="0"></a></td>
</tr>
<tr>
<td colspan="9">
<img src="images/global_footer_13.jpg" width="479" height="55" alt=""></td>
</tr>
<tr>
<td colspan="11">
<img src="images/global_footer_14.jpg" width="812" height="47" alt="Copyright_Information"></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>
</div>
</body>
</html>
Hi all, I have a 2-column layout for my web pages plus a header and footer section. The left column contains a navigation menu (which grows and shrinks depending on the current menu selection), and the right column contains the main text and other information. I float the nav menu left. No problem. But when the footer is displayed (and I have set "clear: both" on the footer element to try and keep it at the bottom), it will appear somewhere in the middle of the menu in cases where the menu is long (vertically) and the main content area contains only a few lines of text. My current method to drop the footer below the menu is very klunky, and probably what most people do (unless they know of a better way). Yes, the series of <br /> tags before printing the footer. Is there a better way of ensuring that the footer is placed where it should (below all other content) so I don't have to insert all those <br /> tags? My CSS for the page layout is: Code: #doc { /* Main document area */
margin-left: 5%;
margin-right: 5%;
margin-top: 5px;
border: solid 1px #900;
}
#logo {
text-align: center;
background: #c30000;
}
#main {
margin-left: 150px;
margin-right: 0%;
padding: 10px;
border-left: solid 1px #c00;
background: #fff;
color: #000;
}
#nav {
position: absolute;
margin-left: 0%;
float: left;
padding: 0px;
border: 0px;
top: 110px;
width: 150px; /* Same as margin-left setting in #main */
color: #000;
}
#footer {
clear: both;
margin-left: 0%;
margin-right: 0%;
border-bottom: 2px solid #906;
background-color: #c00;
color: #ddd;
font-weight: bold;
text-align: center;
line-height: 1.5;
}
And a typical html page would be structured thusly: Code: <!-- USUAL HTML BEGINNING STUFF HERE -->
<body>
<div id="doc">
<!-- Logo image -->
<div id="logo">
<!-- LOGO GOES HERE -->
</div>
<!-- Main content window -->
<div id="main">
<!-- MAIN CONTENT GOES HERE -->
</div>
<!-- Navigation menu -->
<div id="nav">
<!-- NAV MENU CODE HERE -->
</div>
<!-- footer -->
<div id="footer">
<!-- FOOTER CODE HERE -->
</div>
</div>
</body></html>
Is my CSS coding incorrect, or is this a universal problem? Any help/suggestions will be much appreciated. Hi - I've got an issue with the positioning on my footer - It displays at the top of the page (underneath the top content and stuff) when I want it to display at the end of my main DIV - #wrapper. here's my css: Code:
/* WRAPPER corresponds to the container that surrounds all the content (navigation, text, etc.) */
#wrapper {
position: absolute;
width: 768px;
left: 0px;
top: 0px;
background-color: #FFFFFF;
}
/*BEGIN content elements (display within the wrapper - in theory) */
.inner_header {
position: absolute;
top: 4px;
width: 565px;
}
.inner_content {
position: relative;
top: 126px;
left: 189px;
width: 515px;
}
.inner_headline {
position: absolute;
top: 94px;
left: 189px;
width: 350px;
font-family: verdana;
font-size: 11pt;
font-weight: bold;
color: #000066;
}
.inner_top_right {
position: absolute;
left: 565px;
top: 4px;
width: 203px;
}
.inner_searchbox {
position: absolute;
top: 250px;
left: 7px;
width: 166px;
}
.inner_topbar {
position: absolute;
width: 768px;
height: 4px;
background-color: #1f295c;
}
/*END content */
/* HERE's the part I want to display at the END of all other loaded content. */
#footer {
width: 768px;
margin-top: 0px;
}
Here's the HTML: Code: <div id="wrapper">
<div class="nav">
<?php include "nav.php"; ?>
</div>
<div class="landing_page">
<?php include "land.php"; ?>
</div>
<h1><?php echo $message; ?></h1>
<div class="header">
<?php include "header.php"; ?>
</div>
<div class="searchbox">
<?php include "searchbox.php"; ?>
</div>
<div class="featured_jobs">
<?php include "featjobs.php" ?>
</div>
</div> <!--close the wrapper-->
<div id="footer">
<?php include "footer.php"; ?>
</div>
Thank you in advance for considering my question. -Taylor |
|||||||