Div align problem...

June 3, 201313 yr

Hi,

I currently have a problem with my design. I'm trying to align my footer to the bottom of my pages. On the index page it works well, however on all other pages the footer aligns to about 3/4 down of the page and overlaps with the other content. Does anyone have any suggestions on how to fix this problem? I've also attached a screen shot.

Thanks.

June 3, 201313 yr

Author

Here are 2 more screens. The red indicates the footer

June 3, 201313 yr

Hi It will be very helpful if you can post a link or if you can post your code

June 3, 201313 yr

Author

Hi,

Here's the HTML code for the footer section:

<div id="footer">
<p>- www.michael-li.ca -
<br>
All content and web design created by Michael unless detailed otherwise.</p>
<p>Powered by Justhost.com</p>
</div>

and here is the CSS code:

body, html {
margin:0;
padding:0;
height:100%;
width: 100%;
}

body {
background-color: #0e0e0e;
background-image: url(../bg2013.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
height:100%;
}

#footer {
width:100%;
height:99px;
z-index:1;
background-image: url(../footer_bg.png);
background-attachment: inherit;
background-repeat: no-repeat;
color: #FFF;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
text-align: center;
background-position: center;
left: 0px;
position: absolute;
bottom: 0px;
}

June 3, 201313 yr

I can't be sure, because I don't see your full code, but I think this happens because you have floating columns.

In this case the parent container doesn't expand to accommodate the columns you have there.

Your footer has an absolute position bottom 0. If your body is the parent container, it means it doesn't expand, and your footer shows at the bottom of the body, higher than it should be.

Here is a link to clearing method. http://css-tricks.com/snippets/css/clear-fix/

Again, I can't be sure that's the problem, I am just assuming your columns are floating and body is the parent element.

But hope the above helps.

June 3, 201313 yr

Author

Hi,

Sorry about the partial code. This time i'll paste the full html and css code i used for one of the pages. I thought about what you said about 'floating columns' though. i didn't write a #container div exactly, instead i replaced 'container' with 'content', although i am unsure if this will affect the source code any. Also (i think this affects it) what i did for certain pages was write in another floating container div, in this case called #pg_update with its own dimensions and within this div is all the content for this page.

Also, to make sure that all content centred itself within the browser, i attached 2 CSS pages with these dimensions. Could either of these be affecting the footer

Additional CSS:

===============

@charset "utf-8";
body {
    text-align: center;
    position: relative;
    min-height: 100%;
}
#wrapper {
    text-align: left;
    width: 994px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    top: 0px;
    min-height: 100%;
}

================

Source code HTML:

==============

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>.: ML - 3D Environment Artist :.</title>

<link href="_css/new_style.css" rel="stylesheet" type="text/css">

<link href="centred_in_browser.css" rel="stylesheet" type="text/css">

<link href="wrapper_centred.css" rel="stylesheet" type="text/css">

</style>
<style>
#pg_update {
    top: 140px;
    position: absolute;
    min-height: 100%;
    width: 960px;
    text-align: center;
}

table {
    border: none;
    width: 900px;
    box-shadow: 1px 1px 30px #000;
    top: 85px;
    position: absolute;
    left: 5%;
}

th {
    background-color: white;
    color: white;
    width: 25%;
    text-align: right;
    vertical-align: text-top;
    padding-right: 10px;
    padding-bottom: 50px;
    padding-top: 10px;
    font-family: Calibri, "Segoe UI", Tahoma;
    font-size: 18px;
    font-weight: bold;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-top-color: #478985;
    border-right-color: #478985;
    border-bottom-color: #000;
}

td {
    color: #CCC;
    width: 75%;
    vertical-align: text-top;
    text-align: left;
    font-size: 0.8em;
    font-family: Tahoma, Geneva, sans-serif;
    line-height: 1.6em;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #478985;
    border-bottom-color: #000;
}

.section1 {
background-color:rgba(0, 0, 0, 0.6);
}

.section2 {
background-color:rgba(0, 0, 0, 0.9);
}
</style>
</head>

<body>
<div id="wrapper">
<div id="header">
<ul id="MenuBar" class="MenuBarHorizontal">
<li><a href="index.html">portfolio</a></li>
<li><a href="updates.html">updates</a></li>
<li><a href="about.html">about</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>

<div id="logo">
<img src="logo2013.png" width="256" height="82">
</div>

<div id="pg_update">
<h1>UPDATES</h1>

<table cellpadding="0" cellspacing="0">

<tr>
<th class="section1">
WIP - Dragon's Pagoda
<br>
<p>June 6, 2013</p>
</th>

<td class="section1"> <p>Another scene i'm currently working on. This scene was inspired by the movie Kung Fu Panda 2. I want to try to create a scene with a lot of contrast and playing around with hot and cool colors. </p>
<p>!INSERT WIP SCREENSHOT HERE!</p></td>
</tr>

<tr>
<th class="section2">
WIP - Jungle Scene
<br>
<p>June 3, 2013</p>
</th>

<td class="section2">
<p>This will be my first attempt at making an organic scene, complete with trees, vines, grass and wild flora. </p>
<p>I'll also be attempting to include some weather dynamics, such as rain, moving clouds, flashes of thunder and flowing water.</p>
<p>Here are some screens so far... </p>
<p>!INSERT WIP SCREENSHOT HERE!</p></td>
</tr>

<tr>
<th class="section1">New website design<br>
<p>June 1, 2013</p>
</th>

<td class="section1"><p>My website underwent a complete overhaul. This time, I spent some more time comprehending how to properly use CSS to my advantage. </p>
<p>I also practiced a lot of CSS coding via the W3schools.com website. I strongly recommend anyone who wants to pursue web design to go there and try customizing your own CSS templates through demo tryouts. </p></td>
</tr>

</table>
</div>

<div id="footer">
<p>- www.michael-li.ca -
<br>
All content and web design created by Michael unless detailed otherwise.</p>
<p>Powered by Justhost.com</p>
</div>

</div>
</body>
</html>

================

CSS:

================

@charset "utf-8";
/* CSS Document */

body, html {
margin:0;
padding:0;
height:100%;
    width: 100%;
}

body {
    background-color: #0e0e0e;
    background-image: url(../bg2013.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    height:100%;
}

a, img {
border:none;
}

p {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #CCC;
    line-height: 1.8em;
}

h1 {
    color: #fff;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 16px;
    text-shadow: 2px 3px 0px #000;
    display: block;
    background-color: #5b6363;
    width: 190px;
    border-radius: 8px;
    text-align: center;
    letter-spacing: 1px;
    box-shadow: 1px 1px 16px #000;
    margin-left: 4%;
    height: auto;
    padding-right: 12px;
    padding-bottom: 8px;
    padding-left: 12px;
    padding-top: 8px;
    font-weight: bold;
}

h2 {
    font-size: 1.1em;
    color: #FFF;
    margin-top: 6px;
    font-family: Calibri, "Segoe UI", Tahoma;
    text-shadow: 2px 2px 2px #000;
}

h3 {
    font-family: Calibri, "Segoe UI", Tahoma;
    font-size: 18px;
    color: #FFF;
    font-weight: bold;
    width: 268px;
    margin-top: 12px;
    text-align: left;
    margin-left: 25px;
    padding-bottom: -5px;
}

h4 {
    font-family: Calibri, "Segoe UI", Tahoma;
    font-size: 24px;
    color: #FFF;
    font-weight: bold;
    text-shadow: 2px 2px 2px #000;
}

h5 {
    font-family: Calibri, "Segoe UI", Tahoma;
    font-size: 1.3em;
    font-weight: bold;
    color: #FFF;
    text-align: justify;
    width: inherit;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
}

.sub_link {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #CCC;
    text-decoration: none;
    float: right;
    margin-top: 5px;
    margin-right: 30px;
}

.sub_link:hover {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #FC6;
    text-decoration: none;
    float: right;
    margin-top: 5px;
    margin-right: 30px;
}

.video {
    height: 315px;
    width: 560px;
    margin-top: 4%;
    margin-left: 21%;
    border: 1px solid #666;
    box-shadow: 1px 1px 30px 5px #000;
    margin-right: 21%;
}

.topics {
    border: 1px solid #666;
    height: 173px;
    width: 268px;
    margin-left: 0.5%;
    opacity: 0.7;
    -moz-box-shadow: inset 0px 0px 0px 10px #000000;
    -webkit-box-shadow: inset 0px 0px 0px 10px #000000;
    box-shadow: inset 0px 0px 0px 10px #000000;
    -webkit-transition: opacity;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
    -moz-transition: opacity;
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 500ms;
    -ie-transition: opacity;
    -ie-transition-timing-function: ease-out;
    -ie-transition-duration: 500ms;
    -o-transition: opacity;
    -o-transition-timing-function: ease-out;
    -o-transition-duration: 500ms;
    background-color: rgb(68,68,68); /* Needed for IEs */
    vertical-align: top;
}

.topics:hover {
opacity: 1.0;
    -webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
    -moz-transition: opacity;
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 500ms;
    -ie-transition: opacity;
    -ie-transition-timing-function: ease-out;
    -ie-transition-duration: 500ms;
    -o-transition: opacity;
    -o-transition-timing-function: ease-out;
    -o-transition-duration: 500ms;
}

.preview {
    border: thin solid #666;
    box-shadow: 1px 1px 25px #000;
    margin: 20px;
}

#header {
    position:absolute;
    top:-16px;
    width:994px;
    height:117px;
    z-index:1;
    background-image: url(../menu_bg.png);
    background-repeat: no-repeat;
    left: 0;
}

#logo {
    position:absolute;
    left:45px;
    top:8px;
    width:256px;
    height:82px;
    z-index:250;
}

#demo{
    position:absolute;
    left:0px;
    top:110px;
    width:994px;
    height: 410px;
    z-index:1;
    background-attachment: inherit;
    background-image: url(../demo_bg.png);
    background-repeat: no-repeat;
    text-align: center;
    background-position: center;
}

#content {
    left: 0px;
    top: 415px;
    width: 994px;
    height: auto;
    z-index: 1;
    min-height:100%;
    position:absolute;
    text-align: center;
    padding-bottom: 75px;
}

#gallery {
    height: inherit;
    width: 100%;
    margin-top: 1%;
}

#subject1 {
    position:absolute;
    left:20px;
    top: 75px;
    width:306px;
    height:261px;
    z-index:1;
    background-image: url(../thumb_bg.png);
    background-attachment: inherit;
    background-repeat: no-repeat;
}

#subject2 {
    position:absolute;
    left:350px;
    top:75px;
    width:306px;
    height:261px;
    z-index:1;
    background-image: url(../thumb_bg.png);
    background-repeat: no-repeat;
}

#MenuBar {
    float: right;
    display: inline;
    width: 375px;
    height: 20px;
    margin-top: 80px;
}

#MenuBar li {
    display: inline;
    border-left-width: thin;
    border-left-color: #CCC;
    border-left-style: solid;
    padding-left: 12px;
    padding-right: 12px;
    color: #FFF;
}

#MenuBar a{
    font-family: Tahoma, Geneva, sans-serif;
    color: #999;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    display: inline;
}

#MenuBar a:hover {
    color: #FFF;
}

#footer {
    width:100%;
    height:99px;
    z-index:1;
    background-image: url(../footer_bg.png);
    background-attachment: inherit;
    background-repeat: no-repeat;
    color: #FFF;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    text-align: center;
    background-position: center;
    left: 0px;
    position: absolute;
    bottom: 0px;
}

Thank you for your help.

Edited June 4, 201313 yr by Lyndsey
Added code tags

June 4, 201313 yr

Hi, I'm afraid I can't comment on your specifics but I thought I'd share this: http://ryanfait.com/sticky-footer/

It's the template I always use when I want a footer and it's worked well for me.

Best of luck to you!

teodora
1

June 4, 201313 yr

Hi The id of the container is not important, by container I meant the parent div that holds your columns.

The problem is that your #pg_update and the table within #pg_update have position:absolute. That changes the way the elements would normally flow, and your footer shows at a place where it would show if the #pg_update and table weren't there.

Hope that makes sense

If you change their position to static, i.e. remove position:absolute at all, the footer shows below them.

June 5, 201313 yr

Author

Hi,

I spent some time looking over the links posted in this thread, as well as the advice all of you have given me. After analyzing the code, i'm happy to say that i'm finally reaching the results that i was looking for. Thank you all for your suggestions, they really helped. Here are the results so far, some feedback is always welcome too (changes, etc). I'm still learning and i'm always anxious to learn new ways of doing things or improving my own work. I still have a few more pages to look over, but i have more questions on how to include a contact form page for my site.

Thanks again.

teodora
1

June 5, 201313 yr

Author

Just another question: On my main menu bar, I have these vertical white divider lines that separate each menu option, but how to I get rid of the left most divider without removing the others?

June 5, 201313 yr

You can remove the border of the first <li> item:

#MenuBar li:first-child{
border-left:none;
}

June 5, 201313 yr

Author

That worked, thanks.

June 6, 201313 yr

Author

I have a question about contact forms:

I've written these lines of code into my page, yet I am unsure if it will work correctly. As I understand it, in this the contact.php page, if the $mail_to property is filled with the recipients email (my email in this case) and when the visitor clicks on the 'Send' button, the message is converted into an email and sent to the recipient (mli.myart@gmail.com). Is this correct?

<?php
$field_name = $_POST['cf_name'];
$field_email = $_POST['cf_email'];
$field_message = $_POST['cf_message'];

$mail_to = 'mli.myart@gmail.com';
$subject = 'Message from a site visitor '.$field_name;

$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Message: '.$field_message;

$headers = "From: $cf_email\r\n";
$headers .= "Reply-To: $cf_email\r\n";

$mail_status = mail($mail_to, $subject, $body_message, $headers);

if ($mail_status) { ?>
	<script language="javascript" type="text/javascript">
		alert('Thank you for the message. We will contact you shortly.');
		window.location = 'contact.html';
	</script>
<?php
}
else { ?>
	<script language="javascript" type="text/javascript">
		alert('Message failed. Please, send an email to mli.myart@gmail.com');
		window.location = 'contact.html';
	</script>
<?php
}
?>

June 6, 201313 yr

I think you better start a new topic about your contact form, so you get more replies.

Did you test it at all? Looks OK to me, but I can't comment much on PHP.

I assume you have HTML for the form, too.

June 6, 201313 yr

Yes the contents of the mail form will be sent to the address you put in the $mail_to variable.

Where you test to see if the mail was sent I'd recommend you use php to echo the successful or unsuccessful result to the screen rather than using a javascript alert.

Also if you embed the php code inside your contact page (rename to contact.php) you don't need to do any redirecting.

Div align problem...

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)