How to do this ?

ndmmxiaomayi SG

http://www.w3.org/Style/CSS/

The above site, on the right hand side, has a menu that has links - learning CSS, about CSS, the browsers, etc.

This menu always stay there, don't move. I want to try copy it, but failed.

Anyway to do it?

allentyb SG

huh?

what you mean?

let me see

my usual reply

would be

i know but i don't want to tell you

or

your browser hate you

you want to copy what link?

http://www.w3.org/Style/CSS/learning

allentyb SG

ok i get what you are saying already

hope this will help

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-attachment

http://www.w3schools.com/css/css_background.asp

ndmmxiaomayi SG

Background attachment I know.

I only want the menu, which is not part of the background. It's on your right hand side. I want the menu to stay without moving together with the page.

ndmmxiaomayi SG

Solved. Mr. Green

CSS Codes

/* CSS idea borrowed from:
* http://www.w3.org/Style/CSS/
* Credits to: http://www.w3.org/Style/CSS/ and http://www.html.net/tutorials/css/
* Author: ndmmxiaomayi
* Created: 13 February 2007
* Edited: 26 March 2007
* Version: 1.01
*/
h1 {
font-family: Arial, sans-serif;
color: blue;
font-size: 32px;
border-color: #F2F2F2;
border-style: outset;
line-height: 1em;
}
h2 {
font-family: Arial, sans-serif;
font-size: 24px;
text-decoration: underline;
line-height: 1.5em;
}
h3 {
font-family: Arial;
font-size: 18px;
}
p {
font: bold 14px Arial;
margin-top: 8px;
margin-bottom: 8px;
}
a {
text-decoration: none;
color: #008B45;
}
a:hover {
font-size: 16px;
border-bottom: 1.7px solid;
color: #009ACD;
}
ol {
font: bold 14px Arial;
margin-left: 10px;
}
li {
font: bold 14px Arial;
margin-bottom: 12px;
}
#footer {
font: bold 12px Arial;
text-align: center;
}
/* left side menu */
#left {
float: left;
width: 161px;
margin-left: 20px!important;
margin-left: 10px;
padding-top: 27px;
}
#navlist {
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid #C2C2CA;
width: 160px;
}
#navlist li {
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid #C2C2CA;
}
#navlist li a {
text-decoration: none;
}
/* content to be on the right */
#content {
margin-right: 250px;
margin-left: 210px;
padding: 5px;
}
/* create a fix menu on the left */
.map {
position: fixed;
}
/* others */
#others {
text-align: center;
}

ndmmxiaomayi SG

Sample website, just filled with rubbish.

http://ndmmxiaomayi.bravehost.com/index.html

ndmmxiaomayi SG

Not compatible with IE.

lifeisgood9989 SG

i believe its from the map.css found in here
http://www.w3.org/Style/map.css

...

after that just add this code into ur document

not sure though, i may have missed out sth.. lazy to try too Very Happy

ndmmxiaomayi SG

But this part of the CSS will not make the menu fixed to the right hand side, like what is shown in the link provided in my first post.

Anyway, I fixed the IE issue by changing some CSS tags.

Just need to change the #left will do.

#left {
position: relative;
left: 30%;
}

That will prevent it from being screwed up in IE7.

IE6 untested. Read through the whole W3C documentation that IE6 will have problems with CSS. Still improving...

ndmmxiaomayi SG

Fixed the huge space in IE7 by removing margin-right and padding.

#content {
margin-left: 170px;
}

Fixed the menu thingy (on the left) in IE6.

.map {
position: absolute;
}

mcfadden SG

So simple and plain?

ndmmxiaomayi SG

It's a test page...

I've yet to finish designing... my main intention is to imitate some effects...

sunny6110 SG

Y not use frames?

BrUtUs SG

ya frames should be enuff...

sunny6110 SG

One common mistake web designer often make is to overload the webpage wif effects….

ndmmxiaomayi SG

I haven't figured out frames with CSS...

One common mistake web designer often make is to overload the webpage wif effects....

I only want that menu to be fixed somewhere, not scroll up and down together with the page... no fancy effects. The other effects, are just for fun. I will never incorporate it into a website.

As said, above link is just a test page... not real website...

sunny6110 SG

normal frames can do the job le.... no nid css oso...

ndmmxiaomayi SG

Hmm... want to try CSS...

skeletonsAREcute SG

Confused Can't really get what you mean, but if you're trying to make a table/content stay at a place. Just use div layers? Never try doing it solely on CSS only..'cause confirm need to position it ma, then sure need div layer liao.