-
Hi,
Can you attach a real size screenshot of the layout you posted in your first post as it will give me something to better work with and see what can be done?
Is the sidebar on top of the stripy background and what content is to go into the sidebar?
If I understand correctly then I feel you may need to look into using a min-height:100% wrapper as in the example I posted previously which gives you all the height you need to apply images without needing a fixed height. The middle section looks awkward though and would probably need to be done with a min-height in pixels to get an initial height if the content is short.
If you can post a full size screenshot then I will see if I can cut it up and insert it into a structure or at least give some better pointers.
-
I'll do better than that. I'll go ahead and create a subdomain to my dreammakergraphics.com website and upload the files. Then you can look at it live. I'll do it tomorrow if I get a chance. If not tomorrow, I'll have it on Wed.
Thanks, Paul.
-
Ok, just post when its ready to view and I'll take a look.;)
-
It's ready. You can view it at: http://www.designjewel.dreammakergraphics.com/
Of course, this is just a ficticious company, and just an experimental design. I'd like to have some pre-coded sites ready to customize for future clients. Besides, this keeps the creativity juices flowing! :) I basically like the design very much. I always figure when I create something, if I still like it the next morning, it isn't too bad. I never did a black-and-white design before, and I have been experimenting with the idea of "virtual" columns, fading into the background. The content itself will define the boundries.
I haven't yet decided if I want a clearly defined footer. I may just leave it as it is. Of course, photos, and copy can be rearranged, resized, repositioned ... any number of things might happen. Right now I'm just interested in getting the "bones" right.
-
It looks fine in Win 7 (FF 16, IE 8, Chrome) The HTML is OK and the CSS looks fine too. A first suggestion is that instead of using
Code:
*{
margin: 0;
padding: 0;
}
You would use some other kind of reset, like listing all the tags and then apply those rules
Code:
html, body, a, p, ul, ol, ul ... {
margin: 0;
padding: 0
}
It is not because what you've done is wrong but because the second option is known to be faster
-
Thank you very much, and thanks for the suggestion for reset. I didn't know that.
-
Hi,
That's much better:)
You've got the page centred now and everything aligned nicely (apart from IE7 but that's another story).
Those gradients are a problem but rather than use height you should use min-height instead which will allow you to add more images and text without changing the code. You've done a pretty good job there and taken some of the advice given which is good.
If I was going to code this then I would cheat a little as I don't like the fact that you need to specify height at all (even a min-height in pixels). I would paint the background in a single image in one go on the outer. The image will be about 5k as opposed to your 1k for both the images but the bigger image won't need to be repainted across the screen like your which can slow browsers down. I never use 1px images as that makes the browsers work to hard and you can see everything being drawn on a heavy site. You can use a 10px wide image and probably not increase the file size or the request time but the browsers will draw it ten times quicker.
I'd roughly do it like this.
It needs no heights apart form an initial min-height in percentage which effectively is viewport height so there is no change and no scrollbar when not needed. It also uses the sticky footer approach to keep the footer at the bottom of the viewport (see the css faq in my sig for info on a sticky footer).
I floated the sidebar in case you needed a footer that spans both columns which you can't do if you have an absolute sidebar. (Your absolute sidebar is fine though as long as you aren't adding any other content in too it.)
The rest of the page is much the same as the example I gave before. The html could be shortened in places but I like to keep a solid structure that I know will work and not break. I also enclose images in either a div or a p element as an image is an inline element and should be in a block parent. It's like having a span on its own next to a div. It's not invalid (unless its a direct child of the body) but just not semantically correct - although most everyone disagrees with me on this so feel free to ignore me on this point).
Otherwise its much the same as yours. The sticky footer is a bit complicated but you could lose that if you wanted more simplicity.
Hope it gives you some ideas anyway.:)
-
Thank you very much Paul. Now you've taught me something else that should have been obvious; that of the 1px background image making the browser work harder. I was under the misconception that smaller was better, but I can see that isn't necessarily so. Thanks for that tip. That can be changed easily.
I think sometimes I tend to regress. I have been in the habit in the past of placing images as you suggested (in a div or p element). I don't know why I didn't do it here. Just not thinking, or a brain fart, I suppose, or in too big a hurry to get a couple of images placed to see what the design was going to look like in my browser. The problem with that is that without you pointing it out, I may never have gone back and changed it.
It will take me a while to study and digest everything you've done, but looking at it quickly just now, I get a pretty clear overview when I see the div elements outlined and view the class and ID's.
I think you have opened some doors for me, and I thank you very much (also opened my eyes). I'm sure I'll have a few questions after studying what you've done. It looks great!
