garyr2548
04-30-2007, 02:18 AM
Ok, I have used the glossy menu from the dynamic drive page on my site and I love it. I have taught myself quite a bit of css over the past 4 months but am completely stumped by this so here is my question:
Is it possible to have my menu code in one file similar to that of the css file. I am trying to figure out a way that I can change the menu in one place and have it reflect on all of the pages that I have. I just dont really know how to go about that. I am not sure what I need but let me know if I need to post any of my code and I will be glad to.
If you would like to check out my site it is: http://www.policeunitytourviii.org
Thanks in advance for any help that is provided!
Gary
I went ahead and copied my stylesheet and listed it below. Like I said, I am self taught so if you see any glaring errors or improvements, please let me know!
h1 { font-family: Arial, serif; text-align: center; font-size: 14pt; color: black; font-weight: bold; }
h2 { font-family: Arial; font-size: 10pt; color: gray; font-weight: bold; }
h3 { font-family: Arial, serif; text-align: center; font-size: 7pt; color: gray; }
p { font-family: Arial; font-size: 10pt; color: gray;}
h4 { font-family: Arial, serif; font-size: 10pt; color: gray; font-style: italic; }
h5 { font-family: Arial, serif; text-align: center; font-size: 10pt; color: red; font-weight: bold; }
img {border:none;}
img.displayed {
display: block;
margin-left: auto;
margin-right: auto }
hr {margin-top:5px; width:60%; height:0px; }
.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 120px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}
.glossymenu li a{
background: white url(glossyback.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;
}
* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 120px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(glossyback2.gif);
}
body {
font-family:arial,helvetica,sans-serif;
font-size:12px;
}
#wrapper {
width:900px;
margin:0px auto;
border:1px solid #bbb;
padding:10px;
}
#header {
border:1px solid #bbb;
height:197px;
padding:10px;
}
#top {
border:1px solid #bbb;
text-align: center;
font-family: Arial, serif; font-size: 10pt; color: gray; font-style: italic;
width:900px;
height: 17px;
margin-top:10px;
}
#content {
margin-top:10px;
padding-bottom:10px;
}
/* applies to all divs within the content div */
#content div {
padding:10px;
border:1px solid #bbb;
float:left;
}
#content-left {
width:125px;
}
#content-main {
margin-left:10px;
width:489px;
}
#content-right {
margin-left:10px;
width:200px;
}
#footer {
float:left;
text-align: center;
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
width:878px;
}
#bottom {
clear:both;
text-align:right;
}
Is it possible to have my menu code in one file similar to that of the css file. I am trying to figure out a way that I can change the menu in one place and have it reflect on all of the pages that I have. I just dont really know how to go about that. I am not sure what I need but let me know if I need to post any of my code and I will be glad to.
If you would like to check out my site it is: http://www.policeunitytourviii.org
Thanks in advance for any help that is provided!
Gary
I went ahead and copied my stylesheet and listed it below. Like I said, I am self taught so if you see any glaring errors or improvements, please let me know!
h1 { font-family: Arial, serif; text-align: center; font-size: 14pt; color: black; font-weight: bold; }
h2 { font-family: Arial; font-size: 10pt; color: gray; font-weight: bold; }
h3 { font-family: Arial, serif; text-align: center; font-size: 7pt; color: gray; }
p { font-family: Arial; font-size: 10pt; color: gray;}
h4 { font-family: Arial, serif; font-size: 10pt; color: gray; font-style: italic; }
h5 { font-family: Arial, serif; text-align: center; font-size: 10pt; color: red; font-weight: bold; }
img {border:none;}
img.displayed {
display: block;
margin-left: auto;
margin-right: auto }
hr {margin-top:5px; width:60%; height:0px; }
.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 120px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}
.glossymenu li a{
background: white url(glossyback.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;
}
* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 120px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(glossyback2.gif);
}
body {
font-family:arial,helvetica,sans-serif;
font-size:12px;
}
#wrapper {
width:900px;
margin:0px auto;
border:1px solid #bbb;
padding:10px;
}
#header {
border:1px solid #bbb;
height:197px;
padding:10px;
}
#top {
border:1px solid #bbb;
text-align: center;
font-family: Arial, serif; font-size: 10pt; color: gray; font-style: italic;
width:900px;
height: 17px;
margin-top:10px;
}
#content {
margin-top:10px;
padding-bottom:10px;
}
/* applies to all divs within the content div */
#content div {
padding:10px;
border:1px solid #bbb;
float:left;
}
#content-left {
width:125px;
}
#content-main {
margin-left:10px;
width:489px;
}
#content-right {
margin-left:10px;
width:200px;
}
#footer {
float:left;
text-align: center;
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
width:878px;
}
#bottom {
clear:both;
text-align:right;
}