0

I'm trying to make a Windows Explorer-like in CSS and for now here is my code.

The #explorer is not positionned correctly. Here is a little explanation of what i'm trying to make.

sys_top on top, always visible

info_Bar at the bottom of the page, always visible

navbar at the left, width of 20%

explorer at the right, 80% width

HTML:

<div id="sys_top"></div>
<div id="navbar"></div>
<div id="explorer"></div>
<div id="infobar"></div>

CSS:

html, body {
padding:0;
margin:0;
height:100%;

cursor: default;

font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
}
#sys_top {
background: url(../menu_files/bg.png) repeat-x;
width:100%;
top:0;
position: fixed;
}
#navbar {
width: 20%;
height: 100%;
float:left;
left: 0;
top: 30px;
position: fixed;
border-right: #CCCCCC solid 1px;
}
#explorer {
width: 500px;
height:300px;
float:right;
top: 30px;

overflow:auto;
}
#infobar {
height: 120px;
width: 100%;
bottom:0;

position: fixed;
display:block;
margin-top: 5px;
margin-left: 5px;
}
Jeremy Dicaire
  • 4,615
  • 8
  • 38
  • 62
  • 1
    I tried to make a jsfiddle with this code but it hardly rendered anything. @Jeremy Dicaire, any chance you can link us to a page with the code so we can see it? – Surreal Dreams Dec 15 '10 at 15:03
  • Okay here it is : http://narks.xtreemhost.com/. Normally i have a menu at the top 30px height, but probably i forgot to upload a file... Well I need to go but ill take a closer look at this tonight. If you have any clues, you're welcome ;) Thanks! And have a nice day! – Jeremy Dicaire Dec 15 '10 at 16:20

1 Answers1

2

You say:

explorer at the right, 80% width

and your css says:

#explorer {
width: 500px;
...

FINAL ANSWER:

body {
overflow: hidden;
}

#navbar {
position: absolute;
width: 20%;
bottom: 120px;
left: 0;
top: 30px;
}

#explorer {
position: absolute;
top: 30px;
right: 0;
bottom: 120px;
overflow: auto;
width: 80%;
}

You should drop float, height, margins for #explorer and position:fixed, height, float for #navbar.

Ivan Ivanic
  • 2,982
  • 1
  • 20
  • 21
  • YEah it was for a test. I added a border too to Explorer to see exactly how it appear on the webpage, but i never see the border... I uploaded a test website you can see above. If you have any ideas, you're welcome :) – Jeremy Dicaire Dec 15 '10 at 16:21
  • 1
    Well actually you did define css rule for #explorer (id) and written in html
    (class) Also you should change property "top" to "margin-top" for starters, and the width to 80% as I already mentioned.
     – Ivan Ivanic Dec 15 '10 at 16:30
  • Okay I admit that it was a stupid mistake for the id :). I made the change, but still that the explorer's scroll bar go over the top and the bottom bar. Plus, dragging icons is now apear under the navigation bar on the left. Any idea? By the way thank you very much Ivan! – Jeremy Dicaire Dec 16 '10 at 04:13
  • 1
    You are welcome. I edited my answer, added "final answer" section :) That should do it. – Ivan Ivanic Dec 16 '10 at 05:42
  • Wow thats so cool, thank you so much! Do you have an idea for the scroll bar to get the height of the explorer div and not the full vertical page? – Jeremy Dicaire Dec 16 '10 at 15:06
  • Okay i just removed the height:100%; and its fine :) Do you know about jquery dragable? – Jeremy Dicaire Dec 16 '10 at 15:09