Help with moving my css Menu

PurpleKat · #1 Sep 22nd, 2006, 11:13

Okay. I'm aiming for a layout which is straight down the middle, with whitespace either side. The colours, font, html coding aren't final, I'm just playing about with the layout.

What I want it to do:

I want a three-column layout - a bit like the wordpress layout on Dreamer.

What I want to achieve right now

I want to have three columns:

|Navigation| Main Content | Featured Content|

buffered by whitespace on either side.
I'm currently working on the first two columns. However try as I might I cannot get the navigation column "into" the greenbanded bit in the middle.

Here's my css document - am I missing something vital here?

Code: Select all

/*  
Theme Name: KWO New design
Description: Green KWO Theme. Tri-Column Layout
Author: Hattie Collingham
Author URL: http://www.dreamer-in-exile.co.uk
*/

/* Body, Logo, Content */

body { background: #FFFFFF; color: #FFFFFF; margin: 0; padding: 0; font-family:verdana; font-weight:none; font-size:12px;}
div {border: 0px solid #FFFFFF;}

#content { color: #FFFFFF; background-color: #365943; margin: 0 auto; width: 750px;  }


#header {
margin-bottom: 2px;
width: 750px;
height: 175px;
border-bottom: 1px solid #7AA48C;
background-repeat: no-repeat;
background-image: url('images/header.gif');
background-color: #365943;
}

/* End Body, Logo, Content */


/* Navigation, Searchbox, Main section, Newsletter Box */

#navigation { width: 150; height: 30px; background: #FFFFFF; margin-bottom:15px; }


#navstuff {position: absolute; top: 10em; left: 2%; width: 23%; background:transparent; padding: 0; margin: 1em; border-width: 0; font-style:normal; font-variant:normal; font-weight:normal; color:#000000;}
#navstuff div {margin-bottom: 1em;}
#navstuff a {background-position: 0%; display: block; margin: 0; padding: 0.33em; letter-spacing: 1px; text-align: right; font-weight: bold; border-bottom: 1px solid #365943; color: #000000; text-decoration: none; background-image:url('none'); background-repeat:repeat;}
#navstuff a:link {color: #000000; background:#7AA48C; width: 95%;}
#navstuff a:visited {background:#7AA48C; color:#000000;}
#navstuff a:hover {background:#FFFFFF; color:#000000;}


#main a {font-family: verdana; font-style:normal; font-variant:normal; font-size:12px;}
#main a:link {color:#FFFFFF; font-size:12px; font-weight: underline;}
#main a:visted {color:#FFFFFF; font-size:12px; font-weight: none;}
#main a:hover {color:#000000; background-color: #FFFFFF; font-weight:underline;}

h1 {
font-family: verdana; font-size:16px;
}

h2 {
font-family: verdana; font-size:14px;
}

h2 {
font-family: verdana; font-size:12px;
}

I'm not looking for any critique of my coding currently, I'm just wanting to get the navigation in place.
Any help would be gratefull recieved.
Thanks

I have attatched a screencap of how it is currently, if that's of any use.

ukgeoff · #2 Sep 23rd, 2006, 21:15

I'm a little confused here. In one sentence you say that the menu is on the left and in another that you can't get it into the grenn bit in the middle.

Can you make things a bit clearer and if possible put the page somewhere live so see we can see it.

PurpleKat · #3 Sep 24th, 2006, 09:41

It is on the left, currently. Although I didn't actually specificy that in my post.
What I did say was that I wanted it in three columns with whitespace either side, so I guess maybe you could have misunderstood that bit.
It's just trying to get it into the green bit in the middle thats got me stuck.

Live Version

PurpleKat · #4 Sep 24th, 2006, 11:46

It's okay, I believe I've sorted it out now.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
moving a menu option	saltedm8	Web Page Design	6	Feb 5th, 2008 12:37
Moving Nav bar	acrikey	Web Page Design	5	Sep 26th, 2007 13:37
PHP moving side menu	csa	Web Page Design	6	Dec 16th, 2005 08:32

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Help with moving my css Menu