problem with positioning divs

[refhat]

Hello My Webpage has three main components(rather divs)
1: top div that has some icon images(inside topmenu div)
2: left div containing navigation links is scrollable
3: right or main content where the actual content appears, This is actually a single page where the content will be displayed according to what is clicked in the left div(navigation)

I want my icon images that are in the top divs to remain fixed. I tried using

position:fixed; for div contaning icon images, but it didn't work, now when I fixed the top div the contents of right div are scrolling over the top div.

Can you guys tell me what do I need to set the icon images inside top div to remain fixed. so that they are not covered up when I scroll the right page or main page.

Part of my code is below:

<div id="top">
	<p>I am in the top rectangular box</p>
	<div id="topmenu">/* I want these to remain fixed*/
		<ul>
			<li><a href="#" title="pdf">&nbsp;</a></li>
			<li><a href="mailto:test@Gmail.com" title = "email">&nbsp;</a></li>
			<li><a href="#" title="print">&nbsp;</a></li>
		</ul>
	</div>
	
</div>

Left navigation tag:

<div id="left">
	<ul>
		<li><a href="#objectives">Home</a></li>
		<li><a href="#experiences">Experience</a></li>
		<li><a href="#projects">Projects</a></li>
		<li><a href="#skills">Skills</a></li>
		<li><a href="#hobbies">Hobbies</a></li>
	</ul>
</div>

Right Frame or main content that I dont want to scroll above the icons:

<div id="right">
	
	<div id="objectives">
	<h3>Career Objectives</h3>
	<p>Obtain blah blah blah blah blah...
      </div>
	<div id="experiences">
		<h3>My Experiences</h3>
		<p>
			Develo.........
</div>
	<div id="projects">
		<h3>My Projects</h3>
		<p>
			Testing </a> in the ESP. As a mid-sized TT company,  they needed a solution to track their 
			cliejbdfjdjn  blah blah...
</div>
	<div id="skills">
		<h3>My Skills</h3>
		<p>
			Exce...blah blah

Now my css is here(A part off):

#top 
{ 
   margin-left:7px;
   	width:970px; 
	height:100px; 
	border:5px solid #000;
	position:fixed;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
  }
 #left {
 margin-top:5px;
 margin-left:7px;
 background-image:url('images/bg_mainNav_active.png');
 background-repeat:repeat-y;
 float:left;
 border:5px solid #000;
 height:100%; 
 width:180px; 
 position:absolute;
 -webkit-border-radius: 15px;
	-moz-border-radius: 15px;
 }
#right { 
background-image:url('images/bg_mainContent.png');
background-repeat:no-repeat;
margin-top:5px;
margin-left:210px;
position:absolute;
overflow:auto;
border:5px solid #000;
 height:100%; 
 width:770px; 
 -webkit-border-radius: 15px;
	-moz-border-radius: 15px;
 }
#topmenu {
	height: 22px;
	overflow: visible;
	padding: 5px 20px 0 0;
	width: 870px;
	position:fixed;
}
blah blah...
#topmenu ul li a  {
	background: url("images/icon_pdf.jpg") no-repeat top left;
	display: block;
	height: 20px;
	width: 20px;
	
}

[Mr. Baggins]

refhat:

Would there be a problem with posting the URL of your site? Might help in analyzing the problem simply because we could see the problem.

Mr. Baggins

[refhat]

refhat:

Would there be a problem with posting the URL of your site? Might help in analyzing the problem simply because we could see the problem.

Mr. Baggins

Sorry Baggins, Site is not hosted yet, I am doing it offline, I tried uploading a screenshot but size is too much.

Thank You

[Mr. Baggins]

Could you attach the .html file to a post and upload it, as well as the css? Might be useful.

That way we could pull up the site in our own browsers and gain a better understanding of the problem.

[refhat]

Thanks for your effort, I was again unable to upload html file, but I have attached 2 notepad fiels, html and css separately. I hope you can infer them. If you paste them in your editor(notepad++ in mycase). I am sure you would be able to preserve the syntax highlights for your ease.

Thanks again.

[Mr. Baggins]

Does this attachment have the effect you want? If not, please clarify.

(Save the attachment to your desktop, then open it and click Save As, then rename it: "myhtml.html." Then, open the .html file on your desktop.)

Mr. Baggins

[refhat]

Thanks a ton, Mr. Baggins. I am sure I needed something like this, but I am still not sure if my icons would remain fxed coz they lie inside the div that you have kept fixed, as I am still out of time to run the script.

[Mr. Baggins]

Glad I could help. Hope everything turns out well.

[Mr. Baggins]

Say, refhat,

I was wondering - does your website layout depend significantly on javascript?

Javascript is not a server-side script like PHP, and therefore even though most visitors have javascript enabled, those who do not will not be able to make sense of your site if it is largely dependent on Javascript.

I would suggest using Javascript only for things which are not integral to your website.

The reason that I am wondering is because when I viewed your website (from the .html and .css files you sent), it appeared quite strange. I have uploaded a screenshot so you can see how it looks without javascript.

Mr. Baggins

[refhat]

Ya, Mr. Baggins,

It uses a lot of jquery, Infact I have added some special fonts(cuffon et-al) to it. I don't know what this effect is exactly called, but I can roughly point you to Microsoft website, you can see. those beautiful effects like when you click (highlights, latest releases, using your computer, for business, for developers, for IT..), how the content changes towards right side of the page.

I am looking to achieve the same effect like when you click home, projects, hobbies, education on my page, It should achieve the same effect.

I want my page to achieve this effect but I am still digging it.

Though on MS this effect is achieved on hovering the mouse, I want this effect to happen on clicking on my web page.


http://www.microsoft.com/en/us/default.aspx