#1
  1. No Profile Picture
    Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2002
    Posts
    8
    Rep Power
    0

    Question [CSS] evaluate my style sheet, and layout problems


    Hi!

    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).

    Home page
    Style Sheet

    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!

    Chap
    Last edited by chap; September 30th, 2003 at 04:31 AM.
  2. #2
  3. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1100
    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.
    Code:
    border: 1px solid #000;
    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:
    Code:
    border: 1px solid #000;
    border-bottom: 0px none;
    The above will place a border on the top, right, and left of the element.


    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:
    Code:
    <div style="width:200px;">
      <div style="width:198px;border: 1px solid black;"></div>
    </div>
    This also applies to any padding and/or margins you give to an element. An element's total width is
    Code:
    margin + border + padding + width
    Another helpful site: http://glish.com/css
    # Jeremy

    Explain your problem instead of asking how to do what you decided was the solution.

IMN logo majestic logo threadwatch logo seochat tools logo