|
CSS - Footer Sitting In The Middle Of Page Til Refresh
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! Similar Tutorialsi have a two div tags but the upermost tag sits outside the boundary of the one below and the page seems to be over stretched in IE7 the page address is www.ftpimage.com does anyone have any suggestions my css is as follows Code: body {
margin: 0px;
background: url(../img/top_bg.gif);
background-repeat: repeat-x;
font-family: Verdana, Arial, sans-serif;
font-size: "15";
}
p {
line-height: 50px;
margin: 11px 0 10px 0;
padding: 0px;
}
h2 {
color: #9f9f9f;
margin:0px;
padding:0px;
font-size: 15px;
}
ul {
font-size: 10px;
margin:0;
padding:0;
list-style-image: url(../img/bullet.gif);
}
a {
color: #93B300;
}
a:hover {
text-decoration: none;
}
blockquote{
background: #F7FDE3;
color: #606060;
padding: 0px;
}
/**** Main Container ***/
#wrap {
margin-left: 10px;
margin-right: auto;
width: 640px;
}
/**** Top ***/
#top {
width: 155%;
height:85px;
color: #fff;
background: #000 url(../img/top_bg.gif);
overflow:hidden;
}
#top h2
{
color: #87CEFA;
letter-spacing: 3px;
font-size: 2.4em;
font-weight: normal;
position: relative;
margin: 0px;
top: 33px;
display: block;
float: left;
background: url(../img/bg_t.gif) no-repeat;
padding-left: 8px;
}
#top h2 a {
color: white;
text-decoration: none;
}
#top h2 a:hover {
color: #93B300;
}
#page
{
margin-right: 20px;
max-width: 10px
}
/**** Main Menu ***/
#menu {
display: block;
float:right;
}
#menu ul {
margin: 0;
list-style: none;
}
#menu li {
display: block;
float: left;
white-space: nowrap;
}
#menu li a {
display: block;
padding: 20px 10px 12px 20px;
text-decoration: none;
color: #fff;
font-weight: bold;
}
* html #menu a {width:1%;}
#menu li a:hover {
background: url(../img/bg_menu.gif);
}
#menu li a.current {
letter-spacing: 1px;
color: gray;
background: url(../img/bg_menu.gif);
}
#menu li a.current:hover {
color: #fff;
}
/**** Content Container ***/
#content {
width: 65%;
margin-top:30px;
border: solid 2px black;
}
#content h2 {
margin: 0;
padding: 10px 0 10px 0;
}
/**** Content ***/
#left ul {
padding: 15px 0 15px 35px;
margin:0;
}
#left li {
margin-bottom:5px;
}
#left .box {
width: 390px;
float:left;
display: block;
margin-left: 20px;
display: inline;
}
/**** Sidebar ***/
#right {
width: 315px;
float: right;
display:block;
margin-top: 10px;
}
#right .box {
width: 20em;/*280px*/
background: #87CEFA;
border: 1px solid #E1E1E1;
padding:10px 10px 55px 10px;
float: right;
}
#right .box h2 {
font-size: 3.1em;
margin: 0px 0 0px 0;
padding:0px 0 5px 0;
}
#right .box a {
margin: 10px 0 10px 0;
color: #93B300;
font-size: 20px;
}
#right .box p {
margin: 5px 0 10px 0;
line-height: 15px;
}
#right .box ul {
padding: 0 0 0px 20px;
margin:10px 0 10px 0;
}
#right .box li {
margin-top:5px;
}
html>body .box
{
width: auto;
min-width: 20em;
}
#nav{ list-style: none; margin: 2.0em 0; width: 25em; float: right;}
#nav li{ padding: 0; margin: 0; }
#nav a{
display: block;
height: 2.0em;
padding: 0.3em 0.3em 0.3em 0.8em;
border:solid;
border-width:medium;
border-bottom: 2px; /*solid #1a1a1a*/
border-top: 2px; /*solid #1a1a1a*/
border-color:Black;
color: black;
background-color: #87CEFA;
font-weight: bold;
text-decoration: none;
font-size:medium
}
#nav a:hover{
color: #1a1a1a;
background: url(../img/bg_t.gif) no-repeat;
background-color: #fff;
font-weight: bold;
}
/**** Clear Div ***/
#clear {
display: block;
clear: both;
width: 100%;
height:1px;
overflow:hidden;
}
/**** Footer ***/
#footer {
margin: 40px auto 0 auto;
text-align: center;
border-top: dotted 1px gray;
padding: 20px 0 20px 0;
width: 70%;
}
#footer p {
margin: 0px;
padding: 0;
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. Hi 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! 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. Hi, I want to repeat a background image (actually, its just a colour) from 50% of the page. i.e. I want one side of my site to be of blue background (the left 50%) and the other side to be of grey background (the right 50%). | Blue | Grey | | Blue | Grey | | Blue | Grey | | Blue | Grey | So let's say the background of my site is blue all over. Code: <body> <div id='greybg'> </div> </body> But the particular div is set to something like: Code:
#greybg {
background-image: url("../images/body/greylong.gif");
background-repeat: repeat-x;
background-position: 50% 0%;
}
This code doesn't work though. The repeat-x property makes it repeat all throughout, whereas what I want is for the image to repeat STARTING FROM 50% of the middle of the page (i.e. the second 50% column of the page). Any way I can achieve this? TIA I am try to make a page that is similar to outlooks calendar page for a day. The page would have a scrollbar that scrolls from 12am to 12am(next day), but the initial position is 8 am instead of 12am. I can set an anchor and make sure the page opens to that anchor, but it is an awkward solution and might cause some linking problems. Anyone know who to do this? Hi Um basically I have 2 divs inside in another main layout div, and basically i cant get them to sit to there is no space between them in IE, in firefox its fine. if you go here and open it in firefox then IE you'll see what i mean, any ideas? Html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html> <head> <title>lost layout test</title> <link rel="stylesheet" type="text/css" href="layout.css" /> </head> <body> <div id="outerBox"> <div id="topBox"> <div id="leftTop">left part1</div> <div id="rightTop">right part1</div> </div> </div> </body> </html> CSS: (not all is used in this example) Code:
body {
background: url("images/grad_bg.jpg");
background-color: #d53e3e;
background-repeat: repeat-x;
text-align: center;
}
#outerBox {
width: 700px;
height: 800px;
margin-left: auto;
margin-right: auto;
background-color: purple;
padding: 0px;
margin-top: 0px;
border: 0px;
}
#topBox {
width: 700px;
height: 200px;
color: white;
text-align: left;
padding: 0px;
margin: 0px;
background-color: green;
border: 0px;
}
#leftTop {
width: 500px;
height: 200px;
background-color: pink;
padding: 0px;
margin: 0px;
float:left;
border: 0px;
}
#rightTop {
height: 200px;
margin-left: 500px;
background-color: orange;
padding: 0px;
border: 0px;
}
#bodyBox {
width: 700px;
height: 540px;
color: red;
background-color: blue;
float:left;
text-align:left;
}
#leftContent {
width: 500px;
height: 540px;
background-color: blue;
}
#rightContent {
width: 200px;
height: 540px;
background-color: grey;
float:right;
}
#footBox {
height: 60px;
width: 700px;
color: red;
text-align: left;
background-color: black;
float:right;
}
I have a div that should be sat at the bottom of its containing div (absolute positioned, bottom: 0, right 0) and it does so in Firefox, but in IE it is raised by about 20px or so. Any help to iron this out would be great. The page and its effects can be seen at www.prioritypie.f2s.com/KSA/KSA6/index.htm and the css at www.prioritypie.f2s.com/KSA/KSA6/styles/KSA6style.css It's the "menuContainer" div which isn't sitting right, nested in the "header" div. Many thanks for any help Hi, As you no doubt can tell from the title of this thread I'm a newb. I'm familiar with html but moving into learning css. Self taught, I no doubt have a lot to learn but I'm attempting to alter a template and would really appreciate some assistance. The site is www . inspirationz . info. I look at the site on my main monitor which is a large one and all looks fine. The two boxes in the main content area sit side by side, however when I look at it on my laptop or on a smaller monitor the navigation box on the right appears to sit still to the right, but beneath the box on the left. It didn't appear this way in firefox browser at first on my laptop, only Internet Explorer, but it appears that way on my other pc monitor in firefox so I assume it's likely to be a coding error. I have included some of the stylesheet coding below. Is anyone able to help me work out what's causing this? Thank you in advance. /*================================================================ Typography and links ==================================================================*/ a:link, a:visited { color: #999999; text-decoration: none; } h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, .sidebar_nav a { text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-size: 1em; font-weight: bold; letter-spacing: .16em; } .featured h2 { font-size: 1.8em; font-weight: normal; text-transform: uppercase; } .post_header h2 {font-size: 1.2em; font-weight: normal; margin-top: 10px;} .post_header_page h1, .post_header_single h1 { font-size: 2em; font-weight: normal; text-transform: uppercase; } #footer h3 {margin-bottom: 25px; border-bottom: 1px dotted gray; padding: 5px;} .featured p { font-size: .8em; font-style: italic; } p { margin: 15px 0px; } .post_body_page p, .post_body_single p {margin: 0; padding: 15px 0px;} small { font-size: 0.8em; font-style: italic; } strong {font-weight: bold;} .post_body p { font-size: 1em; margin: 10px 0px; } .more { margin-top: 10px; margin-right: -10px; float: right; } .more_big { margin-top: -20px; margin-right: 20px; float: right; width: 139px; height: 73px; } .footer_comments { float: left; margin-left: 20px; margin-top: 20px; } .comment_count { font-weight: bold; font-size: 1.8em; } .featured_datetime {margin: 6px 0px} .featured_more { float: right; font-weight: bold; margin-right: 20px; text-decoration: underline; } .post_body_page ol, .post_body_single ol { list-style-type: upper-roman; margin: 30px 0px; } .post_body_page ol li, .post_body_single ol li { list-style-type: upper-roman; margin-left: 60px; } .post_body_page ul, .post_body_single ul { list-style-type: upper-roman; margin: 30px 0px; } .post_body_page ul li, .post_body_single ul li { list-style-type: disc; margin-left: 60px; } blockquote { margin: 0px 30px; padding: 20px; border: 1px dotted gray; font-style: italic; } /*================================================================ Site Structure ==================================================================*/ body { font-size:100%; line-height:1.125em; font-family: Georgia, "Times New Roman", Times, serif; background-color: #f0f0f0; background-image: url(images/index/body.jpg); background-repeat: repeat-x; color: #7C7C7C; } #page_wrapper { width: 976px; margin: 0px auto; position: relative; } #featured { height: 230px; margin-right: 3px; margin-bottom: 30px; border: 0px solid red; padding: 15px; background-image: url(images/index/featured.jpg); background-repeat: no-repeat; } #header { width: 667px; margin: auto; height: 109px; background-image: url(images/index/header.jpg); } #container { width: 990px; margin: 140px auto; font-size:0.875em; } #main_content_left_index { width: 600px; float: left; } #main_content_left { width: 600px; float: left; } #main_content_right { width: 343px; float: right; } #footer { height: 250px; padding: 130px 130px 50px 130px; margin: auto; clear: both; background-color: #eeefef; background-image: url(images/index/footer.jpg); background-repeat: repeat-x; background-position: top; } #footer_contents {width: 990px; margin: auto;} #footer_left {width: 460px; margin: auto; float: left;} #footer_right {width: 460px; margin: auto; float: right;} /*================================================================ The columns ==================================================================*/ #first_column { float: left; width: 280px; } #second_column { float: right; width: 280px; } /*================================================================ The posts ==================================================================*/ .posts { background-image: url(images/index/posts.jpg); height: 333px; width: 275px; margin-bottom: 60px; } .post_header { height: 38px; width: 255px; padding: 10px; border: 0px solid red; } .post_body { width: 255px; height: 180px; padding: 10px; overflow: hidden; font-size: .9em; } .post_footer { height: 58px; width: 275px; margin-top: 15px; } .post_header_page, .post_header_single { background-image: url(images/index/PostHeaderPage.jpg); height: 38px; width: 547px; padding: 25px; text-align: center; } .post_body_page, .post_body_single { background-image: url(images/index/PostBodyPage.jpg); background-repeat: repeat-y; width: 547px; padding: 0px 25px; } .post_footer_page, .post_footer_single{ clear: both; background-image: url(images/index/PostFooterPage.jpg); height: 90px; width: 477px; margin-bottom: 20px; padding: 0px 60px; font-style: italic; } .next_prev { border: 0px dotted gray; height: 29px; clear: both; margin-bottom: 20px; background-image: url(images/index/next_prev_posts.jpg); width: 577px; padding-top: 10px; padding-right: 10px; padding-left: 10px; } .next_prev_comments { border: 0px dotted gray; height: 29px; clear: both; margin-bottom: 20px; background-image: url(images/index/next_prev_comments.jpg); width: 535px; padding-top: 10px; padding-right: 10px; padding-left: 10px; } /*================================================================ The sidebars ==================================================================*/ .sidebar_header { background-image: url(images/index/sidebar_header.jpg); height: 91px; width: 340px; } .sidebar_body { display: block; float: left; margin:0 0 0px 0; width: 290px; padding: 25px; background: url(images/index/sidebar_body.jpg) repeat-y; } .sidebar_bottom { background-image: url(images/index/sidebar_footer.jpg); height: 56px; width: 340px; clear: both; margin-bottom: 40px; } /*================================================================ Sidebar Navigation ==================================================================*/ .sidebar_nav ul {} .sidebar_nav li {} .sidebar_nav ul li { display: block; padding: 4px; border-bottom: 1px dotted #515151; font-size: .8em; } .sidebar_nav ul ul li {margin-left: 10px; border-bottom: none; font-size: 1em;} .sidebar_nav ul ul ul li {margin-left: 10px;} .sidebar_nav { margin-bottom: 20px; } .sidebar_nav ul { } .sidebar_nav a {display: block; padding: 4px; } .sidebar_nav a:link, #navlist a:visited { color: #666666; text-decoration: none; } .sidebar_nav a:hover { background: #d8d8d8 } /*================================================================ Top navigation ==================================================================*/ #top_nav_menu { position: absolute; top: 132px; left: 0; width: 950px; } /***** drop menu *****/ #dropmenu, #dropmenu ul { list-style-positionutside; position:relative; line-height:1.5em; z-index:300; width:100%; font-weight: normal; letter-spacing: .18em; margin: 0px 0px 0px 0px; } #dropmenu a { display:block; padding: 5px 15px; text-decoration:none; color: #666666; font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; letter-spacing: .18em; } #dropmenu a:hover { color:#000; text-decoration: underline; } #dropmenu li { float:left; position:relative; } #dropmenu ul { position: absolute; display: none; width: 18em; top: 1.9em; left: 0px; } #dropmenu ul a { background: url(images/index/dropmenu_bg.png) } #dropmenu ul a:hover { } #dropmenu li ul { width:14.1em; margin-top: 4px; } #dropmenu li ul a { width: 250px; height: auto; float: left; } #dropmenu ul ul { top:auto; } #dropmenu li ul ul { left: 265px; margin:0px 0 0 10px; } #dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul { display:none; } #dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul { display:block; } /*================================================================ Categories Navigation ==================================================================*/ #main_categories { margin: auto; height: 20px; width: 976px; margin-bottom: 30px; } /* Horizontal Category List (frontpage) */ ul.horizontal_categories { clear: both; } .horizontal_categories li { display: inline; background: url(images/index/cat_bullet.png) no-repeat right center; font-size: 1.2em; font-weight: bold; letter-spacing: .08em; } .horizontal_categories a { padding: 0px 25px; } .horizontal_categories a:link, .horizontal_categories a:visited { } .horizontal_categories a:hover { } Hi all... I'm designing a website based on this structure by Paul O'Brien: http://www.pmob.co.uk/temp/fixedlayoutexample6.htm It's working fine, except for one thing... the first time the page loads in IE6, the content div is offset about 5px to the left - see screenshot 1 (I've made it a nasty green, so it's obvious) When you hit refresh, it corrects itself and displays perfectly. (screenshot 2) Is this a known bug in IE? Or is it a problem in the design? I'm trying to get my page to format correctly in IE. It looks fine in firefox, but in IE when the page is first loaded the footer isn't at the very bottom of the window. If I refresh the screen it drops down to the bottom and it looks fine. Here is my HTML and CSS. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./nmi.css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Client Server NMI</title>
</head>
<body>
<!-- TitleBar -->
<div id="titleBar">
<div id="titleImg">
<img src="./title_csnmi.jpg" alt="title image">
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
<div class="titleLinks">
<a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a>
</div>
</div>
<!-- Clear out the float settings -->
<div class="clearDiv"></div>
<!-- Main Page -->
<div id="container">
<div id="iframe">
<iframe src="foo.html" name="main" frameborder=0 width=100% height=100%></iframe>
</div>
<div id="navBar">
<h4>Interface Menu</h4>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
<a href="./link">link</a>
</div>
</div>
<div class="clearDiv"></div>
<div id="footer">
Client Server NMI - MEDITECH
</div>
</body>
</html>
Code:
html{
margin:0;
padding:0;
}
body{
margin: 0;
padding: 0;
font-family: Verdana;
font-size: 12px;
color: black;
}
/*Title Navigation bar */
#titleBar{
position: absolute;
top:3px;
width: 100%;
padding:5px 0 5px 0;
border-bottom:2px solid gray;
border-top:2px solid gray;
}
#titleImg{
position:relative;
margin:10px 40px 0 5px;
float:left;
}
img{
text-decoration:none;
border:0;
}
.titleLinks{
position:relative;
float:left;
margin-left:2px;
padding:5px 15px 0 15px;
border:1px solid gray;
width:auto;
height:auto;
}
.clearDiv{
clear:both;
}
/*Main Div*/
#container{
position:absolute;
margin:0;
padding:0;
top:100px;
width:100%;
height:74%;
}
#iframe{
position:relative;
margin:0;
padding:0;
width:85%;
height:100%;
float:left;
}
/*Side Navigation bars*/
#navBar{
position:relative;
float:left;
margin-left:10px;
width:13%;
font-size:10px;
border-left:1px solid #333366;
border-right:1px solid #333366;
border-bottom:4px solid #333366;
}
#navBar h4{
margin:0;
padding:2px 3px 2px 0;
background-color:#333366;
font-size:1em;
color:#EEEEEE;
text-align:right;
}
#navBar a{
display:block;
text-decoration:none;
color:black;
background-color:#EEEEEE;
padding:4px 2px 4px 8px;
}
#navBar a:hover{
background-color:#333366;
font-weight:bold;
color:white;
}
/* Footer */
#footer{
position: absolute;
width: 100%;
bottom:0;
left:0;
font-size:.75em;
text-align:right;
background-color:#333366;
color:white;
}
http://wdcb.org/newsite/ Having some difficulty here in putting the footer at the bottom of the page. I've looked at dozens of help tools, and none of them work. I'm obviously missing something. Page code: Code:
<html>
<body>
<div id="header">
<?php include('includes/menu_new.inc'); ?>
</div>
<div id="leftcol">
<div class="element">
<img alt="" src="../images/buttons/PledgeNow.jpg">
<p>This is what text underneath would look like. I know that some of our boxes on the right side can do this so we want to make sure it looks right.</p>
</div>
<div class="element">
<b>PLEDGE NOW</b>
</div>
<div class="element">
<b>PLEDGE NOW</b>
</div>
</div>
<div id="content">Content Section dfsdf dfdf fsdf dfsdf sdfsd ghh ghgh hghtr ytgdf gfdfgdf </div>
<div id="rightcol">
<div class="element">
<a href="http://iRockJazz.com/" target="_blank"><img alt="" border=0 src="../images/ads/iRJ_wdcb_tile_199pix.jpg"></a>
</div>
<div class="element">
<img alt="" src="../images/mini-headers/MiniHeader-FolkRoots.jpg" width="200">
<p>
Our days may be dedicated to jazz, but during the evenings it's all about the folk! WDCB plays more folk and acoustic roots music than any other station in Northern Illinois.
<br><br>
<a href="programming/progfolkroot.php">Click here</a> to learn more.
</p>
</div>
</div>
<div id="footer">
<?php include('includes/footer.inc'); ?>
</div>
</body>
</html>
CSS code: Code:
#header {
position: absolute;
top: 5px;
left: 5px;
width: 1000px;
height: 182px;
}
#leftcol {
background: #f00;
position: absolute;
top: 187px;
left: 0px;
width: 235px;
}
#leftcol .element {
margin-bottom:15px;
}
#leftcol p {
margin-left:5px;
}
#content {
background: #ccc;
position: absolute;
top: 187px;
left: 250px;
width: 540px;
}
#rightcol {
background: #f00;
position: absolute;
top: 187px;
left: 800px;
width: 200px;
}
#rightcol .element {
margin-bottom:15px;
}
#rightcol p {
margin-left:5px;
}
#footer {
position:fixed;
bottom:0px;
width:1000px;
height:100px;
background:#005288;
}
Thank you in advance for your help. In a basic CSS single column layout with Header, Content, Footer div structure, where the page background image is defined in the Body CSS, is there a way to specify that below the Footer div, the page background does not show? Hey all, I am creating a site which sells Three 3G Mobile Phones and at the bottom of the pages i have a footer which is included into each page, see here. If you view the site in Firefox then the footer is in the correct place and rests just where the main content finishes. However in IE the footer is miles down the page creating a box effect arround the content which to be honest looks crap. If anyone would be so kind as to give me an idea why this is happening then i would be very grateful. Also, there are many sites around which give tutorials etc about text decoration and such with CSS, but i am yet to find a really good begginers tutorial on how to layout a page with CSS and Divs, does anyone know of one? Thanx for reading. CSS Code (siteInfo is the footer in question: Code:
#masthead{
padding: 0px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}
#navBar{
float: left;
width: 15%;
margin: 0px;
padding-right: 2px;
height: 100%;
}
#headlines{
float:right;
width: 45%;
padding-right: 2px;
}
#content{
float: left;
width: 70%;
padding: 0px 0px 0px 0px;
background-color: #FFFFFF;
position: inherit;
}
#siteInfo{
clear: both;
font-size: 75%;
color: #FFFFFF;
padding: 10px 10px 10px 10px;
text-align: center;
background-color: #CCCCCC;
border-top: 1px solid #107FA4;
position: relative;
font-weight: bold;
}
Edited to add CSS. Hi, I've just reworked my site, and I'm having trouble keeping the footer at the bottom of the page. my site stylesheet (see div#footer) Any ideas? I've tried setting body min-height (and height for ie) to 100% and setting position:absolute; bottom:0px; but that didn't work. Hello everyone I have a problem with keeping a footer at the bottom of a page. It hovers over other elements in Firefox 3.6.6 Also I'd like to have the footer at the right side and not centered. If I define "right" however, part of it disappears in IE. The style sheet is no from me. I would appreciate, if someone were kind enough to have a look and help me. Thanks in advance for any input Eva Here it is: /***********************************************/ /* 3col_leftNav.css */ /* Use with template 3col_leftNav.html */ /***********************************************/ /***********************************************/ /* HTML tag styles */ /***********************************************/ body{ background-image: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/head6.png); background-repeat: no-repeat; background-position: left top; font: 13px Verdana, Arial, Helvetica, sans-serif; /* size: 100%; */ color: #333333; line-height: 1.3; margin: 0px; padding: 0px; } img{ border: 0; } a{ color: #006699; text-decoration: none; } a:link{ color: #006699; text-decoration: none; } a:visited{ color: #006699; text-decoration: none; } a:hover{ color: #006699; text-decoration: underline; font-weight: bold; } h1{ font-family: Verdana,Arial,sans-serif; font-size: 114%; color: black; margin: 0px; padding: 0px; } h2{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: black; margin: 0px; padding: 0px; } h3{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: black; margin: 0px; padding: 0px; } h4{ font-family: Verdana,Arial,sans-serif; font-size: 100%; font-weight: normal; color: #333333; margin: 0px; padding: 0px; } h5{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: #334d55; margin: 0px; padding: 0px; } ul{ list-style-type: square; } ul ul{ list-style-type: disc; } ul ul ul{ list-style-type: none; } label{ font-family: Arial,sans-serif; font-size: 100%; font-weight: bold; color: #334d55; } table{ padding: 5 px; } /***********************************************/ /* Layout Divs */ /***********************************************/ #masterhead{ padding: 30px 0px 0px 0px; /* border-bottom: 1px solid #cccccc; */ width: 950px; } #navBar{ float: left; width: 195px; margin: 0px; /* 19.08.2008 padding-top: -5px;*/ padding-top: -5px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; /* background-color: #e4f2f9; */ /* 19.08.2008 border-right: 1px solid #cccccc; */ } #headlines{ position: absolute; left: 690px; top: 135px; font-size: 85%!important; /* font-size: 90%; */ /* float:right; */ width: 230px; margin-top: -30px; /* border-left: 1px solid #cccccc; */ /* border-bottom: 1px solid #cccccc;*/ /* padding-right: 10px; */ } #headlines h3{ margin-top: 3px; margin-bottom: 3px; margin-left: 10px; padding-top: 1px; padding-bottom: 1px; font-weight: 900; } #content{ float: left; padding-left: 24px; width: 460px; font-size: 107%; line-height: 1.4; /* position: absolute; top: 184px; left: 210px; */ } #content h1,h2 { margin: 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 0px; font-size: 130%; font-color: black; } #content h3 { margin: 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 0px; font-size: 120%; font-height: 90%; font-weight: 900; } /***********************************************/ /* Components */ /***********************************************/ #siteName{ margin: 0; padding-top: 0px; padding-right: 0; padding-bottom: 0; padding-left: 200px; /* font-size: x-large; */ color: #FF9900; } /************* #globalNav styles **************/ #globalNav{ /* border-bottom: 1px solid #CCC; */ color: #006699; text-align: center; /* font-weight: bold; */ margin-top: 40px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 10px; /* 19.08.2008 border-top: 1px solid #cccccc; */ } #globalNav img{ display: block; } #globalNav a { /* font-size: 120%; */ padding: 0 4px 0 0; } /*************** #pageName styles **************/ /* #pageName{ margin: 0px; padding-top: 30px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; } */ /************* #breadCrumb styles *************/ #breadCrumb{ font-size: 80%; padding: 2px 0px 0 10px; } /************** .feature styles ***************/ .feature{ padding: 2px 2px 10px 10px; font-size: 80%; } .feature h3{ padding: 30px 0px 5px 0px; text-align: center; color: #006699; } .feature img{ float: left; padding: 10px 10px 0px 0px; } /************** .story styles *****************/ .story{ clear: both; font-size: 80%; padding-top: -40px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .story p{ padding: 0px 0px 10px 0px; } /************* #siteInfo styles ***************/ #siteInfo{ font-size: 75%; color: #cccccc; padding: 10px 10px 10px 10px; text-align: right; border-top: 0px none #cccccc; /* border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; */ } #siteInfo img{ padding: 4px 4px 4px 10px; vertical-align: middle; } /************* #search styles ***************/ #search{ padding: 5px 0px 5px 10px; border-bottom: 1px solid #cccccc; font-size: 90%; } #search form{ margin: 0px; padding: 0px; } #search label{ display: block; margin: 0px; padding: 0px; } /*********** #navBar link styles ***********/ #navBar ul a:link, #navBar ul a:visited {display: block;} #navBar ul {list-style: none; margin: 0; padding: 0;} /* hack to fix IE/Win's broken rendering of block-level anchors in lists */ #navBar li {border-bottom: 1px solid #EEE;} /* fix for browsers that don't need the hack */ html>body #navBar li {border-bottom: none;} /*********** #sectionLinks styles ***********/ #sectionLinks{ position: relative; margin: 0px; padding: 0px; /* border-bottom: 1px solid #006699; */ font-size: 90%; } #sectionLinks h3{ padding: 10px 0px 2px 10px; } #sectionLinks a { display: block; /* border-top: 1px solid #006699; */ padding: 2px 0px 2px 10px; } #sectionLinks a:hover{ /* background-color: #dddddd;*/ } .navigate { overflow: hidden; width: 204px; padding-bottom: 1px; } /**Navigation Menu **/ .navigate ul, .navigate li { list-style: none; margin: 0px 0px!important; padding: 0px 0px!important; line-height: 1.5em; } /**erste Navigationseben**/ .navigate li.current span, .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active { display: block; border: 0; border-bottom: 1px solid #86c2e3; border-top: 1px solid #fff; border-right: 1px solid #86c2e3; width: 100%; text-decoration: none; margin: 0; padding: 5px 5px 5px 15px; font-size: 1.0em; font-weight: bold; } .navigate[class] li.current span, .navigate[class] li a, .navigate[class] li a:link, .navigate[class] li a:visited, .navigate[class] li a:hover, .navigate[class] li a:focus, .navigate[class] li a:active { width: auto; } .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_0.png) #e4f2f9 no-repeat 0px 0px; padding: 5px 5px 5px 15px; color: #000; font-weight: bold; } .navigate li a:hover, .navigate li a:focus, .navigate li a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_1.png) #e4f2f9 no-repeat 0px 0px; } .navigate li.current span, .navigate li.current a, .navigate li.current a:link, .navigate li.current a:visited, .navigate li.current a:hover, .navigate li.current a:focus, .navigate li.current a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px; color: #000; } .navigate li.current a.current, .navigate li.current a.current:link, .navigate li.current a.current:visited, .navigate li.current a.current:hover, .navigate li.current a.current:focus, .navigate li.current a.current:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px; color: #000; } /*********** .relatedLinks styles ***********/ .relatedLinks{ position: relative; margin: 0px; padding: 0px 0px 10px 10px; font-size: 90%; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a:link, .relatedLinks a:visited { display: block; } /************** #advert styles **************/ #advert{ padding: 30px 0px 10px; } #advert img{ display: block; } /************** #headlines styles **************/ #headlines{ margin: 0px; padding: 10px 0px 20px 10px; } #headlines p{ padding: 5px 0px 5px 0px; } /**Footer**/ #footer { clear: both; position: relative; border-top: 4px solid #CCECF4; font-size: 11px; padding: 4px 4px 8px 10px; margin-top: 4px; bottom:0; zoom: 1; } #footer .left { float: left; width: 700px; bottom:0; } #footer .right { float: right; width: 150px; text-align: right; margin-top: -2.3em; zoom: 1; position: relative; z-index: 0; bottom:0; } #footer p { color: #000 !important; padding: 0; margin: 0; bottom:0; } #footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:focus, #footer a:active { color: #306479; text-decoration: none; font-weight: bold; } #footer a:hover, #footer a:focus { text-decoration: underline; } #navispalte { font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; width: 202px; float: left; } Hello, I've had an issue for a while where when the text on the page gets to a certain point it just overlaps the Copyright Information which I want to stay at the bottom of the page. --- (I did look at older forum posts, but with no resolve) --- In the CSS code, I have the copyright (a.k.a. .footerlinks) set with an "Absolute" Position which I know is probably "part of" or "the" problem, but if I change the Positioning the footer ends up on the top of the page or somewhere I don't want it. (** Unfortunately due to New Members not being able to post hyperlinks I am unable to give a link to the webpage or CSS page for viewing. **) But, I have included the code snippet I use for the Footer itself and the "container" and "body" code whether its needed..... body{ margin:0; text-align:center; background-color: #FFFFFF; } .container{ position: relative; width:965px; margin:0 auto 0; height: 100%; } .footerlinks{ position: absolute; top: 1140px; left: 237px; width: 551px; font-size: 75%; font-family: verdana; text-align: center; } CSS is quite new to me so be as specific as possible as to what I should be looking at changing in my code.... Your assistance is much appreciated! Thanks! Dan - hey all, i have a strange problem... When the page opens the footer appears on top of the page content but if i refresh the page it goes to the bottom as expected?? really wierd can someone please help me with this? here is the page lin to see what i mean page with the problem and here is a link to me css css page Any ideas would be great. I am using firefox Thanks RF Greetings, My example page is located here. As you can see I'm having issues on the bottom of the page. I believe I know what is causing the issue, just not how to fix it. I need it only to work in IE and at a resolution of 1024x768 and higher. I have the footer outside of the other wrappers which are set to 100% height. But wrapper_04, which does not include the header, seems to be extending past the footer the same height as the header because it is trying to be the same height as the other parent wrapper elements? Any thoughts on how I can fix this using just CSS? I do have some js which sets the height of the content_wrapper so the background image extends the full height (yellow line image on the right of the page), but it should not be affecting the rest of the page. Thanks in advance for any assistance! Hi everyone, I'm having some trouble positioning this footer to the bottom of the page. I'd like for the footer box to display directly under the content/navigation bar, with a gap of four pixels between the respective boxes. In action: http://www.stabhead.com/css/index.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>Layout</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
color: blue;
text-align: center;
margin: 5px 0px 0px 0px;
}
#container {
position: relative;
width: 981px;
border: 0;
padding: 0;
margin: 0;
text-align: left;
}
#topbar {
position: absolute;
width: 981px;
height: 95px;
top: 0px;
background-color: #DDDDDD;
}
#loginbox {
position: absolute;
width: 249px;
height: 92px;
top: 97px;
background-color: #FFBD72;
}
#adbar {
position: absolute;
top: 97px;
left: 251px;
width: 730px;
height: 92px;
background-color: #949494;
}
#navbar {
position: absolute;
top: 193px;
left: 0px;
width: 117px;
background-color: #DDDDDD;
}
#content {
position: absolute;
top: 193px;
left: 121px;
width: 860px;
background-color: #DDDDDD;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 64px;
background-color: #DDDDDD;
}
-->
</style>
</head>
<body marginheight="0" marginwidth="0">
<div align="center">
<div id="container">
<div id="topbar">topbar</div>
<div id="loginbox">loginbox</div>
<div id="adbar">adbar</div>
<div id="navbar">navbar</div>
<div id="content">content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>
</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
The content may consist of something that is 500 pixels in height, or 10,000 pixels - it totally depends on how many words or images are in there, so the footer needs to grip on to the bottom of the content and stretch across the whole of the bottom of the page. If anyone could help me out here, it would be greatly appreciated. |
|||||||