PDA

View Full Version : Footer problem



Arsin
Sep 11th, 2010, 04:40 PM
Hey. I have coded a css layout and I got everything like I want it, EXCEPT the footer. I can't make it to follow the rest of the design. For example, I want it to be below the main content area all the time, for instance when the main content area expands, the footer stays at the same place? How can I make it follow the main content area?

boogily
Sep 11th, 2010, 04:44 PM
Give the footer an absolute position, with the bottom at 0 or wherever you want it to "hover". Then, make sure the div that it is contained in has relative positioning. (at least that has worked for me in the past.)

Once you do this, make sure your content has enough padding at the bottom so it doesn't hide behind your footer.

Arsin
Sep 11th, 2010, 04:54 PM
When I do that it ends up in the middle of the page?

#footer
{
margin-bottom: 0px;
position: absolute;
}

abduraooft
Sep 11th, 2010, 05:14 PM
You need to apply bottom:0; too to the footer as stated above. In case of any further doubts, please post your complete code (HTML+CSS).

Arsin
Sep 11th, 2010, 05:33 PM
It's still in the kinda middle.

Here's my HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><?php echo $websitetitle; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="lineweb.css" rel="stylesheet" type="text/css" />


</head>
<body>
<div id="bg_left">

<div id="wrapper">
<?php include($path . "header.tpl.php"); ?>

<table>
<tr>
<td>


<div id="img_nav">
<a target="_blank" href="http://forum.l2web.org/"><img src="images/hq/comm_hq.png"></a> <a href="index.php?page=downloads"><img src="images/hq/client_hq.png"></a>
</div>

<div id="server_nav">
<a href="index.php"><img src="images/hq/home_hq.png"></a> <a href="index.php?page=howto"><img src="images/hq/connect_hq.png"></a> <a href="index.php?page=rankings"><img src="images/hq/rankings_hq.png"></a> <a href="index.php?page=statistics"><img src="images/hq/statistics_hq.png"></a> <a href="index.php?page=features"><img src="images/hq/features_hq.png"></a>
<a href="index.php?page=contact-us"><img src="images/hq/contact_us_hq.png"></a>
</div>

<div id="page_contents">

<div id="get_page">
Footer should be below this content space
</div>

<div id="sidebar">
<table>
<tr>
<td class="user_cp_title">
<div style="side_bar_cont"> <center>User Control Panel </center></div>
</td>
</tr>
<tr>
<td class="user_cp_con">
<div class="user_cp_welcome">Welcome User!</div>
<ul>
<li class="user_cp_nav"> <a href="#">Control Panel </a></li>
<li class="user_cp_nav"> <a href="#">Change Password </a></li>
<li class="user_cp_nav"> <a href="#">Vote & Earn Points </a></li>
<li class="user_cp_nav"> <a href="#">Vote Shop </a></li>
<li class="user_cp_nav"> <a href="#">Change Email </a></li>
<li class="user_cp_nav"> <a href="#">Delete Account </a></li>
</ul>
<div class="user_logout_question"><a href="index.php?page=logout">Logout?</a></div>
</td>
</tr>
</table>
</div>

</div>
<div id="footer">
Footer
</div>
</div>

</div>



</td>
</tr>
</table>




<div id="footer">
FOoter
</div>

</body>
</html>


Here is my CSS:

body{
background:url(images/hq/bgx2.jpg) top center no-repeat #020d1f;
margin:0px; padding:0px;
font-family: Arial, Helvetica, Sans-Serif;
}


.news_title {
padding: 5px;
float:left;
}

.news_texturing {
padding: 5px;
}

.news_hq {
padding-bottom: 8px;
padding-top: 5px;
}

.news_by_n_time {
font-weight: bold;
color:#938d8d;
background: #efefef;
padding: 5px;
min-width: 563px;
max-width: 570px;
border: 1px solid #d6d6d6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}


.news_left {
background: url(images/hq/news_left.gif) no-repeat;
width: 12px;
height: 33px;
}

.news_center {
min-width: 570px;
max-width: 570px;
height: 33px;
background: url(images/hq/news_center.gif) repeat-x;
font-size: 15px;
font-weight: bold;
color:#FFFFFF;
}

.news_right {
background: url(images/hq/news_right.gif) no-repeat;
width: 12px;
height: 33px;
}


img {
border: 0px;
}

.forgot_pws_quest a:hover {
color:#2e63b2;
}

.forgot_pws_quest a {
top: 10px;
color: #505050;
}

.forgot_pws_quest {
font-size: 13px;
font-family: 'Arial';
float:right;
padding-left: 10px;
}

.user_login_btn {
border: 0px;
padding: 5px;
height: 32px;
width: 82px;
background: url(images/hq/login_btn2.gif) no-repeat;
font-family: 'Tahoma';
font-weight: bold;
font-size: 14px;
}

a {
color: #362c2c;
}

#bg_left {
background:
min-height: 1038px;
}

.user_logout_question {
padding-top: 8px;
padding: 5px;
float:right;
font-family: Arial;
font-weight: bold;
color:#4e4e4e;
}

.user_cp_title {
width: 265px;
height: 45px;
background: url(images/hq/user_cp_title.png) top center no-repeat;
padding: 8px;
padding-top: 1px;
font-family: Arial;
font-weight: bold;
font-size: 15px;
color: #FFFFFF;
}


ul {
padding: none;
margin: 0;
padding-left: 0;

}

.user_cp_nav ul {
list-style: none;
}

#get_page {
border-right: 1px dotted #cccccc;
font-size: 13px;
float:left;
width: 593px;
padding-right: 10px;
padding-top: 10px;
padding-left: 10px;
}

.user_cp_nav a {
color: #362c2c;
text-decoration: none;
}

.user_login_fields {
margin-top: 4px;
width: 230px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family: Arial;
font-size: 13px;
font-weight: bold;
border: 1px solid #a9a9a9;
padding: 5px;
}


.user_cp_nav {
margin-top: 4px;
list-style-type: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family: Arial;
font-size: 13px;
font-weight: bold;
border: 1px solid #a9a9a9;
padding: 5px;
}

.user_cp_welcome {
padding-bottom: 5px;
font-family: Arial;
font-weight: bold;
color:#9e9e9e;
}

.user_cp_con {
padding: 5px;
background-color:#f2f2f2;
border: 1px solid #b0b0b0;
}

.side_bar_cont {
padding: 10px;
}

#sidebar {
padding-right: 10px;
float:right;
width: 260px;
padding-top: 2px;
}

#wrapper {
height: 800px;
position: relative;
width: 950px;
margin:0 auto;
}

#footer
{
margin-bottom: 0px;
position: relative;
bottom:0;
}

#page_contents {
background:url(images/hq/new_content.png) top center no-repeat #FFFFFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 5px solid #2f3e51;
min-height: 478px;
top: 405px;
position: absolute;
left: 10px;
width: 895px;

}

#server_nav {
position: absolute;
left: 50px;
top: 285px;
}

#img_nav {
position: absolute;
right: 50px;
top: 330px;
}

.main_content {
padding-bottom: 20px;
position: absolute;
width: 960px;
}

#main_content {
margin-bottom: 20px;
position: absolute;
width: 960px;
}

#left-header a {
text-decoration: none;
}

#left-header {
position: absolute;
padding-top: 8px;
color: #FFFFFF;
font-family: Arial;
left: 35px;
}

#main-menu {
padding-top: 5px;
position:absolute;
right: 50px;
}

#header {
font-size: 13px;
width: 500px;
}

#logo {
float:left;
padding-top: 50px;
}

lukevn
Sep 11th, 2010, 06:04 PM
I am happy to find much useful information in the post, writing article is awesome, I always look for quality content, thanks for sharing.
=============================================
Quang cao truc tuyen (http://linkad.vn) | Quang cao Google (http://linkad.vn) | Quang ba web (http://linkad.vn) | Dai ly quang cao (http://linkad.vn)

optimus203
Sep 11th, 2010, 06:04 PM
Is this the desired effect you want?

#footer
{
position: fixed;
bottom: 0;}

Arsin
Sep 11th, 2010, 06:08 PM
Yes exactly. Below the main content area always

abduraooft
Sep 11th, 2010, 06:19 PM
You'd need to eliminate the table in your layout, since using tables for layout is very bad (http://www.hotdesign.com/seybold/)!

Arsin
Sep 11th, 2010, 06:36 PM
Yes I know but the table isn't causing the problem. I will get rid of it but I need to solve the footer issue first. Does anyone have a clue how to solve it?

CSSQuest
Sep 11th, 2010, 07:15 PM
Ok there are a few things you should change.

1.) You have the footer there twice. Once in the table - and once at the end of the page. Neither are in the correct place. Remove both.

2.) You want the footer to come after the content of the div "get_page" so add it in there.


<div id="page_contents">

<div id="get_page">
Footer should be below this content space
</div>

<div id="footer">
Footer Content
</div>

<div id="sidebar">
<table>
....
</table>
</div>

</div>

3.) Next you need to make sure that the footer stays below the content. Since the "get_page" div is floated left, you want to do the same thing to the footer. Then you want to make sure you say "I don't want the footer to be next to the content, so make sure it jumps down below it". You can do that in the css by using the "Clear" attribute.

#footer
{
float:left;
clear:left;
}

The "clear:left" part says "I don't want any other divs that are 'floated' to display on the left of me. If there is one on my left, put me below it instead of next to it."

Hope this helps!

Arsin
Sep 11th, 2010, 07:22 PM
Oh okay! But the Footer should be below the div id page_contents (<div id="page_contents">) how do I make it go there?

CSSQuest
Sep 11th, 2010, 07:37 PM
Its pretty similar.

Here's the beef. Your div "page_contents" isn't really set up ideally. Let me help you correct it.

Instead of using "position:absolute" (which is whats causing you problems with your footer) lets use general margins.

In the next examples I removed the border stuff you had just to shorten the code on here so you can see what I did - keep it in there on your actual page.

Instead of:

#page_contents {
...
top: 405px;
position: absolute;
left: 10px;
width: 895px;
}

Use something like this:


#page_contents {
...
width: 895px;
margin:405px 0px 0px 10px;
}

The "margin" attribute lets elements say how far away from the top-right-bottom-left they are from the element that they are inside of (in this case the <td> they are in.

So the line "margin: 405px 0px 0px 10px;" is saying
I'm 405px from the top of the element I was placed inside
I'm 0px from the right of the element I was placed inside
I'm 0px from the bottom of the element I was placed inside
I'm 10px from the left of the element I was placed inside

The best way to remember it is margins are "Trouble" -> "TRBL" -> "Top-Right-Bottom-Left".

Now that you've got your page_contents div fixed, add in the footer after it.


<div id="page_contents">

<div id="get_page">
Footer should be below this content space
</div>

<div id="sidebar">
<table>
...
</table>
</div>

</div>

<div id="footer">

Footer Content

</div>

And make your footer css match the page_contents - making sure to change the margins so it sits a little prettier - you don't want the top of the footer to be 405px from the bottom of the page_contents. This time we changed the top to "10px" to put it 10 pixels below the div "page_contents".


#footer {
width: 895px;
margin:10px 0px 0px 10px;
}

See if that clears things up for you.

Arsin
Sep 11th, 2010, 07:51 PM
Okay yeah that looks good but the page_contents is too far to the right now? ;s

CSSQuest
Sep 11th, 2010, 07:56 PM
Which part is too far to the right?

The whole box?

Or Just the text?

Or just the footer?



Tell you what, can you copy-paste the code now that you've updated it? I'll take another look.

Arsin
Sep 11th, 2010, 08:00 PM
It's just the page_Contentes div that have moved to far to the right now when I only used margins, the footer is in the right place:)

The HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><?php echo $websitetitle; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="lineweb.css" rel="stylesheet" type="text/css" />


</head>
<body>
<div id="bg_left">

<div id="wrapper">
<?php include($path . "header.tpl.php"); ?>

<table>
<tr>
<td>


<div id="img_nav">
<a target="_blank" href="http://forum.l2web.org/"><img src="images/hq/comm_hq.png"></a> <a href="index.php?page=downloads"><img src="images/hq/client_hq.png"></a>
</div>

<div id="server_nav">
<a href="index.php"><img src="images/hq/home_hq.png"></a> <a href="index.php?page=howto"><img src="images/hq/connect_hq.png"></a> <a href="index.php?page=rankings"><img src="images/hq/rankings_hq.png"></a> <a href="index.php?page=statistics"><img src="images/hq/statistics_hq.png"></a> <a href="index.php?page=features"><img src="images/hq/features_hq.png"></a>
<a href="index.php?page=contact-us"><img src="images/hq/contact_us_hq.png"></a>
</div>

<div id="page_contents">

<div id="get_page">
Footer should be below this content space
</div>

<div id="sidebar">
<table>
<tr>
<td class="user_cp_title">
<div style="side_bar_cont"> <center>User Control Panel </center></div>
</td>
</tr>
<tr>
<td class="user_cp_con">
<div class="user_cp_welcome">Welcome User!</div>
<ul>
<li class="user_cp_nav"> <a href="#">Control Panel </a></li>
<li class="user_cp_nav"> <a href="#">Change Password </a></li>
<li class="user_cp_nav"> <a href="#">Vote & Earn Points </a></li>
<li class="user_cp_nav"> <a href="#">Vote Shop </a></li>
<li class="user_cp_nav"> <a href="#">Change Email </a></li>
<li class="user_cp_nav"> <a href="#">Delete Account </a></li>
</ul>
<div class="user_logout_question"><a href="index.php?page=logout">Logout?</a></div>
</td>
</tr>
</table>
</div>

</div>
<div id="footer">
Footer Content
</div>
</div>

</div>



</td>
</tr>
</table>





</body>
</html>


The CSS:

body{
background:url(images/hq/bgx2.jpg) top center no-repeat #020d1f;
margin:0px; padding:0px;
font-family: Arial, Helvetica, Sans-Serif;
}


.news_title {
padding: 5px;
float:left;
}

.news_texturing {
padding: 5px;
}

.news_hq {
padding-bottom: 8px;
padding-top: 5px;
}

.news_by_n_time {
font-weight: bold;
color:#938d8d;
background: #efefef;
padding: 5px;
min-width: 563px;
max-width: 570px;
border: 1px solid #d6d6d6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}


.news_left {
background: url(images/hq/news_left.gif) no-repeat;
width: 12px;
height: 33px;
}

.news_center {
min-width: 570px;
max-width: 570px;
height: 33px;
background: url(images/hq/news_center.gif) repeat-x;
font-size: 15px;
font-weight: bold;
color:#FFFFFF;
}

.news_right {
background: url(images/hq/news_right.gif) no-repeat;
width: 12px;
height: 33px;
}


img {
border: 0px;
}

.forgot_pws_quest a:hover {
color:#2e63b2;
}

.forgot_pws_quest a {
top: 10px;
color: #505050;
}

.forgot_pws_quest {
font-size: 13px;
font-family: 'Arial';
float:right;
padding-left: 10px;
}

.user_login_btn {
border: 0px;
padding: 5px;
height: 32px;
width: 82px;
background: url(images/hq/login_btn2.gif) no-repeat;
font-family: 'Tahoma';
font-weight: bold;
font-size: 14px;
}

a {
color: #362c2c;
}

#bg_left {
background:
min-height: 1038px;
}

.user_logout_question {
padding-top: 8px;
padding: 5px;
float:right;
font-family: Arial;
font-weight: bold;
color:#4e4e4e;
}

.user_cp_title {
width: 265px;
height: 45px;
background: url(images/hq/user_cp_title.png) top center no-repeat;
padding: 8px;
padding-top: 1px;
font-family: Arial;
font-weight: bold;
font-size: 15px;
color: #FFFFFF;
}


ul {
padding: none;
margin: 0;
padding-left: 0;

}

.user_cp_nav ul {
list-style: none;
}

#get_page {
border-right: 1px dotted #cccccc;
font-size: 13px;
float:left;
width: 593px;
padding-right: 10px;
padding-top: 10px;
padding-left: 10px;
}

.user_cp_nav a {
color: #362c2c;
text-decoration: none;
}

.user_login_fields {
margin-top: 4px;
width: 230px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family: Arial;
font-size: 13px;
font-weight: bold;
border: 1px solid #a9a9a9;
padding: 5px;
}


.user_cp_nav {
margin-top: 4px;
list-style-type: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family: Arial;
font-size: 13px;
font-weight: bold;
border: 1px solid #a9a9a9;
padding: 5px;
}

.user_cp_welcome {
padding-bottom: 5px;
font-family: Arial;
font-weight: bold;
color:#9e9e9e;
}

.user_cp_con {
padding: 5px;
background-color:#f2f2f2;
border: 1px solid #b0b0b0;
}

.side_bar_cont {
padding: 10px;
}

#sidebar {
padding-right: 10px;
float:right;
width: 260px;
padding-top: 2px;
}

#wrapper {
height: 800px;
position: relative;
width: 950px;
margin:0 auto;
}

#footer {
width: 895px;
margin:10px 0px 0px 10px;
}

#page_contents {
background:url(images/hq/new_content.png) top center no-repeat #FFFFFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 5px solid #2f3e51;
min-height: 478px;
width: 895px;
margin:405px 150px 0px 10px;


}

#server_nav {
position: absolute;
left: 50px;
top: 285px;
}

#img_nav {
position: absolute;
right: 50px;
top: 330px;
}

.main_content {
padding-bottom: 20px;
position: absolute;
width: 960px;
}

#main_content {
margin-bottom: 20px;
position: absolute;
width: 960px;
}

#left-header a {
text-decoration: none;
}

#left-header {
position: absolute;
padding-top: 8px;
color: #FFFFFF;
font-family: Arial;
left: 35px;
}

#main-menu {
padding-top: 5px;
position:absolute;
right: 50px;
}

#header {
font-size: 13px;
width: 500px;
}

#logo {
float:left;
padding-top: 50px;
}

CSSQuest
Sep 11th, 2010, 08:48 PM
Here's what I've got. Its still not perfect, you're going to have to go in and fix the margins and paddings for each element so they sit where they should.

The problem was all the elements that had the "position:absolute" rule. Basically that rule says be here on the page compared to the browser, which doesn't allow the page to stretch to include all the content etc.

Also, position:relative - thats the default. You don't need to add it. Its automatically on.

Lastly, when you don't use absolute positioning left and top etc give you wonky effects. Use the margin:T R B L; rule instead. Once you edit the padding and margins on this everything should work much smoother I think.



body{
background:url(images/hq/bgx2.jpg) top center no-repeat #020d1f;
margin:0px; padding:0px;
font-family: Arial, Helvetica, Sans-Serif;
}


.news_title {
padding: 5px;
float:left;
}

.news_texturing {
padding: 5px;
}

.news_hq {
padding-bottom: 8px;
padding-top: 5px;
}

.news_by_n_time {
font-weight: bold;
color:#938d8d;
background: #efefef;
padding: 5px;
min-width: 563px;
max-width: 570px;
border: 1px solid #d6d6d6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.news_left {
background: url(images/hq/news_left.gif) no-repeat;
width: 12px;
height: 33px;
}

.news_center {
min-width: 570px;
max-width: 570px;
height: 33px;
background: url(images/hq/news_center.gif) repeat-x;
font-size: 15px;
font-weight: bold;
color:#FFFFFF;
}

.news_right {
background: url(images/hq/news_right.gif) no-repeat;
width: 12px;
height: 33px;
}


img {
border: 0px;
}

.forgot_pws_quest a:hover {
color:#2e63b2;
}

.forgot_pws_quest a {
top: 10px;
color: #505050;
}

.forgot_pws_quest {
font-size: 13px;
font-family: 'Arial';
float:right;
padding-left: 10px;
}

.user_login_btn {
border: 0px;
padding: 5px;
height: 32px;
width: 82px;
background: url(images/hq/login_btn2.gif) no-repeat;
font-family: 'Tahoma';
font-weight: bold;
font-size: 14px;
}

a {
color: #362c2c;
}

#bg_left {
min-height: 1038px;
}

.user_logout_question {
padding-top: 8px;
padding: 5px;
float:right;
font-family: Arial;
font-weight: bold;
color:#4e4e4e;
}

.user_cp_title {
width: 265px;
height: 45px;
background: url(images/hq/user_cp_title.png) top center no-repeat;
padding: 8px;
padding-top: 1px;
font-family: Arial;
font-weight: bold;
font-size: 15px;
color: #FFFFFF;
}

ul {
padding: none;
margin: 0;
padding-left: 0;
}

.user_cp_nav ul {
list-style: none;
}

#get_page {
border-right: 1px dotted #cccccc;
font-size: 13px;
float:left;
width: 593px;
padding-right: 10px;
padding-top: 10px;
padding-left: 10px;
}

.user_cp_nav a {
color: #362c2c;
text-decoration: none;
}

.user_login_fields {
margin-top: 4px;
width: 230px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family: Arial;
font-size: 13px;
font-weight: bold;
border: 1px solid #a9a9a9;
padding: 5px;
}


.user_cp_nav {
margin-top: 4px;
list-style-type: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family: Arial;
font-size: 13px;
font-weight: bold;
border: 1px solid #a9a9a9;
padding: 5px;
}

.user_cp_welcome {
padding-bottom: 5px;
font-family: Arial;
font-weight: bold;
color:#9e9e9e;
}

.user_cp_con {
padding: 5px;
background-color:#f2f2f2;
border: 1px solid #b0b0b0;
}

.side_bar_cont {
padding: 10px;
}

#sidebar {
padding-right: 10px;
float:right;
width: 260px;
padding-top: 2px;
}

#wrapper {
width: 950px;
margin:0 auto;
}

#footer {
width: 895px;
margin:10px 0px 0px 10px;
}

#page_contents {
background:url(images/hq/new_content.png) top center no-repeat #FFFFFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 5px solid #2f3e51;
min-height: 478px;
width: 895px;
margin:405px 0 0 0;


}

#server_nav {
margin-left: 50px;
margin-top: 285px;
}

#img_nav {
margin-right: 50px;
margin-top: 330px;
}

.main_content {
padding-bottom: 20px;
width: 960px;
}

#main_content {
margin-bottom: 20px;
width: 960px;
}

#left-header a {
text-decoration: none;
}

#left-header {
padding-top: 8px;
color: #FFFFFF;
font-family: Arial;
margin-left: 35px;
}

#main-menu {
padding-top: 5px;

margin-right: 50px;
}

#header {
font-size: 13px;
width: 500px;
}

#logo {
float:left;
padding-top: 50px;
}



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><?php echo $websitetitle; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Description" content="" />
<link href="lineweb.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="bg_left">

<div id="wrapper">

<div id="main-menu">
<a href="index.php?page=login"><img src="images/hq/btn_login_hq.gif" /></a>
<a href="index.php?page=register"><img src="images/hq/btn_reg_hq.gif" /></a>
</div>

<div id="left-header">
<a href="index.php">Left Header</a>
</div>

<div id="logo">
<img src="images/hq/logo-hq.png" />
</div>


<div id="img_nav">
<a target="_blank" href="http://forum.l2web.org/"><img src="images/hq/comm_hq.png" /></a>
<a href="index.php?page=downloads"><img src="images/hq/client_hq.png" /></a>
</div>

<div id="server_nav">
<a href="index.php"><img src="images/hq/home_hq.png" /></a>
<a href="index.php?page=howto"><img src="images/hq/connect_hq.png" /></a>
<a href="index.php?page=rankings"><img src="images/hq/rankings_hq.png" /></a>
<a href="index.php?page=statistics"><img src="images/hq/statistics_hq.png" /></a>
<a href="index.php?page=features"><img src="images/hq/features_hq.png" /></a>
<a href="index.php?page=contact-us"><img src="images/hq/contact_us_hq.png" /></a>
</div>

<div id="table">

<div id="page_contents">

<div id="get_page"><p>Footer should be below this content space.</p></div>

<div id="sidebar">

<table>
<tr>
<td>
<div style="side_bar_cont">
<center>User Control Panel</center>
</div>
</td>
</tr>

<tr>
<td>
<div class="user_cp_welcome">Welcome User!</div>

<ul>
<li class="user_cp_nav"> <a href="#">Control Panel </a></li>
<li class="user_cp_nav"> <a href="#">Change Password </a></li>
<li class="user_cp_nav"> <a href="#">Vote &amp; Earn Points </a></li>
<li class="user_cp_nav"> <a href="#">Vote Shop </a></li>
<li class="user_cp_nav"> <a href="#">Change Email </a></li>
<li class="user_cp_nav"> <a href="#">Delete Account </a></li>
</ul>

<div class="user_logout_question"><a href="index.php?page=logout">Logout?</a></div>
</td>
</tr>
</table>
</div>

</div>

<div id="footer">
Footer Content
</div>

</div>
</div>
</div>

</body>
</html>

Arsin
Sep 11th, 2010, 09:04 PM
Oh okay thanks alot. Now everything is in its correct place, but the spacing between the divs is huge, should I just change the margins there too or?

CSSQuest
Sep 11th, 2010, 09:07 PM
Make sure the padding is fixed too. When I sent it back there were pretty huge amounts of padding on the items at the top of the screen.

It follows the same "Trouble/TRBL" rule idea as margins do.

Instead of:
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;

Combine them into:
padding:10px 20px 30px 40px;

Once you've checked the margins and padding - make sure there aren't any position:absolute; that I missed - and use float:left or float:right to get things in the right place if necessary.

Arsin
Sep 11th, 2010, 09:13 PM
Okay so basically, the things I should use is the TRBL rule, no position:relative/absolute, and no tables? :)

And when you say padding is fixed you mean that there should be no not needed padding and I should use the margins instead, correct?

CSSQuest
Sep 11th, 2010, 09:23 PM
Almost :P

the TRBL rule - Yes
no position:relative/absolute - Yes unless *absolutely* needed.. get it? ...absolutely? lol
And no tables? - Hell yes. Tables are terrible. The only time you should use them is if you are displaying tabular data - like statistics and stuff.

Padding Fixed:
Yeah you don't want to have any unneeded padding.

There is still a need for padding every once in a while though.

The difference between margin and padding is where the space is added.

Adding margin means you add space OUTSIDE the element you are adding it to - pushing the whole div one direction or another.

Adding padding means you add space INSIDE the edge of the element you are adding it to - pushing the CONTENT inside element from the edges of the element itself - but the div stays where it is.

Padding is good for things like paragraphs and links. Or when you want to have everything inside a div 30px in from the left. Margin is good for when you want to place div's at certain places on the page.

Arsin
Sep 11th, 2010, 09:25 PM
Oh okay, I think I get it! I am mixturing with the divs now and I think I've gotten the whole concept of what you're explaining.. Almost finished, I'll show you in a few min :)

Arsin
Sep 11th, 2010, 09:34 PM
Pmed :)

Doctor_Varney
Sep 11th, 2010, 10:53 PM
Don't mix tables and DIVs in layout. Very bad! If you're doing CSS, drop the tables and Learn how to use DIVs properly. Your footer will then stack perfectly beneath all your other DIVs and go precisely where you want.

Dr. V

H.R.H.
Sep 12th, 2010, 02:23 AM
Try using css element "display:table" on your get-page div