September 30th, 2003, 04:09 AM
[CSS] evaluate my style sheet, and layout problems
I've been trying to layout my site using css and a minimal of tables.
I'm still new to CSS and ahve been following online tutorials and trying to get snipets of code from reference sites.
Could you take a look at my Style Sheet and my source? Am I coding it properly? Is there a better way of doing something? Make it more compatible with other browser (so far I've only tested it with IE).
Some specifics questions I have are:
1. Here you can see that the menu floating on the right bleeds through its container. I tried to put a spacer div there, the right menu will fit into the container with no bleeding, but there will be empty space the length of the left menu before the right menu shows. Is there a technique to have the right menu fit there properly?
2. Here you can see that main (white part) div, there are individual 'posts'. They're all aligned properly, until they reach pass the left menu, then the 'post' divs begins to align more to the left. This happens throughout the site whenever anything in the content div extends pass the left menu. What's happening there?
3. I'm trying to set up a thumbnail gallery, I was going to use float: left; for each image to line them up. I've given up with that and have gone back to tables, because when I tried that it looked weird, period. I thought putting a spacer div there would help, but I got the same problem as in 1. Here is the gallery page. Any idea how I can do this with CSS?
Thanks ALOT for taking the time to read this. ANY help is GREATLY APPRECIATED!
Last edited by chap; September 30th, 2003 at 04:31 AM.
September 30th, 2003, 01:58 PM
I skimmed through your stylesheet and noticed a few things that can be written with a little less code right off.
Any time you have a border that spans all for sides, just use "border" instead of "border-left", "border-right", etc.
On the same lines, I noticed that a few places you specify the border for just three sides. You can write that in two lines like this:
border: 1px solid #000;
The above will place a border on the top, right, and left of the element.
border: 1px solid #000;
border-bottom: 0px none;
The rest I think is a misunderstanding of the box model. Let's take your left nav menu. (I didn't look exactly, this is just what I think is going on). The container has a specific width, we'll say 200px. Then you put another div in there and give it a width of 200px and a border width of 1px. This makes that element's total width 202px. That's 1px + 400px + 1px. B/c of that, the element exceeds the container's width and pops out of it. This is how containerships should look:
This also applies to any padding and/or margins you give to an element. An element's total width is
<div style="width:198px;border: 1px solid black;"></div>
Another helpful site: http://glish.com/css
margin + border + padding + width
Explain your problem instead of asking how to do what you decided was the solution.