No worries - That’s how you learn and its good to ask:)
Some of my replies may souind as though I am being awkward but I am just putting forward the other side of the coin and are meant in a light hearted way.
But first, I do not even try to design for IE6. That is a total waste of time, in my opinion.
No that’s fine and most people have dropped IE6 support now anyway. I still support IE6 but only at a minimum level. I know all the bugs and what to avoid so its no problem for me as I cut my teeth on ie5 and 6 but for others it would be time consuming to work out all the bugs.
First question:
Could you explain z-index? What is it, what does it do, and how do I use it? Is it supported by IE8? It would imply that it is a stacking order, so I get the impression it could be used to overlap two divisions, such as my sidebar overlapping the header in my design. Would I be correct?
Yes z-index determine how “positioned” elements are stacked on the page. It is supported in all browsers right back to the beginning although earlier browsers did have numerous bugs.
There are a couple of important things you should know about z-index:
- Only positioned elements can have a z-index (position:absolute,position:fixed or position:relative).
Therefore if you have a static (position:static - the default) element then z-index will not work alone. you would first need to add position:relative and then the z-index will take effects. Adding position:relative without co-ordinates will have no visual effect on the element but will allow z-index to work.
-
Ultimately its the positioned parent (with a z-index other than auto) that determines the stacking context of its children. A parent with a z-index of one will be “atomic” for all its children and even if a child has z-index of 9999999 it will not lie on top of any element outside its current stacking context that has a z-index of 2.
-
IE7 applies z-index:0 by default to all positioned elements which means that children can never escape from the confines of a positioned parent. This is an error and it should be z-index:auto by default which allows the children to interact outside that structure.
-
If no z-index is applied then elements that follow later in the html will generally have precedence in the stacking order where overlaps are concerned.
In your code example above, you have:
<style type=“text/css”>
html, body {
margin:0;
padding:0;
height:100%;
}
What is the purpose of “html” preceeding “body” in that style declaration? This is what I am familiar with:
When you create styles you can use a comma separated lists where property values may be shared between elements.
If for example you had these rules:
h1{margin:0 0 1em;color:red;background:#fff}
h2{margin:0 0 1em;color:red;background:#fff}
p{margin:0 0 1em;color:red;background:#fff}
Then you could use the comma separated list instead and save tons of code:
h1,h2,p{margin:0 0 1em;color:red;background:#fff}
The comma just separates the selectors just as though they were in example one. There is no relationship between the selectors in the comma separated list. They are all individual.
Explain this line and why is it separate from the #header ID selector above it?
- html #header { height:150px }
That is the IE6 hack and as you don’t support IE6 the code can be removed. It is a mechanism to supply styles to IE6 only using a flaw in its parsing mechanism. Its valid code but nonsense as the html element has no parent so the universal selctor (*) should fail at that position. IE6 gets this wrong and is therefore a 100% safe hack to use for giving styles to only IE6 and has been the lifeblood for many a coder.
We hide the height:100% from other browsers because that would limit the height to an initial 100% and thus content would spill out when exceeded. However IE6 treats height as min-height and will always expand a container to fit its contents.
What is "min-height" and what does it do? Why is there a "overflow: hidden;" rule in the #header seletcor? I know what "overflow" normally does (add's scroll bars), but I don't see the reason it would be in the #header?
min-height sets a minimum height for the page. I set height:100% for html and body (this s the only place you can really use height:100%) and then the first wrapper on the page can utilise min-height:100% and thus stretch all the way to the bottom of the viewport. You can’t nest min-height inside another min-height with a percentage value as that defaults to auto so the only time this construct is useful is on the page wrapper where the min-height:100% is based on the body’s height:100%.
The overflow:hidden was used to contain the floats in the header. there are many ways to contain floats but when you don’t need visible overflow then overflow:hidden is one of the easiest. If an element contains only floats then it has no height because floats are removed from the flow so you need ot contain the float when you want the parent to wrap around it.
Why would I want a full length sidebar?
That looked like what you were aiming for with your 900px high sidebar. Another magic number you plucked out of the air that has no relevance on your page (You can read up on the magic number here).
I could understand on a Web site that scrolls down seemingly forever (I hate sites like that),
Well you just created one foe me 
When I open your page in my browsers your sidebar scrolls down for 500px below the viewport yet there is no content down there. That’s a sure sign of a bad design concept. If you look at my example the sidebar goes to the bottom of the viewport and there is no vertical scrollbar. However my sidebar will increase in height should content in that column exceed the available viewport height as required.
but I like a defined page height.
The Number 1 newbie mistake I’m afraid. Fixed heights just don’t work on the web unless its a fixed height photo gallery with no real content but even then it would be in ems and not px so that it grows on font resize.
There was a campaign about Fixed heights and the slogan was "Just say No "
Too much scrolling is an annoyance,
…and that’s exactly what your page does for me. It gives me a great big vertical scrollbar and I have to go and look and see what’s there and find out there’s nothing there. So you’ve not only given me a vertical scrolbar you’ve made me look foolish for going and looking
unless it’s a blog or some other kind of “informational” site, and even many of them break up the content on several pages, a much better way, in my opinion.
I know what you were getting at and long pages can be a sign that the author has not thought enough about the content they want to present so pages that go on forever are a turn off also.
However you never need to define the height and just let the content define the height and in that way users can resize the text and you can add or remove content withoot changing line of code.
What in the world is all this, and what does it do?
#outer:before {
content:" “;
width:200px;
display:block;
position:absolute;
background:#2d2d2d;
top:0;
bottom:0;
left:0;
z-index:1;
}
#outer:after {
content:”";
display:block;
clear:both;
height:0;
visibility:hidden;
}
That’s just the css3 pseudo elements and allows us to place certain content/effect into the page via css.
I used #outer:before to apply the full length sidebar background to the page without the need for adding an extra element. The #outer:after rules were another float clearing technique and you can read up on it here along with the more advanced version.
Many more questions. What is .overlay?
That was an empty element I placed n the page to create that full width red background. As I mentioned above that stripe could be added a s a simple repeating background image to the body element instead - assuming you didn’t have another image on the body.
What is zoom: 1.0?
It is proprietary IE code (invalid but harmless) and used a s a trigger for haslayout. Most of IE’s bugs (IE6/7) are down to the element not having haslayout and you can read up on it in that link I just gave.
These are things I cannot find explained in anything I have.
Then you didn’t buy my book They are all mentioned in the Sitepoint reference which is takes from the book of which I was co author. You will also find a mention of most of these points in the CSS faq (link in my sig).
Your design philosophy is certainly different than mine. I see no reason to think of a Website any differently than when facing a blank piece of paper and envisioning the design coming together to fill the space.
Yes it is a fundamental change and I approach it from a coders point of view as drawings just don’t give the real picture
Designing on paper is fine but it only tells a fraction of the story. If I asked you to draw a picture on your piece of paper and then say tear it in half and see if the picture stills fit you couldn’t do it. Yet that’s exactly what we have to cope with on the web. We have no fixed drawing surface. We don’t even have control of the pencil.
A good website is a marriage of the two. Good design and a good user interface.
I think one of the reasons we have so many ugly Websites on the Net is because too many “designers” are programers only and have no artistic ability whatsoever. To me, design is everything. “Content” should be made to fit the design, and become part of it (unless the purpose of the site is only for information, in which case you are really just creating a “paper.”
No that’s the totally wrong way again and another common mistake - especially from designers. Content is king. There have been many surveys carried out and the one over-riding factor is that users will continue to revisit a site even if it is ugly but as long as the content is good and the site easily used. On the other hands flashy but unusable sites just die. As I said you want the best of both worlds but design should not outweigh content.
A company Website is to create an image. It also is for the purpose of creating an emotional response (favorable, of course) so that a visitor will make a decision to call for more information, for an appointment, etc. I like to say that a Website is “your company’s ‘face’ on the Web.” It better look good.
No - it better work or you will lose customers. It’s no good someone saying “ooh that looks nice” and then trying to click underlined text that’s not a link or fill in a contact form that doesn’t work or a page that is badly broken on the resolution they are viewing at.
Too much copy on a company Website isn’t going to be read. A well thought out headline (the purpose of which is to get the viewer to read the next line, i.e., the copy) is important. The copy should be well written, and elicit a response, but too much of it will lose the visitor. Tell about your product or service, but brevity is king. A good source on copy writing that I would reccomend to anyone creating Websites is “The Copywriter’s Handbook”, by Robert W. Bly.
Good content is good content It can be short or long depending on the requirements but usually on the web shorter is better as surfers have quick attention spans which is why they switch off a site that wont work for them. Many established surfers switch off images anyway to surf faster. I had connection problems for six weeks during sept/oct and the only way I could surf was with images and js disabled.
Remember google doesn’t see your images and for an ugly site google must be at the top yet it is one of the most popular because its so easy and quick to use. No splash page, no irrelevant features. Just straight to the point.
A company Website is an advertisement. That is why design is so important. It should quickly grab the attention of the visitor. An ugly Website isn’t going to do that, but will elicit a negative response. There are far too many Websites with too much “content” and not enough “design.” That’s because they weren’t designed by artists, but technicians. People who know nothing about advertising art.
I have an advantage over them. I am a graduate of The Art Institute of Pittsburgh (1964), and I have attended some good advertising seminars, lead by a “powehouse” in advertising, Jack Trout.
If all anyone wants on a Website is “content,” then just create a Wordpress blog and be done with it. That is what my former client did, and she is now the proud owner of one of the ugliest Websites on the Net. Design is nonexistant, and in my opinion, she destroyed her image. But, we had “issues;” she always had changes and additions for me to do, but she didn’t like paying for them.
The web is unlike any other medium and designers and experts from outside this medium have little relevance. A good design is important and fundamental design concepts and artistic qualities are also important but they are all secondary to the way that the web works. The best designers on the web are the ones that can marry those distinct qualities into a usable webpage.
These days its even more important to design with care as more and more clients are demanding responsive websites which cannot follow any single drawing.
I understand the designers view as I work with them all the time as I mainly code templates for designers but quite often I get designs from experienced designers that just won’t work on the web. Not everything is possible or feasible and just because you can draw it doesn’t mean it can be coded into a satisfactory working layout.
However after saying all that I still urge you to be creative and to think outside the box. Good design doesn’t have to be boring design - it just has to work. Don’t take my word for it either :). Do some research and come to your own conclusions.
(sorry, couldn’t help to do a bad joke… that’s me, I’m afrarid)
Didn’t you ask for help because it didn’t work? :scratch: But if it works, then I agree with you… you can’t ask for more.
Sorry about that