Hello, I’m working on www.dzo.bg.
The designed layout is using 100% height.
It has 3 backgrounds:
Currently I’m using nested (100% height) div elements and a workaround which I dont really like (overflow: hidden to the html and body).
This method doesnt work in IE7 so I use another styling there which lack the 100% height.
Do you have any suggestions on how to achieve this ?
Thank you for your answers. There are truly useful to clear out some doubts in my mind.
I want to dig in in more overall philosophical look over markup but I know I shouldn’t. I will limit myself to:
Yes I know I can do it merging the gradient and the dots. But I simply wanted to see whether a layout with dynamically resizing gradient, dots and 1 more background is possble. It is yet not possible for every browser.
The framework I’m using is not CSS or markup framework (http://diem-project.org/). It is much more. It lets you use graphically insert components, modules, edit them. A more intuitive way to describe your logic.
The price you pay is that you must let the framework recognize the hot spots where all this interaction can happen. Well I’m willing to do so as I support a workflow in which I believe should be more popular.
Pity that the machines are not yet so advanced to let them automatically generate markup according to lets say a well grouped and labeled psd.
We must understand that writing markup by humans is a temporary task and must be handled to the machines as soon as possible. I think that pointing that a logo is a logo and menu is menu (which is obvious to a human being) is not meant for people.
Good sunny day 
@deathshadow60 This useless mark-up you are talking about is put by a framework which eases the process of development. Please don’t claim that if the div elements are helping for a pleasant software development which is rare to find they are useless. Also the important information is marked as semantically as it possibly can be.
Conditional comments is the preferred way to write IE specific code for me. Hacks are uglier. And I said that I do make the layout different for IE7.
@Rayzur The “no scrolling” problem should be fixed. When I said that I put overflow:hidden to html and body I missed that I recreate the scroll possibility later on when I set overflow:auto to one of the wrapper div elements. I just missed to add it back after the tests.
@deathshadow60 how can I apply a dynamic gradient and the dot pattern over 1 element ?
I still have no other choice but that. 
That’s what I thought
Can you make a image of what you are trying to do? (Mein Gott, I’m asking for a picture of a layout before it’s coded – I’m sure some folks around here are thinking hell just froze over)
It’s very cold in here…
.
Ah yes, ‘frameworks’ – how to flush web development down the toilet AND make it actually HARDER to develop, not easier. Ever heard the old rule “the less code you use the less there is to break?” Frameworks, ESPECIALLY for HTML and CSS are only making your life MORE difficult and resulting in higher hosting costs, longer development times, BIGGER maintennance headaches, etc, etc… Much of it even appears to defeat the point of using CSS in the first place.
I mean this:
<div id="dm_page">
<div class="background-mask">
<div class="page-background">
<div class="main_layout">
<div class="dm_layout">
<div class="clearfix dm_area dm_layout_top" id="dm_area_3"><div class="dm_zones clearfix"><div class="dm_zone"><div class="dm_widgets"><div class="dm_widget main_logo_and_slogan"><div class="dm_widget_inner"><div class="identity fltbox"><h1 class="logo"><span class="link dm_current">
Is a giant sign to throw whatever framework that is in the trash. You’re making life HARDER for yourself, not easier. If that ‘framework’ is telling you to nest every single element five to ten DIV deep, whoever wrote it needs to do the world a favor, back the <snip /> away from the keyboard and take up something a bit less detail oriented like macramé weaving. Here’s a tip, if you have TWELVE DIV before you even get to your first tag with meaning and then another two tags before you even get to the CONTENT of all that wrapping, you’re screwing yourself over before you even get started.
For what you have so far, there is little reason for the code to be more than:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Home - ???
</title>
</head><body>
<div id="pageWrapper">
<h1>
dzo.bg
<small>
<span>online ??????? ??</span>
?????????? ??????? ???????????
</small>
<b><!-- image replacement --></b>
</h1>
<div class="section">
<p>
???????? ??????????,
</p><p>
?? ?????? ???????? ??????????? ???? ??????? ???????? ??????, ????????? ????? ???????.
</p><p>
????, ????? ?????? ???????? ? ???? ????????? ?? ????? ???-????????? ? ????????? ?? ??? ?????????.
</p><p>
?????? ?????? ?????? ? ????? ?? ???!<br/>
??????? ?????????!
</p>
<form id="startSurvey" method="post" action="http://www.dzo.bg/">
<fieldset>
<span>
<input type="submit" value="????????" />
</span>
</fieldset>
</form>
<!-- .section --></div>
<div class="section">
<p>
??? ?????? ?????? ?? ?? ???????? ?????? e-mail ?? ?? ?? ??????????? ?????? dzo.bg ? ??????.
</p>
<form id="quickNewslletter" method="post" action="/+/quick-newsletter-subsribe">
<fieldset>
<input
type="text"
name="quick_newsletter_form[email]"
id="quick_newsletter_form_email"
value=""
/>
<input type="image" src="images/submitButton.png" alt="???????? ??" />
<input type="hidden" name="quick_newsletter_form[id]" id="quick_newsletter_form_id" />
<input type="hidden" name="quick_newsletter_form[_csrf_token]" value="7071a2874db65adcf31fde84e1f4ee46" id="quick_newsletter_form__csrf_token" />
</fieldset>
</form>
<img
src="images/dzo_intro.gif"
alt="rotating text that should probably be markup and not in a gif"
/>
<!-- .section --></div>
<!-- #pageWrapper --></div>
</body></html>
… and for majority of page stylings it is unlikely you would need to add more than four or five additional tags to that. (excuse the ???, I’m not set up to deal with Cyrillic right now)
Make them as a single image ahead of time instead of two separate images.
Though without seeing what it is you are talking about trying to do I’m pretty much guessing. You might be asking for something I wouldn’t even do on a design or I may be misunderstanding the questions. You’re asking for dots over a gradient so make a single image that has the dots over the gradient… and then tile it.
Though it could also mean you need a extra div with a ride up margin on it so you can do the gradient and then the body tiling. In either case I’d build them as flattened pre-combined images so you don’t have to mess with that bandwidth chewing broken nonsense known as alpha transparency.
Can you make a image of what you are trying to do? (Mein Gott, I’m asking for a picture of a layout before it’s coded – I’m sure some folks around here are thinking hell just froze over)
If it’s shoving markup bad enough that the emperor would make the garden available to you, then it most certainly is. The website and markup from it’s example pages being so blatantly bad that whoever wrote that system has NO SMEGGING BUSINESS writing something that outputs HTML. Mein gott it makes the output from Wordpress 2.x templates look good! … and making Wordpress look good is like making a 1984 Yugo GV look like a quality automobile!
So a glorified wysiwyg to try and make the back end code – Oh great… and we thought WYSIWYGS for layout were bad.
Which no computer is smart enough to handle properly in the first place.
Heh, funny – since I consider the PSD first approach to be totally retarded and putting the cart before the horse.
No, no it isn’t.
Gehugafugah?!?
Looking at that CMS (which is all it is) even their main page sends up warning flags for me – like pimping that it uses that fat bloated train wreck of bull known as Jquery… Or that like most sleazy shortcuts it’s basically shooting yourself in the foot.
NOT IMPRESSED, and my advice would stand. Kick that crap to the curb and SAVE yourself some development headaches, or at least deploy a website that isn’t shitcanning yourself before it’s even indexed by the search engines.
If the people developing that don’t know what’s wrong with:
<body class="page_main_root home"><div id="dm_page"><div class="dm_access_links"><a href="#content">Go to content</a></div><div class="dm_layout"><header class="clearfix dm_area dm_layout_top" id="dm_area_5"><div class="dm_zones clearfix"><div class="dm_zone" style="width: 20%;"><div class="dm_widgets"><div class="dm_widget content_title content title"><div class="dm_widget_inner"><p class="t_site">Diem</p></div></div></div></div><div class="dm_zone" style="width: 80%;"><div class="dm_widgets"><div class="dm_widget search_form search form"><div class="dm_widget_inner"><form class="clearfix" id="dm_form_1" method="get" action="/search"><input type="text" name="query" class="search_field" id="query" /></form></div></div><div class="dm_widget navigation_menu navigation menu"><div class="dm_widget_inner main_menu"><ul><li class="first"><a class="link" href="/download" title="Download Diem: GitHub repository & tgz packages">Download</a></li><li><a class="link" href="/blog/online-demo-available" title="Online demo available">Demo</a></li><li><a class="link" href="/plugins" title="Plugins and Extensions">Plugins</a></li><li><a class="link" href="/diem-5-1" title="Diem 5.1 | Documentation">Documentation</a></li><li><a class="link" href="/blog">Blog</a></li><li><a class="link" href="/community">Community</a></li><li class="last"><a class="link" href="/development">Development</a></li></ul></div></div></div></div></div></header><div class="dm_layout_center clearfix"><div id="dm_content"><section class="clearfix dm_area dm_page_content" id="dm_area_9"><div class="dm_zones clearfix"><div class="dm_zone metal ml20" style="width: 490px;"><div class="dm_widgets"><div class="dm_widget content_title content title"><div class="dm_widget_inner"><h1 class="t_big">Symfony + ZF + jQuery</h1></div></div><div class="dm_widget content_text content text"><div class="dm_widget_inner pt10 mb30"><div class="dm_text text_default clearfix"><h2 class="text_title outside">Open Source CMS & CMF</h2><div class="text_content"><div class="markdown text_markdown"><p class="dm_first_p">...designed to build not so simple websites.</p>
… they need to go back and learn some HTML since that’s two or three times as much markup as necessary, a complete /fail/ at a proper form, improper heading structures (especially that H1 since now every other heading on the page is a subsection of that), dozens of pointless classes and decade out of date nonsense like clearfix, redundant/pointless title attributes, and pretty much it appears to be presentational classnames – defeating the point of using CSS in the first place so bad you might as well go back to using HTML 3.2!
Sorry, didn’t mean to crap on it from orbit – but that’s REALLY bad. I’d suggest avoiding using that “Diem” garbage as that’s some of the worst coding I’ve EVER seen! It’s like the stack of books from Ghostbusters. “You’re right, no human being would ever stack books like that…” – exactly the type of retarded piss poor coding I’d expect out of someone who ‘has’ to practice whitespace compression on everything.
I would simplify it and do it all in one image but of course doesn’t allow the flexibility of changing the mask on different pages but the you could just as easily change the image anyway.
http://www.pmob.co.uk/temp/gradient-dots.htm
Th image needs to be made better and a bit taller to cater for all monitors. No one will notice the difference.
Hi,
I’d say it’s time to rethink that page altogether. Height:100% with overflow:hidden is enough to turn your visitors away. As it is for me right now with a full height viewport I am seeing content cut off at the bottom that I can’t access.
I would go with a Min-Height:100% layout and use your body element for an actual gradient image.
You might need one extra div for your your dot pattern BG since your gradient image would fade in to a BG color on the body. At least that would be the case when setting the gradient as a no-repeat BG img.
DS beat me to it
I’d probably put the gradient on the body, put the dots on the gradient too, and the content background should be simple since that would go on your width and min-height wrapper.
Though I’d have to see the effect you are going for to say for sure, and there are other questions like are you doing fixed width, are you keeping the absurdly undersized fixed metric fonts, are you keeping the 20+ DIV for nothing nesting with the non-semantic markup filled with outdated methodologies like clearfix or the pointless IE conditional comments, etc, etc. You’ve got enough div and classes in there to choke a stable full of horses and for WHAT?!? That almost every class in it appears to be presentational (saying what it looks like) instead of semantic (saying what it is) isn’t helping.
I’d probably be throwing away that markup before attempting to add anything complex for styling.