Problem with CSS design

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

I have being quiet about this for some time and decided now to post a question concerning this. The site in question is [ http://64.15.130.247/~bogey/index.php ] and as you see, the footer image doesn't show. I don't know why and not concerned about that at the moment.

The main thing that I am concerned about right now, is that the background filler (the green background image) either on the left menu side or the content side doesn't fill in the whole thing when either of the sides are longer then the other side. I can't figure out how to fix that problem, and I don't really want to have that problem present. Just doesn't seem nice on my site.

I tried height: 100%; but it doesn't do it. That doesn't fix anything. It also doesn't work when I put in position either as static|relative|absolute. It doesn't change anything at all. Any help on this? Maybe someone has found a workaround solution or something to this problem? Thanks for any relevant help on this :)
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6252
  • Loc: Seattle, WA

Post 3+ Months Ago

dM discusses this in the second part of his Multi-Column Layout Using CSS Float tutorial. Check out the section entitled "How do I get all the columns to expand equally?".
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

Did you see my page in question? How do I apply that fix to that sort of page?
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6252
  • Loc: Seattle, WA

Post 3+ Months Ago

Yes, I did.

You have to set a y-repeating background for each column's parent container. In other words, the background should be on parent higher than the content container, so that the background stretching doesn't depend on the content.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

Oh ok. I'll try that. Thanks
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

spork wrote:
Yes, I did.

You have to set a y-repeating background for each column's parent container. In other words, the background should be on parent higher than the content container, so that the background stretching doesn't depend on the content.

I know that I said I'll try it but now I am confused. What do you mean by that? What if the background is just a color?
  • Firemaster
  • Novice
  • Novice
  • Firemaster
  • Posts: 22

Post 3+ Months Ago

What means is that you need to put another div container equal to size to the one of the column.

Example:

Code: [ Select ]
<div id="background">
<div id="column">
</div><!--End of column-->
</div><!--End of Column Background-->
  1. <div id="background">
  2. <div id="column">
  3. </div><!--End of column-->
  4. </div><!--End of Column Background-->


So that the background repeats all the way down to the bottom to where the footer is. So that the background does not depend on the content. If you google flaux columns on google you will see some tutorials come up that might explain it better than me.

This might not be the correct answer I am just learning css layout design and across my readings I have came across this.

I hope this helps!

Chris
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

It does, but what if the column is two column and each column is a different color/image? :lol: I may probably seem like an idiot about this :oops:
  • Firemaster
  • Novice
  • Novice
  • Firemaster
  • Posts: 22

Post 3+ Months Ago

You are not being an idiot you are just trying to learn and get your site up like the rest of us on here.

Okay the solution depends if your layout is fixed or liquid. If it is fixed then you can apply a background image to your page wrapper. Just in case that you don't know what I mean by a page wrapper it is the div that your whole page layout is set it to achieve the width and be able to position it anywhere in the website browser. What you do is make an image mirroring the layout. With the different colors for each column and main content area. So for example if you are layout is 900px wide and you want each column to be 150px and the main content area to be 600px then you make your image representing this. If you are not good with making images then let me know what you want I can make it up for fast in photoshop. Your image does not have to be big in height either just 2px to 4px.

Then in your wrapper div you add a background image and to repeat in the y direction (repeat-y). This will tile it vertically and not horizontally which we do not want. Think of the graphs you had to do in math class for geometry with the x and y axis if you are not grabbing what I am saying. Also look at the tutorial that spork said to read that dM wrote that will show you how to do this visually.

If your website is liquid then I think you have to set the height and you said that did not work.

By the way do you know of anyone or good sites to refer to for liquid layouts. I was going to do a fix design for my site, but I have changed my mind and decided to go with liquid, because of php and such.

Chris
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

I use fixed layout, and I do have a page wrapper.

Thanks though for the extra detailed explanation :thumbsup: I appreciate you taking your time :)
  • Firemaster
  • Novice
  • Novice
  • Firemaster
  • Posts: 22

Post 3+ Months Ago

No Problem that is what forums are for helping each other out! I hope you get it to work.

Chris
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

Alright thanks... One thing though. Can you create the image? :lol:

http://64.15.130.247/~bogey/index.php

If you can't it's alright... I'll put something together in MS Paint :D

Thanks

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 41 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.