How to do this ?
-
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? -
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 -
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 -
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. -
Solved.
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;
} -
-
Not compatible with IE.
-
i believe its from the map.css found in here
http://www.w3.org/Style/map.csscode:
/*
Author: Bert Bos (Adapted from work by HÃ¥kon Wium Lie)
Created: 17 August 1999
Version: $Revision: 1.13 $
The following section creates a set of partially overlapping
headlines in different colors and font families. Negative
margin values must be set on block-level elements to have an
effect - in this document P elements are used and the selectors
are named '#p*'.
The source will look like this:
This works by setting an offset from the bottom of the link area.
The height of the line plus the bottom margin are equal to the top margin,
so the line doesn't contribute to the height of its parent in any way.
*/
DIV.map { /* Reserve some room for the links */
padding-top: 189px;
padding-bottom: 1px;
margin-left: -4%;
margin-right: -6em;
/* width: 100%; */
margin-bottom: 4em;
margin-top: 5em;
clear: both;
text-shadow: 0.2em 0.2em /* 0.2em */ silver;
}
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
display: block; white-space: nowrap; text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
text-decoration: none}
#p1, #p1 A {color: #DDD; font: 100px/1 "Impact", "Helvetica Narrow", sans-serif}
#p2, #p2 A {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A {color: #37F; font: bold 40px/1 "Courier New", "Courier", monospace}
#p5, #p5 A {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}
#p1 {text-align: right; margin: -185px 0 85px 0} /* top right */
#p2 {text-align: left; margin: -190px 0 150px 5%} /* top left */
#p3 {text-align: right; margin: -87px 35% 47px 0} /* center */
#p4 {text-align: right; margin: -98px 0 58px 0} /* center right */
#p5 {text-align: left; margin: -130px 0 30px 0} /* center left */
#p6 {text-align: left; margin: -40px 0 15px 35%} /* bottom center */
#p7 {text-align: right; margin: -80px 0 0px 0} /* bottom right */
#p8 {text-align: left; margin: -40px 0 20px 3%} /* bottom left */
#p9 {text-align: right; margin: -25px 0 5px 0} /* bottom right */
#p10 {text-align: left; margin: -130px 0 70px 0} /* center left */
after that just add this code into ur document
not sure though, i may have missed out sth.. lazy to try too
-
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... -
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;
} -
So simple and plain?
-
It's a test page...
I've yet to finish designing... my main intention is to imitate some effects... -
Y not use frames?
-
ya frames should be enuff...Originally posted by sunny6110:Y not use frames? -
One common mistake web designer often make is to overload the webpage wif effects....
-
I haven't figured out frames with CSS...Originally posted by sunny6110:Y not use frames?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... -
normal frames can do the job le.... no nid css oso...Originally posted by ndmmxiaomayi:I only want that menu to be fixed somewhere, not scroll up and down together with the page... no fancy effects. -
Hmm... want to try CSS...Originally posted by sunny6110:normal frames can do the job le.... no nid css oso... -
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.