See below...
On Sun, Feb 20, 2011 at 6:45 PM, Zachary Uram <[email protected]> wrote:
> First problem:
> In my vertical menu I would like there to be a small space between
> each menubox's border (between the rows), right now the border of the
> bottom of one row and the top of the next row touch each other.
Simple enough, add top/bottom margin to your list items. You can
simplify your code to
ul.menu li {
border: 1px solid #6F3E04;
margin: .5em 0
}
And adjust the ul.menu styles as needed (remove the border, change the
background, etc.)
> Second problem:
> I want the menu centered vertically so it will appear in the middle of
> the page (on the left hand margin). Right now it is on the left margin
> but not centered.
>
Sorry, probably a JavaScript solution will be needed. CSS doesn't
really do vertical centering.
> Third problem:
> I want the left border of my <div id="content"> box to be pushed so it
> is say 40px justified to the right of my menu box. Right now the
> vertical plane of the end of my menu box and the vertical plane of the
> beginning of my div box are on the same point. So I wish to change
> this behaviour:
First off, I'd suggest changing your margins from % to px or ems.
Percents are weird because they are based on the width of the box, so
if you box changes width, so will the margins.
But, to have enough space between your content and menu is fairly
straight forward, you just need a large enough left margin. Something
like this:
#content {margin: 1em 1em 1em 140px; padding: .5em; border: 2px solid #af6f65;
background: white ;}
(The margin value shorthand breaks down to -- margin: [top] [right]
[bottom] [left])
That will only get you part of the way though. For the rest you will
need a) JavaScript to vertically center you menu, b) float your menu
left c) position the boxes
Tim
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
