Insert Verticle Left Menu

HTML & CSS
1

The html and the css code below work very well as far as positioning. Dead Center with justified text. Nothing reaches beyond the left and right sides of the graphics. (960px)

I wish to insert the menu on the left side of the page.

Presently there are 240px remaining, 120px on the left and right side. 1200-960=240/2=120px.

Currently the html and css navigations portions are commented out.

When placing the menu code in the html page the two graphics and text float to the far left of the screen and the text then spans all the way to the right of the screen, footer included.

How can I place this menu on the left side of the screen?

Do I imbalance the 120px on each side to create the space on the left?

Someone earlier mentioned that the <div id=“nav”> may not be needed in the html side. Is this part of the problem, or solution?

Just how can I accomplish this.

Code Below.

Thanks Rick :rolleyes:

html


<div id="nav">
    <ul>
        <li><a href="#">Home Page</a></li>
        <li><a href="#">Valuating All Homes</a></li>
        <li><a href="#">Search For Homes</a></li>
        <li><a href="#">Map Search By Communities</a></li>
        <li><a href="#">Sellers Information Look Here</a></li>
        <li><a href="#">Buyers Information Look Here</a></li>
        <li><a href="#">Community Areas in Demand</a></li>
        <li><a href="#">Buyers Information Look Here</a></li>
        <li><a href="#">Buyers Information Look Here</a></li>
        <li><a href="#">Buyers Information Look Here</a></li>
        <li><a href="#">Buyers Information Look Here</a></li>
    </ul>
</div>
<!--end of navigation div -->

css


@charset "utf-8";
/* CSS Document */
/* 8/3/2011 */


html, body {
    		margin:0;
    		padding:0;
			color:#000;
    		background: url(images/blinds1.png) fixed;
    		font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    		font-size:100%;
    		line-height:1.3;
	
}


body 		{
    		color: #006;
    		background: url(images/blinds1.png) fixed;
    		font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    		font-size:100%;
    		line-height:1.3;
}



#header 	{
			margin-left:0;
			margin-right:0;

}
#header img, .plate img 
			{
    		display:block
}

#outer 		{
    		max-width:1200px;
			width:960px;
			margin-right:120px;
			margin-left:120px;
    
} 

p 			{
			font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
			font-size:80%;
			font-style:normal
			line-height: 100%; 
			color:#6CF; 
			text-align: justify;
}

/* NAVIGATION STARTS HERE: */

/*
#nav	    {
    		width: 220px;
    		padding:6px 0;
   	 		margin:0 20px 2em 10px;
    		float:left;
    		word-wrap:break-word;
    		font-size:70%;
}
#nav ul 	{
    		margin:0;
    		padding:0;
    		list-style:none;
    		width: 200px;
    		position:fixed;
}
#nav li 	{
    		margin:0 10px 5px;
}
#nav a 		{
    		color:#fff;
    		text-decoration:none;
}

/* END OF NAVIGATION LIST  */

#footer{clear: both;
			font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
			font-size:50%;
			font-style:normal;
			color:#6CF; 
			line-height:100%;
			text-align:justify;

}

/* eND css*/

/* END OF NAVIGATION LIST */

2

We’d have to see WHAT that’s going into for a layout – though your broken english makes it VERY hard to even figure out what it is you are asking in the first place. (I’m still not sure I follow it).

Though from what you have posted, I’d suspect part of the problem being an absurdly undersized font size, a wrapping div for NOTHING that couldn’t be applied directly to the UL, use of margins in a direction that could collapse or cause scaling issues in IE, mixing of width with an EM margin, and attempt to use position:fixed for… well… just don’t use fixed. It doesn’t work very well.

3