The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Problem with "Faux Columns"., Can't center everything and have a section of the top of the page
PathfinderMMD
post Dec 25 2009, 07:20 PM
Post #1





Group: Members
Posts: 3
Joined: 25-December 09
Member No.: 10,687



Hey everyone, first time poster here!

I have been teaching myself HTML, CSS and have just started JavaScript as well. I am working on my first actual, public site (For a local museum that has a 10 year old site). Everything's going well, as well as you could expect for a first-timer anyway, except for my last remaining bit of trouble. The columns. The template that I am making (And have made an example front page in for now) has a header, a nav-bar attached immediately below it, then a small margin. Below this, there is a column on the left with a menu, in the middle there is a content area and to the right is another column-menu.

At first I simply tried setting min-height and height to 100%, which quickly showed itself as useless. After more scouting around on the net, I found that if all the tools I had were HTML and CSS, I had to go for faux columns. I tried putting them inside a <div> I have that envelops the 2 menus and the content, but just like the coloured parts of the menus that surround the links in them, the background inside this wrapper div didn't fill the page all the way down to the footer!

I realised that I really had to use my faux columns as the page's background, not just a div's background. So I started trying that. The page is 800px wide, so I made an image that's 800px wide with colour in the right places, 2 px tall. After some tinkering with various strange results, I ended up with simply defining background-position:center and background-repeat:repeat-y. The background now takes up space where the header is, it fills out the previously white margins between the menus and the nav-bar/header, as well as the margins between the menus and the footer.

Basically, it makes the entire page look like one big block. I know how to center the background image, but the problem is that I need to center the image AND prevent it from exceeding the confines of the wrapper around my 2 menus and content. Basically, I need to put margins on the background image, but when I try to, it seems to have no effect or, perhaps worse, simply push the entire page down (Or up) with no effect on the background.

I am at a complete loss. Can someone help? I can upload a screenshot or post parts of the HTML and CSS if needed!

Thank you in advance!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 26 2009, 04:03 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



When I first read the title of your post, I thought you talked about Dan Cederholm's article at Alistapart (http://www.alistapart.com/articles/fauxcolumns/).

Can you upload your page somewhere, even temporarily, and post the url? Then we can see all HTML and CSS, and everthing that go with it. That's better than screenshots or code snippets.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PathfinderMMD
post Dec 26 2009, 05:54 AM
Post #3





Group: Members
Posts: 3
Joined: 25-December 09
Member No.: 10,687



QUOTE(Frederiek @ Dec 26 2009, 10:03 AM) *

When I first read the title of your post, I thought you talked about Dan Cederholm's article at Alistapart (http://www.alistapart.com/articles/fauxcolumns/).

Can you upload your page somewhere, even temporarily, and post the url? Then we can see all HTML and CSS, and everthing that go with it. That's better than screenshots or code snippets.


Unfortunately I don't have anywhere to upload the page itself right now, but I can attach what code I have right now. Keep in mind that I haven't gotten it validated or anything like that, so it may well be very messy. smile.gif

I've tried what that ALA article recommended for the faux columns background, but it resulted in 2 static columns around 500px tall that didn't grow, no matter if I used it in the background or in a div I made to contain the area I want the columns to stretch in.

I hope you can help! The page right now looks like I'd want it to, but that's because I've defined a height for the background (670px I think) not because it stretches. :|

Edit: And I guess I should note that it's the left and right columns I'd like to stretch. smile.gif

This post has been edited by PathfinderMMD: Dec 26 2009, 05:55 AM


Attached File(s)
Attached File  templatepage.rar ( 105.16k ) Number of downloads: 166
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 28 2009, 04:23 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Then you might want to take a look at http://css-discuss.incutio.com/?page=AnyColumnLongest and maybe http://css-discuss.incutio.com/?page=HundredPercentHeight too.

You have <div id="newsitem"> twice. Know that ID's must be unique and can only be used once in a page. Though you could change it to a class, in the CSS (.newsitem instead of #newsitem) too.

And since the colors are flat colors, I don't see why you should use a background image to simulate faux columns.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PathfinderMMD
post Dec 28 2009, 07:19 PM
Post #5





Group: Members
Posts: 3
Joined: 25-December 09
Member No.: 10,687



QUOTE(Frederiek @ Dec 28 2009, 10:23 AM) *

Then you might want to take a look at http://css-discuss.incutio.com/?page=AnyColumnLongest and maybe http://css-discuss.incutio.com/?page=HundredPercentHeight too.

You have <div id="newsitem"> twice. Know that ID's must be unique and can only be used once in a page. Though you could change it to a class, in the CSS (.newsitem instead of #newsitem) too.

And since the colors are flat colors, I don't see why you should use a background image to simulate faux columns.


Thank you for the reply!

I want to use a background for faux colums because I haven't been able to find a way (With (X)HTML and CSS) to force the two colums to stock to the footer (With a 10px margin). They automatically simply encase the menus, unless I set a min-height, which I did. I tried the 100% thing earlier, and it only partially fixed things. The columns run further down the page, but not all the way to the footer, and I really don't know why.. Unfortunately I also have anchors within some pages (That aren't included), so the other method doesn't work either. sad.gif

I suppose there is nothing else to do then, until I know JavaScript? If so, thanks for your help, regardless. And thank you for pointing out that I can't use ids more than once, I'm still learning. smile.gif

-Path

This post has been edited by PathfinderMMD: Dec 28 2009, 07:19 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 29 2009, 05:37 AM
Post #6


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Ok, let's try again then: http://www.cssstickyfooter.com/.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 7th December 2019 - 09:27 AM