Alright this might sound weird but i need some help. My school is changing web templates using external css files and template files. Well, earlier today I pretty much finished converting to the new template. I checked the page tonight the friggin idiot school wemaster decided to changed the sidebar width pretty much messing up all of my pages. Well, I just need help rechanging the width back.
Is the link. What I am talking about is the blue side bar on the left. Before I think it was extended to about the end of campus maps above it. I know I just have to overwrite the template css file but replacing his css code with my own in my css template. I just cant figure out which of the css code it is.
That should override his styles, assuming you're able to insert your own style sheet into the <head> section.
The best tip that I have heard all year was to use the new FireFox web browser with the Web Developer Tools Plug In. With that you can load up the CSS right next to the web page and actually edit the CSS and preview the changes in the active window. It will also markup the page to indicate where the <divs> and <tables> are and what their names are.
With the #leftcol set at 180px your text menu links line wrap and look fine. With it at 225-300 px the links go to a single line but they overlap into the white color of the main body. Since the font is also white... you get the idea. Changing the #leftcol div width only changes the text, but the blue bg...hmmmmmm that's not right. Something else (not in the CSS) is managing the blue leftcol bg image. What could that be? Way up in the <body> part of the css there is a bg image link. Kachinnng! there it is!
Your table is centering perfectly....inside the div....but not inside the leftover empty space right of the blue leftcol bg.
Using (again) the Web Developer Tools Plugin for FireFox you can see that the table (with it's two wrapping inline html div's) are themselves all placed inside a div controlled by the CSS... (#centercol)
So... in your CSS you have styles that conflict a little bit. You specify that the centercol is width=75% but then give it an absolute position (left 180px) AND then tell it to float:right. Sheesh! what's a poor <div> supposed to do?
Reminds me of my ex-wife!
The template is tragically flawed (like my ex-wife) but not unusable, especially since you do not apparently control it (the "friggin idiot school wemaster " does). You are then stuck, as I was with my ex, with having to make the best of a bad situation.
For you this means leaving the #centercol alone and fixing what you DO have control over... like those lousy staff pictures. That stuff makes you look worse than a little white space on the right edge. Ya gotta learn what fights to fight...just like with the ex!
Attachment is an image illustrating the positioning of the centercol div using the FF Plugin. You can clearly see the extra white space on the right of the red border around the div.