www.webdeveloper.com
Results 1 to 10 of 10

Thread: problem with positioning divs

Hybrid View

  1. #1
    Join Date
    May 2010
    Posts
    36

    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">&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:

    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;
    	
    }

  2. #2
    Join Date
    Jul 2010
    Posts
    35
    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
    I don't know half of you half as well as I should like; and I like less than half of you half as well as you deserve.
    - Bilbo Baggins in The Fellowship of the Ring

  3. #3
    Join Date
    May 2010
    Posts
    36
    Quote Originally Posted by Mr. Baggins View Post
    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

  4. #4
    Join Date
    Jul 2010
    Posts
    35
    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.
    I don't know half of you half as well as I should like; and I like less than half of you half as well as you deserve.
    - Bilbo Baggins in The Fellowship of the Ring

  5. #5
    Join Date
    May 2010
    Posts
    36
    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.
    Attached Files Attached Files
    Last edited by refhat; 07-29-2010 at 02:24 PM.

  6. #6
    Join Date
    Jul 2010
    Posts
    35

    possible suggestion...

    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
    Attached Files Attached Files
    I don't know half of you half as well as I should like; and I like less than half of you half as well as you deserve.
    - Bilbo Baggins in The Fellowship of the Ring

  7. #7
    Join Date
    May 2010
    Posts
    36
    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.

  8. #8
    Join Date
    Jul 2010
    Posts
    35

    You're welcome!

    Glad I could help. Hope everything turns out well.
    I don't know half of you half as well as I should like; and I like less than half of you half as well as you deserve.
    - Bilbo Baggins in The Fellowship of the Ring

  9. #9
    Join Date
    Jul 2010
    Posts
    35

    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
    Attached Images Attached Images
    I don't know half of you half as well as I should like; and I like less than half of you half as well as you deserve.
    - Bilbo Baggins in The Fellowship of the Ring

  10. #10
    Join Date
    May 2010
    Posts
    36
    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
    Last edited by refhat; 08-01-2010 at 01:22 AM. Reason: added the link

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles