Jump to content
Killersites Forums

Repeating Backround Image Down Page/Footer Positioning


ceejay1223
 Share

Recommended Posts

I am working on a website for the first time using CSS and I am having two main problems. I am making a 3 column design with header and footer. My problems are first, I want both left and right columns to repeat the backround to the bottom of the page and meet at the footer backround. And second, I can't get the footer to the bottom of the page by itself.

 

links are:

http://cjwalizer.vacau.com/firstcss.php - problem link

http://cjwalizer.vacau.com/mycss.css - if the attachment doesn't work

http://cjwalizer.vacau.com/index.php - is what I basically want it to be laid out as.

 

The last link I did in all tables but it doesn't work well with Firefox unless I do some serious editing

Link to comment
Share on other sites

I have not checked your code nor site - but I am sure you are not repeating the background at the Y axis

 

# {

background-repeat: repeat-y

}

 

Your footer - are you adding clear: both?

 

#footer {

clear: both;

}

 

This will allow the footer to float under the other divisions above it

Link to comment
Share on other sites

I am working on a website for the first time using CSS and I am having two main problems. I am making a 3 column design with header and footer. My problems are first, I want both left and right columns to repeat the backround to the bottom of the page and meet at the footer backround. And second, I can't get the footer to the bottom of the page by itself.

 

links are:

http://cjwalizer.vacau.com/firstcss.php - problem link

http://cjwalizer.vacau.com/mycss.css - if the attachment doesn't work

http://cjwalizer.vacau.com/index.php - is what I basically want it to be laid out as.

 

The last link I did in all tables but it doesn't work well with Firefox unless I do some serious editing

 

Do not use tables for your layouts - continue to learn CSS

Link to comment
Share on other sites

Thanks I fixed the footer but the right side navi is still not repeating the background image. The left side navi has more content in it than the right side does and I am using repeat-y. Does that matter in getting it to repeat the whole way down or not? Here is my code for that section

div#affiliates {
   position:absolute;
   top:175px;
   right:0;
   width:15%;
   margin:0 0 0 0;
   border-left:1px solid #000000;
   background: #A5FFB0 url('../imgbin/leftbg1.jpg') top left repeat-y;
   padding:0 0 0 0;
   height:100%;
   text-align:right;
}

Link to comment
Share on other sites

I cannot see your site as it is apparently under review. However, when you have different length columns the only way to get the background image to repeat all the way to the bottom regardless of the content in each column is to put the background image on the container that holds the 3 columns. So make one wide background image, doesn't have to be very high, that will encompass the backgrounds that you are probably now putting into each column, and repeat-y on the containing div.

Link to comment
Share on other sites

You have some coding issues - beginning with the missing doctype - you need


at the top of the document.

 

All your menus should be lists, and then what the others said.

 

Also - and this is just my perception, and maybe the look isn't even what you're working on at this time, but when I first opened your page, all that bright green was VERY overpowering.

Link to comment
Share on other sites

Hopefully this is the last thing I need. I am trying to put in the info and if I put content in the middle box it doesn't fill out to the width I have the column set to. It will also if the content box gets longer than the left navigation box wrap around it and take up both spaces.

 

Updated versions:

http://cjwalizer.vacau.com/firstcss.php

http://cjwalizer.vacau.com/style.css

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...