navyfalcon
11-06-2007, 07:29 PM
Problem: CSS DropDown Menu
Trying to adapt this menu for my website - menu on individual pages
Since it is CSS, it can be used as external style sheets - I will be using
on several pages because content is large and different subtopics.
website: http://freetutorials.name
computer applications > Utilities & drivers
(this is an example, in javascript, of what is to be accomplished in CSS
computer applications > Design & Photo
(this is what I tried and didn't work)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
GRC multi-level script-free pure-CSS menuing system stylesheet.
This code is hereby placed into the public domain by its author
Steve Gibson. It may be freely used for any purpose whatsoever.
http://www.grc.com/menu2/invitro.htm
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
I tried his example and removed items until I had the minimum
that would work for his example (left menu)
I used his external style sheet without change
problem, I think, is HTML definitions or conflict with other CSS
used to style page. Tried several ways to make it work - didn't work
pages can be seen via view > page source
and external CSS http://www.grc.com/menu2/invitro.htm
external page style css listed below:
* {
margin: 0;
padding: 0;
}
body {
background-color: #FAEBD7;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #000000;
padding: 10px;
}
a:hover {
color: purple;
background-color: white;
font-weight: bold
}
#ads {
min-height: 50px;
text-align: center;
border:1px solid darkblue;
background-color: #FAEBD7;
background-position: 5px center;
}
#banner {
text-align: center;
border:1px solid darkblue;
background-image: url(Images/2R131.gif);
background-repeat: no-repeat;
background-position: 5px center;
}
#banner b {
display: block;
min-height: 120px;
background-image: url(Images/3C331.gif);
background-repeat: no-repeat;
background-position: right center;
margin: 0 5px;
padding: 0 200px;
font-weight: normal;
}
* html #banner b {
height: 120px;
}
#banner h2 {
color: #FF0000;
font-size: 180%;
margin-bottom: 10px;
}
#homelink {
float: left;
width: 64px;
height: 17px;
background-image: url(Images/ltblue-button.gif);
margin-top: 7px;
font-size: 1px;
color: #428AFC;
}
#testlink {
float: right;
width: 64px;
height: 17px;
background-image: url(Images/lt_blue-button.gif);
margin-top: 7px;
font-size: 1px;
color: #3C8FFC;
}
h3 {
text-align: center;
color: #FF0000;
line-height: 30px;
font-size: 130%;
}
.leftcol {
float: left;
width: 49.5%;
padding: 5px 5px 5px 5px;
}
.rightcol {
float: right;
width: 49.5%;
padding: 5px 5px 5px 5px;
}
.leftcol a, .rightcol a
{
margin-left: 5px;
line-height: 1.5ex
}
.leftcol dt, .rightcol dt {
padding-top: 5px;
padding-left: 5px;
}
.leftcol dd, .rightcol dd {
padding: 2px 5px 2px 30px;
}
.leftcol b, .rightcol b {
display: block;
padding: 2px 5px 2px 30px;
}
.leftcol, .rightcol {
border:1px solid darkblue;
margin-bottom: 5px;
}
.clear {
clear: both;
}
Trying to adapt this menu for my website - menu on individual pages
Since it is CSS, it can be used as external style sheets - I will be using
on several pages because content is large and different subtopics.
website: http://freetutorials.name
computer applications > Utilities & drivers
(this is an example, in javascript, of what is to be accomplished in CSS
computer applications > Design & Photo
(this is what I tried and didn't work)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
GRC multi-level script-free pure-CSS menuing system stylesheet.
This code is hereby placed into the public domain by its author
Steve Gibson. It may be freely used for any purpose whatsoever.
http://www.grc.com/menu2/invitro.htm
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
I tried his example and removed items until I had the minimum
that would work for his example (left menu)
I used his external style sheet without change
problem, I think, is HTML definitions or conflict with other CSS
used to style page. Tried several ways to make it work - didn't work
pages can be seen via view > page source
and external CSS http://www.grc.com/menu2/invitro.htm
external page style css listed below:
* {
margin: 0;
padding: 0;
}
body {
background-color: #FAEBD7;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #000000;
padding: 10px;
}
a:hover {
color: purple;
background-color: white;
font-weight: bold
}
#ads {
min-height: 50px;
text-align: center;
border:1px solid darkblue;
background-color: #FAEBD7;
background-position: 5px center;
}
#banner {
text-align: center;
border:1px solid darkblue;
background-image: url(Images/2R131.gif);
background-repeat: no-repeat;
background-position: 5px center;
}
#banner b {
display: block;
min-height: 120px;
background-image: url(Images/3C331.gif);
background-repeat: no-repeat;
background-position: right center;
margin: 0 5px;
padding: 0 200px;
font-weight: normal;
}
* html #banner b {
height: 120px;
}
#banner h2 {
color: #FF0000;
font-size: 180%;
margin-bottom: 10px;
}
#homelink {
float: left;
width: 64px;
height: 17px;
background-image: url(Images/ltblue-button.gif);
margin-top: 7px;
font-size: 1px;
color: #428AFC;
}
#testlink {
float: right;
width: 64px;
height: 17px;
background-image: url(Images/lt_blue-button.gif);
margin-top: 7px;
font-size: 1px;
color: #3C8FFC;
}
h3 {
text-align: center;
color: #FF0000;
line-height: 30px;
font-size: 130%;
}
.leftcol {
float: left;
width: 49.5%;
padding: 5px 5px 5px 5px;
}
.rightcol {
float: right;
width: 49.5%;
padding: 5px 5px 5px 5px;
}
.leftcol a, .rightcol a
{
margin-left: 5px;
line-height: 1.5ex
}
.leftcol dt, .rightcol dt {
padding-top: 5px;
padding-left: 5px;
}
.leftcol dd, .rightcol dd {
padding: 2px 5px 2px 30px;
}
.leftcol b, .rightcol b {
display: block;
padding: 2px 5px 2px 30px;
}
.leftcol, .rightcol {
border:1px solid darkblue;
margin-bottom: 5px;
}
.clear {
clear: both;
}