Trouble with my .css

[cloudee1]

I have only just started look into cascading stylr sheets and things were going along fine but for some reason this does not do what I think it shoule do.

I am trying to make the background image of the map area tile down to the bottom of the page,

Code: Select all

#menu     {
    position: absolute;
    left: 0px;
    right: 174px;
    top:130px;
    background-image: url(map.jpg);
    background-repeat: repeat-y;
    width: 174px ;
    height: 100%;   
    text-align: center;
               }

I think it should but it doesn't. :-\

Also I was wondering if it was possible to regurgitate lines of text from the .css, for example any disclaimers or copyright information.

[gaf]

Hello,
I think the problem is that you're mixing sizes in pixels with sizes in percentages:

Code: Select all

top:  130px;
height: 100%; 

Percentages always refer to the parent frame - in this case this is the window-area itself. Your menu will therefore be 'top' longer than your window (bottom = top+height).

From what I know there are three ways to solve this problem:

Code: Select all

a) Assign your menu a fixed height: (-> all values in pixels)
    top: 130px;
    height: 300px;

b) Use 'bottom' instead of 'height:' (-> all values in pixels)
    top: 130px;
    bottom: 0; 
    /* 'bottom' counts upside down - 0 is the window's lower border */
    /* X would be X pixels/percentages above the lower border */

c) Use relative values for the top-offset aswell: (-> all values in percentages)
    top: 20%;
    height: 75%;

(a) Is only usefull for a menu because it (normally) has a fixed height
(b) Will make sure that the menu always goes down all the way to the window's border, but the y-offset is still in pixels which may look stupid when resizing the window
(c) Uses percentages only so that the page will look exactly the same in all resolutions

Here's how I normally do it:

Code: Select all

#menu
{
    position: absolute;

    left:    0px;
    width: 174px;

    top:     20%;
    height: 75%;

    background-image:  url(map.jpg);
    background-repeat: repeat-y;

    text-align: center;
}

Also I was wondering if it was possible to regurgitate lines of text from the .css, for example any disclaimers or copyright information.

I'm not sure if I really understood what you mean, but css is only used to describe the look of a html document and not its contents...

regards,
gaf

[cloudee1]

Alright I have been fighting with this and fighting with this, while I don't have any specific questions, I would LOVE some suggestions.

I have scratched my head again and again, I think I might just be fundamentally missing something though cause my page has some definate bugs which I am trying to work through.

If anyone is bored and would like to take a peak at the site to see if there are any coding suggestions, you can do so here, or the .css here. I think I am trying to do too much with my css, but I don't really want to do less. :-\

Only this page of the site is being operated by my css, all others are standard html, It looks relatively fine at full screen in IE, but firefox struggles with some of it, and they both kind of fall to s**t when you start resizing the screen, I can't seem to lock seperate elements together (when horizontal scroll bar is genereated, I want all elements to stop resizing, currently some do, some don't) This site has ad banners which are added by the free host to the top and bottom which create special alignment issues that really help this last issue stand out (ads aren't currently visible, ;D thanks to my css.) I'm probably setting the position wrong, my relatives and absolutes are probably all jacked, any way I'm weeding through what I've done and would appreciate any help.

[gaf]

Hello,
I just noticed that you've solved most of the problems yourself by now. One thing that (IMHO) remains is that the menu-section on the left-side scrolls with the page. This could be changed by using "position: fixed" which is, however, not supported by IE. Furtunately I've found a very usefull package on the internet some time ago that paches this bug (aswell as a lot of others).
http://dean.edwards.name/IE7/

In order to demonstrate it, I've uploaded a small design frame-work to my own webspace:
http://free.pages.at/cosmo86/design/

Now resize your (IE) browser window so that the contents on the right doesn't fit into the page any longer and scroll the page down. The menu should now stay on a fixed position which is much more convenient, especially if your page's getting longer.

regards,
gaf

[cloudee1]

Hey gaf thing's are coming along well, thanks for trying to help but I had a question about your example you put on your site,

by changing the length of the content in either the right or left column, they no longer share the same height. Is there a way to marry these two togather so that the background of the shorter column will still extend as far as the longer, but still seperate.

also when resizing the screen, the box on the right drops down below the box on the left, is there a way to prevent this.

[gaf]

Hi cloudee,
you seem to have found one of the week-spots of css. As long as IE desn't support the css-table model you can't adjust the height with css but have to use java-script. Since I don't have the slightest idea about js myself I'll just pass on some links to sites explaining it:
http://cross-browser.com/x/examples/layout2.html
http://www.sitepoint.com/article/explor ... css-layout

I hope that this is of any use to you...

Also when resizing the screen, the box on the right drops down below the box on the left, is there a way to prevent this.

This occures whenever one of the columns can't be further resized because of it's contents (e.g lenghty word, padding). You can circumvent this by using "overflow: hidden" to simply clip the contents in such cases and defining the padding in percentages rather than a fixed size.

regards,
gaf

[cloudee1]

Alright I have solved 99% of my issues as far as viewing in Internet Explorer ( the marquee right edge minimizes too far, I can live with it for now!) ;D

Firefox still has a couple of issues and I don't know why, I thought I had planned for both.
1. again the picture underneath the map doesn't scroll down, but in this version that is actually the Main sections background, seperate from the map completely so go figure.

2. there are a couple of long words, without spaces which are hidden, explorer finds them and stops the minimize, firefox ignores them and minimizes ad infinatum.

But for now I am very pleased with the layout result, and I would like to know how it appears on other peoples browsers.
Using the info gathered from the screen size poll, to my dismay there were more 800x let alone a 600x than I had expected, but I am proud to say that even the latter user could still minimize some (not alot though.) If anyone has a minute whether you are using the same browsers or not, I would love some feedback or suggestions about my layout. I am trying to do it without java, or without tables so if your suggestion involves either, thanks but probably not.

Anyway let me know what you think. The links in one of my above post are still current, the web in my profile is not the right place.

[gaf]

Works pretty good on Opera [7.54] aswell...

There are a couple of long words, without spaces which are hidden, explorer finds them and stops the minimize, firefox ignores them and minimizes ad infinatum.

You could use "min-width" to define the minimum size of the columns in pixels (The actual numbers can be calculated so that the site supports every resolution from 800*600 and upwards).

regards,
gaf