problem with positioning divs
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:
Code:
<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"> </a></li>
<li><a href="mailto:test@Gmail.com" title = "email"> </a></li>
<li><a href="#" title="print"> </a></li>
</ul>
</div>
</div>
Left navigation tag:
Code:
<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:
Code:
<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):
Code:
#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;
}
1 Attachment(s)
Does the layout of your site depend on Javascript?
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
