Hi guys! I need some help with my site.
You'll find the code and everything at the site here:
http://venomousims.comze.com/
(It tends to load a little slow sometimes, and the server crashes, the host is quite bad..)

•So the first problem.
It's that the header and navigation bar doesn't align right. As you can see. I'm totally pissed off by this problem, lol. I think it's really strange why they doesn't want to match up. A dear friend of mine says it's because the roll-over pictures ain't in the same width. He says it's too complicated to explain with written words so. But I don't understand why the width of them should effect it. O_O Also it looks like the roll-overs are a bit higher up than the side pieces? So how do I solve all this?

•Second problem. Is that the footer and Plumbob (the green diamond shaped thingy) is out of place. The footer should be right under the main content. And the Plumbob should be just a little to the right of the header. Before the positioning of it worked but now it isn't.

•Third problem. The text in the main content doesn't have the right margin / padding to the sidebar. I've tried both margin and padding on the sidebar as well as the text. But it doesn't work?

Thanks in advanced! I hope you understand, if you need more information, please ask!

-Nors

First problem: I'm not seeing a problem with the alignment or the rollovers in FF or IE8, so which browser IS the problem occurring in?

Second: plumbob - first, set #page to position:relative. Then set the plumbob to right: 0; - if it's not over far enough, adjust accordingly.

footer: By "main content" do you mean you want it BELOW #paper-c? If so, then you need to pull the #footer out from inside of #paper-c and put it AFTER it.

Third problem: I put a 40px RIGHT margin on #sidebar and it did push the #m-text div over to the right.

Couple of other suggestions: the paperclips -- because using them as actual images is taking up space INSIDE your #sidebar, they will get in the way of anything else. I would suggest you put them each in their own span or div, with the graphics as BACKGROUNDS, this will leave all the space open inside your #sidebar. Besides, they are not actual content, they are 'eye candy', so they are better off as backgrounds anyway.

Navigation - instead of that nasty table, put the nav inside an unordered list.

Footer - instead of that awful <center> tag, add text-align:center to the p.down class you've already got there. Centering should be done in the css.

Hey! Thanks for the answers, but I still got problems.
I've updated the site with the changes I made also..

Hm. I must say it's really strange that you didn't see the first problem. I've looked in FF, GC and IE6 ( D: ). And all have the same problem. Let me show a picture of it:


Anyhow. You mean I should do a horizontal list instead of the table in the navbar? I guess that I'd be a better option. Thanks!

Oh, the footer is almost okay now. But it's like 10-20px or something under it And the plumbob is er. I don't really get it. .__. What do you mean with "#page"? I haven't something called that..

And the m-text is fine now. Even if it was a kind of strange problem, lol.

I fixed the paper clips, and indeed it's better now! As well I fixed the centring on the footer.

A new thing I noticed was that the padding IN the sidebar is kinda odd. If I add 10px in padding for an example, the whole sidebar expands and repeat the background image...?

Thanks for the help!
-Nors

You mean I should do a horizontal list instead of the table in the navbar?

Correct. After all, what is navigation but a list? It's also easier to deal with styling and positioning. You can also put the 'paper' graphic in as a background to the UL and that gives you additional control on the positioning of it.

If I add 10px in padding for an example, the whole sidebar expands

You must understand the box model. Adding padding is NOT "inside" the box, but OUTSIDE and will there for ADD to the boxes overall dimensions. Far too many people use padding when they should be using margins.

To continue what LadynRed mentioned about the navigational list, just a break down of it.

Change the graphics a bit overall. I assume that you have slices for the navigational links and all other graphics. First off,

- Change the graphics so, that the header banner background graphic is one piece, as now some of the graphics of the banner come with the navigation items. Change the navigation items to transparent background without any paper nor header banner graphics. So the alignment or pixel distorts of the will not end up to disaster.

- Slice the banner graphics (the image with venomousims text on it) so that it has all the graphics on it. Now some of the graphics that could belong to it are in the navigational items, like the curly bit of letter 'm'. This will fix the alignment problems as the image cannot distort due to being one piece.
-- This will end up in changes with styling a bit.. you need to make the header bit higher to get all the graphics fit in. To get overlapping effect you have now. give #navbar a negative margin to fit your needs.. This will make the overlap effect.

- Also slice the paper top as a separate background, this leaving possibility for changes.

About the Diamond thingie, I don't know what your minimum resolution will be for users to visit the page. Did run on small resolutions (800x600 and 1024x768) the diamond will do a nasty overlap over navigation when using the 800 resolution. Just to let you know

If I don't make any sense in my writing, that is not a surprise. This is my first forum post in 3 years at any forum. If I recall correct

Hm, now I'm a little confused, bit it does make a little bit of sense. But I don't know what I shall do, really.

I mean this is how I want it to look like (with right background and the paper clips ofc too):


Have the header and navigation bar as one sounds bad in my ears (if it was that you meant). Should I edit something in graphic way? Or?

Really simple break down of the idea I described earlier. I have used you image and sliced it up a bit. Looks ugly (not your graphics but my handy work)



Could be that image is not showing. Here's the address for it, http://imagebin.org/index.php?mode=image&id=121276

Now noticed that I should have highlighted things better.. oh well, lets go with this.. The grey areas are just my background for the image, should have stroked the "slices". Actually made really bad job.. point is that tried to clear all navigational images etc.. and just leave the header background intact. (as an example)

1st, #header background image. You notice that it is taller than yours and contains the letter curlies. The edge of diamond was left by accident.. that can be its own separate element like you have now.
2nd, Example of navigation item, badly cut but just trying to point out transparency
3rd, This is the navigation background for <ul> or element you choose to use for it. If you don't want to use the ul as navigational list element and stick to your table method. You can put this as an background for #navbar. The navbar sounds quite sound option right now when looking at your semantics. This requires the navigation items to have transparent background. But less frustrating hassle with positioning etc.. just match the sides to go with the content

If you want the diamond on that spot like in the design. You should maybe put it inside #header and then move around in there. At my resolution, it is good 2 inches away from the position you desire apparently.

Hope this cleared up

Hm, the image-link is just linking to a white 1x1 px gif..

Neat looking home page Nors

Hmmm... the imagebin link should show the image.. opens well from here

ac3r2009: Thanks!

Lazylegs: Not from here D:

That's really odd :|

Try this one.. http://imagebin.org/121276

Oh, thanks! The new link worked So basically:

-The top of the torn of paper (where the navigation is) should be it's own background.

-The roll-overs should be transparent PNGs. Which might by a little tricky with the space between them, but I've already think I know how to do it.

- The roll-overs should also be in a vertical list.

It is not mandatory do to this way, but really recommended. Someone might say that you have to do it like this. Tho using tables for this is a no no no

When using list horizontal list element, it makes semantic sense. And using that slicing how I would do it. Gives you power over maintenance.. Now if you change the background of the navigation (the paper).. you need to slice up things trillion times, compared to one image you need using this method.. same if you get bored with header image. Just change it.. no need to update rest of the pictures.

Just a quickie horizontal navigation list if you haven't done one before.

HTML

<div id="nav">
  <ul>
     <li>Test</li>
     <li>Test2</li>
  </ul>
</div>

CSS

#nav ul {
  list-style-type: none;
}

#nav ul li {
  float: left;
  width: 100px;
}

I use float to get the elements horizontally aligned.. using display: inline-block instead of floating is also popular method. Has it's own advantages.. but then you need small cross-browser fix. Which can be found from this link http://colinaarts.com/articles/inline-block-and-you/

Yeah I get that. So you suggest I just should have the torn paper in the navbar (as a transperant png)? or?

transparency would be good for it. So you can overlap it over the header graphics. Without colliding to similar issues that was in the beginning

Thanks! I've just sliced up the images and are ready to change the code. But one thing I wonder:
How shall I position the header and navbar, so they overlap nicely?

Put the graphic in as a BACKGROUND of #header. That leaves the space inside the #header div for anything you want - including the navigation.

Put the UL of your navigation inside the #header div - no worries about 'overlapping', you just use margin and padding to 'push' it where you want it to be.

Okay. I've updated the site with the changes but:

- There's a nasty abut 10px space between the navbar and paper-c. Same problem with the footer.

-The buttons doesn't want to centralize.

- I still isn't sure at all how I shall overlap the header with the navbar. .

- How shall I do in the sidebar so the text doesn't hit the corners, I need some space there.

But I'm really happy with the new concept, it's much more flexible. I'm also thinking about adding a "About" bottom. And when it's special holidays Ii can change the header so may it's snow on it and so! Thanks for all the help, guys! I'm sorry that I ask and ask again about stuffs XP

You can fix the gap between navigation and content by giving #navbar property overflow: hidden; (do not set height for it now) Some of the list elements inside it cause the gap (the images actually). Also to get the #navbar overlap the header.. give it margin-top: -20px or some other negative value. (-40px looked good)

You can center the elements using the display: inline-block method that I earlier suggested.. then you can center the list elements just using text-align center on the ul element or #navbar element