Plain Black, makers of WebGUI

troutdream

Date: 2/5/2008 3:54 pm · Subject: CSS tweaks · Rating: -2

I'm working on this site:

http://web387.plainblack.net/

And there are a few little layout problems I can't quite iron out. The pale blue box that contains the main content extends outside the right border of the containing white box. It looks different in FF and IE, but it's basically the same problem in both.

I've validated the CSS and HTML. There are a few small issues there to clean up, but nothing that would affect this issue. (the main CSS error concerns a style that is not used in the document at this time)

I'd be very grateful for a peek. I'm making progress with CSS but it's not my native language.

Thanks!

--- (Edited on 2/5/2008 3:54 pm [GMT-0600] by troutdream) ---

Back to Top

Rate [ | ]

philadev

Date: 2/5/2008 9:16 pm · Subject: Re: CSS tweaks · Rating: -9

The problem is the padding attached to the .contentarea div.

Padding is a common problem when attached to container and especially when there are floats involved. You can fix this type of problem by getting rid of the padding and adding a margin to your content. in this case your H2, P and footer div.

You can also wrap the content in a container and add the margin to tuck it all in together. Best to steer clear of padding but definitely do some research into the "Box Model" I suggest the Quirksmode tutorial and other topics. Here's a link:

http://www.quirksmode.org/css/box.html

Also, if you're using Firefox you should definitely install the FireBug plugin for diagnosing these issues it's by far the best thing to happen to front end web development since Firefox.

http://www.getfirebug.com/

H

--- (Edited on 2/5/2008 9:16 pm [GMT-0600] by philadev) ---

Back to Top

Rate [ | ]

troutdream

Date: 2/6/2008 11:37 am · Subject: Re: CSS tweaks · Rating: 0

Thanks for the help!

I kept looking at .contentarea and not seeing it, but finally discovered I had TWO styles with that name.

I got firebug. I've used FF Web Developer addon for some time, but it didn't catch this one. I'll try both for a while.

Thanks again.

--- (Edited on 2/6/2008 11:37 am [GMT-0600] by troutdream) ---

Back to Top

Rate [ | ]

philadev

Date: 2/6/2008 12:07 pm · Subject: Re: CSS tweaks · Rating: 10

Anytime.

Yeah, I guess Firebug is actually the best thing to happen since the Web Developer Toolbar.

Just reread my post, that Quirksmode link was, as you know by now, not to the right article (I need a better system to organize my links). If I find the right article I'll post it.

--- (Edited on 2/6/2008 12:07 pm [GMT-0600] by philadev) ---

Back to Top

Rate [ | ]

jmack

Date: 2/8/2008 2:03 am · Subject: Re: CSS tweaks · Rating: -2

Hello Jody,

Nice site you have there!
http://web387.plainblack.net/home/whats-your-scenario/prospective-scenarios

May I ask you, the navigation/menu, did you make it yourself or is it from a free available theme?

This would be a great for our site... If you want you can send me a PM: JVMACK "a t" XS4ALL "d o t" NL

Tnx

I'm working on this site:
http://web387.plainblack.net/
And there are a few little layout problems I can't quite iron out. The pale blue box that contains the main content extends outside the right border of the containing white box. It looks different in FF and IE, but it's basically the same problem in both.
I've validated the CSS and HTML. There are a few small issues there to clean up, but nothing that would affect this issue. (the main CSS error concerns a style that is not used in the document at this time)
I'd be very grateful for a peek. I'm making progress with CSS but it's not my native language.
Thanks!
--- (Edited on 2/5/2008 3:54 pm [GMT-0600] by troutdream) ---

--- (Edited on 2/8/2008 2:03 am [GMT-0600] by jmack) ---

Back to Top

Rate [ | ]

bartjol

Date: 2/8/2008 4:10 am · Subject: Re: CSS tweaks · Rating: 3

It looks like a standard vertical navigation, with altered css

--- (Edited on 2/8/2008 11:10 am [GMT+0100] by bartjol) ---

Back to Top

Rate [ | ]

troutdream

Date: 2/8/2008 9:08 am · Subject: Re: CSS tweaks · Rating: 6

Thanks!

That's exactly what it is. Feel free to peek at the CSS.

In addition to the CSS you need to make a small change to the VerticalMenu navigation template. Inside the page loop, add div with this class: <div class="buttons-<tmpl_var page.relDepth>">

Jody

--- (Edited on 2/8/2008 9:08 am [GMT-0600] by troutdream) ---

Back to Top

Rate [ | ]

jigou

Date: 2/13/2008 4:18 pm · Subject: Re: CSS tweaks · Rating: 3

Thank you for sharing, Jody! I've shamelessly stolen the concept and put it into use on my site.

So I give at least SOMETHING back to the greater good, when it came time to come up with color scheme for this, I found these two tools that were pretty handy:

1. A tool that lets you interactively create a color scheme based on one color and decide what color theory you'd like to apply, as well as the hue difference you'd like to implement. http://www.december.com/html/spec/colorschemer.html

2. A tool that lets you view colors side-by-side and pick/adjust the colors until you get a scheme you like. You can add or remove columns to get as many colors as you need, and change the order of the colors for viewing. You can also save the settings and create a link to view the colors later. http://www.colorcombos.com/combotester.html

Jarrod

--- (Edited on 2/13/2008 4:18 pm [GMT-0600] by jigou) ---

Back to Top

Rate [ | ]