Can figure out how to style menu

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
artshark
New Member
New Member
Posts: 2
Joined: Mon May 30, 2011 10:06 pm

Can figure out how to style menu

Post by artshark »

I am using the latest release of cmsms php and mysql as of this date as I have just installed all this last week.

I am so lost. I usually do not like to post and this is my first post in any cmsms forum. I have been hacking along trying to create my site in cmms and was doing ok until I started working on the nav. There are not enough curse words.

I can not seem to figure out how to style the darned navigation at the top of the page in my site. I must have something attached to it because the font color is right. Right? This of course may be an accident at this point. The nav is in my template which follows. I have ul styles to knock out bullets and display inline which do not seem to be working. I am using the simple nav tpl. "{menu}" which I have attached as well to the template. Yet I still have a an ordinary ul with bullets. The links work for some reason. Beats me why. I may not be making any sense at this point as I have working at this for about 10 hours now.

Please help

the site is at http://www.vulcanwebdesign.net

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{title}</title>
<style type="text/css">
<!--[if IE]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->

</style>

<link href="vulcanII.css" rel="stylesheet" type="text/css" />
{cms_stylesheet}
{metadata}
<__script__ type="text/javascript" src="shadowbox.js"></__script>
<__script__ type="text/javascript">
Shadowbox.init();
</__script>
</head>

</__body>
<div id="outContainer">

<div id="container">

{menu}

<div class="logo"><image src="http://vulcanwebdesign.net/uploads/vulc ... goII.png"/> </div><!--end of logo-->


{content}
</div><!--end of container-->

</div><!--end of outContainer-->
<div id="footer"><img src="http://vulcanwebdesign.net/uploads/vulc ... footer.png" width="76" height="26" alt="Vulcan Web Design" /><span><img src="http://vulcanwebdesign.net/uploads/vulc ... Footer.png" width="240" height="240" alt="vulcan guaranteed" /></span>
</div><!--end of footer-->
<__body>
</__html>


This my stylesheet that I have attached

<style type="text/css">
/****************Limited Resets********************/

h1,h2,h3,h4,h5,h6,p,address,blockquote,div,ul,li {
margin:0;
padding:0;
}
p {
color:#cccccc;
line-height:1.8;
margin-bottom:1em;
}
a:link,a:visited {
color:#8b5614;
text-decoration:none;
}
a:hover, a:active {
color:#372208;
}
h1 {
font-size:2em;
color:#8b5614;
margin-bottom:.4em;
}
h2 {
font-size:1.6em;
color:#a06317;
font-weight:normal;
margin:1.2em 0 1em;
}
h3 {
font-size:1.3em;
color:#c78430;
font-weight:normal;
margin:1.25em 0 .5em;
}
h1,h2,h3 {
clear:both;
}
/******************End of Resets***************/
body {
background: #180000;
margin: 0px;
padding: 0px;
}
.logo img {
margin-top: 30px;
margin-left: 50px;
margin-bottom:20px;
}
#outContainer {
background: #000 url(images/bgGrd.gif) repeat-x;
width: 1100px;
margin-top: 0px;
}
#container {
background: url(http://vulcanwebdesign.net/uploads/vulc ... rgII_5.jpg) no-repeat;
min-height: 800px;
}
#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
line-height: 14px;
color: #999;
background: #370000;
border-top: 1px solid #510000;
margin: 0px;
padding: 30px 50px 80px;
}
/*menu styles*/
ul#menu {
margin-top: 0;
margin-left: 100px;
padding-left: 50px;
padding-top:20px;
color: #eed;
}
ul#menu li{
padding: 0px;
margin-right: 30px;
list-style: none;
display: inline;
}
ul#menu li a {
text-decoration:none;
color:#b70000;
}
ul#menu li a:hover {
text-decoration:none;
color:#c78430;
}
/*end of menu styles*/
.slideshow {
background: #000;
height: 354px;
width: 460px;
float: left;
border:solid 2px #c78430;
}
.slideWrap {
width: 900px;
margin-left: 140px;
margin-top: 10px;
}
.slideshowCap {
width: 360px;
float: left;
margin-left: 14px;
}

.aboutContent {
margin-top: 20px;
margin-left: 140px;
width: 800px;
min-height:700px;

}
.aboutContent p {
color:#c78430;
margin-top:20px;
}
#footer img {
margin-right:10px;
float:left;
}
#footer span img {
margin-top: -87px;
margin-left: 400px;
float: right;
margin-right: 200px;
}
#footer p {
padding-left: 220px;
}
.fltRt {
float: right;
margin-left: 12px;
}
.fltLeft {
float:left;
margin-right:12px;
}
</style>
artshark
New Member
New Member
Posts: 2
Joined: Mon May 30, 2011 10:06 pm

Re: Can figure out how to style menu

Post by artshark »

This is why I don't like to post. Right after I sent this I figured it out. I surrounded the {menu} with the <ul id="menu"> tag and presto, instant styling based on my style sheet. It is always so simple, but after so many hours I start to lose reality. Thanks to anyone who might have trying to figure this out.
Post Reply

Return to “Layout and Design (CSS & HTML)”