Web Hosting Talk






PDA

View Full Version : Side Bar Width

iFuseDavid
12-05-2006, 12:09 AM
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.

http://services.georgiasouthern.edu/ess/new/

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.

Hope this makes sense,
Thanks for the help
the_pm
12-05-2006, 12:41 AM
#leftcol { width:???px }

That should override his styles, assuming you're able to insert your own style sheet into the <head> section.

If you can't, you can always try placing your new style into your content area (couldn't really hurt at this point - the template being used is an attrocious display of tag soup - one more error will hardly be noticed). But if you're conscientious of coding things badly (and if so, good for you!), you can change the sidebar width using JavaScript, which will work for most of your visitors. Just insert this into your content area:

<script type="text/javascript">
document.getElementById('leftCol').style.width = "???px";
</script>

But your best bet will be to insert the proper style into a proper style sheet :)
jiarby
12-05-2006, 11:43 AM
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 issue is the background image!

http://services.georgiasouthern.edu/web_templates/images/blue.gif
The image is 2000x10px and is blue for the left 180px and white the rest of the way.

If you want your menu at something other than 180px then you better edit that bg image!

With the FF tool I can change the source of the bg image (edit in fireworks so blue part is 230px, upload to one of my servers, then edit css in FF for new bgimage url)

OOPS! gotta slide over the #main & #centercol...they are set to 180px also!

Aaah! That's how it should look!

Attachments are images of the FF Web Dev Tool Menu, the corrected page, and the 230px wide bg image in case you want to use it.
the_pm
12-05-2006, 11:53 AM
Good catch jiarby. I didn't even look at that image :blush:
iFuseDavid
12-05-2006, 02:19 PM
yea thanks guys, I just figured that out the hard way.

Im guessing theres no easy way yo change it then?
iFuseDavid
12-05-2006, 02:27 PM
After taking another look of the damage done, its really not as bad as I thought and instead of editing the image and all that good stuff im just going stick the default sidebar width.

However you guys have any suggstions where my tables are off centered now.
jiarby
12-05-2006, 02:31 PM
It looks Ok to me with the 180px width.

Not sure what you mean about the centering, but you should fix these images!
http://services.georgiasouthern.edu/ess/new/employees.php
iFuseDavid
12-05-2006, 03:17 PM
What are wrong with the images, do you just mean that some are a little distorted? If so then thats already on my to do list :)

What I mean by center can be better visualized by looking at

http://services.georgiasouthern.edu/ess/new/MSDS.php

Do you see how the table isnt totally centered and there is less white space on the left than on the right?

Thanks for all the help
jiarby
12-05-2006, 03:35 PM
The images look distorted. Like this:

Original Image 1024x768:
http://services.georgiasouthern.edu/ess/new/images/Shane2.JPG

Displayed Image: 132x200 ...this changes the aspect ratio of the image


I notice the boss got his done right! <wink>
iFuseDavid
12-05-2006, 03:44 PM
Ahh I see what you mean now. Seems like it would be easy to fix.

You have any idea on my centering problem though.

Again thanks for all your help
jiarby
12-05-2006, 04:11 PM
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)

the #centercol CSS says:

#centercol {
width:75%;
position:absolute;
left:180px;
float:right;
vertical-align:top;
text-align:left;
font-family: arial, verdana, helvetica;
padding:5px 5px 5px 5px;
}

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!

My advice:
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.
iFuseDavid
12-05-2006, 04:17 PM
lol thats a good post. Id take your advice. The sad part is that the school webmaster is making probbaly close to 70K a year when im making a lousy 7 an hour :)

Again thanks for all the help
jiarby
12-05-2006, 04:46 PM
Hopefully the 70k guy doesn't read this website, or you will be delivering his pizzas next week...but at least you will be making more money!

You'll be the 70k guy one day and some $7 punk student assistant will be bad mouthing YOU in the forums. It's just the cycle of life!

There might even be a 70k-guy forum somewhere right now and HE's whining about how you $7/hr guys can't follow design guidelines!