Trying to get div design to work

[Sykoi]

Example of design: http://www.eyesoute.com/new/
New div version: http://www.eyesoute.com/new/index2.php


I decided to try to make an all div design to see how I like it, but I'm having some troubles.... I can't seem to get the entire design to stretch 100% width/height, and not have extra space at bottom from the divs stacking on each other.

I would also like to know the best way to get a little watermark (Shown on both pages), to stay in that area, below the text but still in sight... I plan on having the div with content in it, have a background image, so that means I can't just put a background: bottom right, in the content div... Right? Or can divs have more then one background (That would be oh so nice)


Note: You must view the second site in IE right now, for some reason it does not work outside of IE (Another problem I need help with )


Thanks in advanced... I'm not really new to divs, but I am new to making pure div designs.

[Ryan Fait]

This belongs in the CSS forum.

[moojoo]

unfortunately while css 3 I believe supports multiple background images it is not widely supported so you are stuck with the css 2.x spec for a while.

BTW: Safari has uspported multiple background images since v 1.3

http://decaffeinated.org/archives/20...ckground-image

[Ryan Fait]

I wish browsers would be quicker to eat up new technologies. It seems ridiculous to me that it basically takes at least 5 years for anything significant to go into effect.

[ukgeoff]

As a general rule, if something works in IE but not Firefox, then your code is screwed.

Firefox is more compliant and less tolerant of code errors.

I suggest you seperate ALL your css into a seperate file only using inline css if you reall, really have to.

Looking at your code:
The correct syntax for including a background image is, 'background-image: url...' and not 'background: url...' as you have.

As you are using xhtml, then you close tags such as img should end ' />'. Note the space before the /. your img tag closes using the old html format.

With regard to your watermark question; you could have a div that wraps around everything else and set a background image here with your watermark. Other 'content' divs would then run over the top of it. As long as your content divs have a transparent background, then your watermark will show through.

You should note that having text on top of images can make reading the text difficult if you are not careful. your current choice of foreground/background colours is also going to cause accessibility problems.

[moojoo]

Safari also supports the CSS 3 columns module. heh. Konqueror supports both as well I believe now makes sense since both are KHTML based. Don't know about FF though but I think it does too.

[chubbs]

what about Opera?

[Sykoi]

Thanks everyone, but one very important question left... Why is it my div doesn't stretch 100% height correctly? I have a 100% height body tag, I have 100% height/width parent div, and the div I'm trying to stretch has 100% height as well... With or without content, it doesn't stretch at all in FF, and stretches 100% + size of div above it in IE.

[Sykoi]

Originally Posted by ukgeoff

As a general rule, if something works in IE but not Firefox, then your code is screwed.

Firefox is more compliant and less tolerant of code errors.

I suggest you seperate ALL your css into a seperate file only using inline css if you reall, really have to.

Looking at your code:
The correct syntax for including a background image is, 'background-image: url...' and not 'background: url...' as you have.

As you are using xhtml, then you close tags such as img should end ' />'. Note the space before the /. your img tag closes using the old html format.

With regard to your watermark question; you could have a div that wraps around everything else and set a background image here with your watermark. Other 'content' divs would then run over the top of it. As long as your content divs have a transparent background, then your watermark will show through.

You should note that having text on top of images can make reading the text difficult if you are not careful. your current choice of foreground/background colours is also going to cause accessibility problems.

Thanks... And regarding the background thing... http://www.w3schools.com/css/pr_background.asp - Why does w3c say background: url() is acceptable use, if its not correct? (Not trying to be mean, its a serious question... If background isn't meant to be used like that, why does w3c say its okay?)

And this is all temporary til I get everything working... Then I make it proper xhtml, and move all the style stuff to css.

[Ryan Fait]

There is absolutely no reason why you can't use the background property. The background-image property is longhand, but they both do the same thing.

[Sykoi]

Well after about an hour and a half of working with a friend of mine, I got it to work... In a way
www.eyesoute.com/new/index2.php

As you can see, a new problem has arisen... When content goes over the 100% mark, the divs don't stretch with it. Now this is obviously because I'm using position absolute on the content... However, it is the ONLY thing that has worked for me....

Any suggestions?

[chubbs]

U want scroll bar no? try to use overflow:auto;..

[Sykoi]

I don't want to use autoflow, I want the entire design to work correctly and use the browser's scroll bar only when needed, and not use a div's scroll bar

[Lchad]

Sykoi... I've been following this thread in hopes of learning something..
Can you explain how you solved the problem?

[Ryan Fait]

You've got a few minor problems in Safari with the login form. You should set everything in that area zero for margin and padding.