PDA

View Full Version : CSS positioning issue



jamesedel
Jan 21st, 2010, 08:00 PM
I am learning css and ran into a problem I can't figure out.

When I add text in my main content div, it does push my footer down like I want it to. However, it keeps the existing space in the div between the content and the footer leaving a large gap at the bottom of the screen. Can anybody help me?

The developing site is here:

http://thinkfishdesign.com/temp/tf/

This is the css code :

@charset "utf-8";

/*-------------------
Style Template
-------------------*/

/*-------------------
HTML Styles
-------------------*/

body {
text-align: center;
margin: 0px;
background-color: #FFF;
}

p {
font-family:Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.3em;
}

/*-------------------
Structural Styles
-------------------*/

#container-content {
position:relative;
margin:0 auto;
height:auto;

width:980px;
height:auto;

text-align:left;
}

#container-page {
position:relative;

width:100%;
height:auto;

text-align:center;
}

#content-container {
position:relative;
top:-17em;

width:100%;
}

#content {
position:relative;
left:13em;
top:-33em;

width:45em;
}

#content-main {
position:relative;

width:100%;
height:auto;
}

#footer {
position:relative;
top:0em;

width:100%;
height:12.6em;
}

.footer {
background-image:url(images/template_footer.jpg);
background-repeat:no-repeat;
}

#intro {
position:relative;
left:20em;
top: -34em;

width:38em;
height:8.8em;
white-space:normal;
}

#logo {
position:relative;
left:50em;
top:-19em;

width:11em;
height:11em;
}

.logo {
background-image:url(images/template_logo.jpg);
background-repeat:no-repeat;
}

#photo-main {
position:relative;
left:1em;
top:1em;

width:16em;
height:20em;
}

.photo-main {
background-image:url(images/template_fish.jpg);
background-repeat:no-repeat;
}

/*-------------------
Side Navigation Styles
-------------------*/

#nav-container {
position:relative;
left:1.3em;
top:-12em;

width:12em;
height:19em;
}

.nav {
font-family:Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1em;
}

.link-nav a {
color: #000;
text-decoration: none;
}

.link-nav a:visited {
color: #000;
text-decoration: none;
}

.link-nav a:hover {
color: #F60;
text-decoration: underline;
}

/*-------------------
Footer Navigation Styles
-------------------*/

#footer-nav{
position:relative;
top:13em;
left:3em;

width:40em;
height:2em;
}

.nav-footer {
font-family:Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1em;
}

.link-footer a {
color: #F60;
text-decoration: underline;
}

.link-footer a:visited {
color: #F60;
text-decoration: underline;
}

.link-footer a:hover {
color: #900;
text-decoration: underline;
}

Excavator
Jan 21st, 2010, 08:35 PM
Hello jamesedel,
You are using a lot of positioning that may not be helping you. you also seem to have divitis (http://ahsanity.wordpress.com/2007/05/15/divitis-and-classitis-two-new-words-in-my-css-vocabulary/).

It might be easier to just let the document flow naturally instead.

Make some quick changes in your CSS just to test -
#container-page {
width:100%;
height:auto;
text-align:center;
}
#container-content {
margin:0 auto;
width:980px;
text-align:left;
}
#content-main {
width:100%;
background: #ccc;
}
#photo-main {
float: left;
margin: 1em 0 0 1em;
width:16em;
height:20em;
}
.photo-main {
background-image:url(images/template_fish.jpg);
background-repeat:no-repeat;
}
#logo {
float: right;
width:11em;
height:11em;
}
.logo {
background-image:url(images/template_logo.jpg);
background-repeat:no-repeat;
}
#nav-container {
float: left;
clear: left;
margin: 10px 0 0 10px;
background: #f00;
width:12em;
}
#content {
margin: 0 12em;
background: #00f;
}
#footer {
width:100%;
height:12.6em;
}
.footer {
background: url(images/template_footer.jpg) no-repeat;
}

That still needs some work, your header images and intro text aren't right yet but you might get the idea from that.

You are basically building a 2 column layout so this demo may help some - http://nopeople.com/CSS/equal_length_columns/index.html



p.s. --- When posting code in the forum, please use the code tags, [code][/code] - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.
It's not necessary to post the code anyway, since you gave us a link and we can get it from that.

jamesedel
Jan 21st, 2010, 08:43 PM
Thank you so much. I will try this out.

I am just now learning css positioning to get away from table-based design. There is a lot to learn :)

Appreciate it.