CMS Made Simple Forums

Posted: **Wed Aug 30, 2006 2:36 am**

I've created a new skin based on an oswd template. It works the way i envisioned except for the menu. (see http://www.llhdirect.com/hhh). I've called the id (menu) into the template but it didn't change the formating. Where is the menu getting it's formatting?

Here's the template:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- Type the title of your site here -->
<title>Linda Leigh Hargrove - {title}</title>
{metadata}
{stylesheet}
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
</head>
</__body>

<div id="container">

<div id="logo">
<a href="#"><img src="images/logo.gif" width="232" height="83" alt="" /></a>
   <!-- Start Navigation -->
      <div class="menu-vert">
           {cms_module module='menumanager'}
            </div>
      <!-- End Navigation -->
  <!-- Start Footer -->
   <div id="footer" class="clearfix">
Copyright © 2006 LLH. 
   </div>
   <!-- End Footer -->


</div>

			
<div id="body">
<h1>{title}</h1>
{content} <br />	 
</div>
			
<div class="top">
<img src="images/top.gif" width="493" alt="TOP" />

<div class="sidebar">
<h2>Sidebar</h2>
This is the left column
<br>
This and that. This and that. This and that. This and that. This and that.
</div>
</div>

</div>

<__body>
</__html>

Here's the css:

Code: Select all

* { margin: 0; padding: 0; text-decoration: none; border: 0; }
body { font: normal 0.7em Verdana, Sans-serif; background: #515151; }
#container { width: 44em; background: #d0cc73; }
#logo { position: absolute; top: 2em; left: 46em; }
#logo a:hover { background: none; }
#logo img { width: 232px; height: 83px; }
#top { position: absolute; top: 0; left: 0; }
.top { position: absolute; top: 0; left: 0; }
#top img { width: 44em; }
#sidebar { width: 10em; position: absolute; top: 11em; left: 0; padding: 2em; }
.sidebar { width: 10em; position: absolute; top: 11em; left: 0; padding: 2em; }
#sidebar h2 { margin-top: -0.1em; }
#sidebar a:hover { color: #d0cc73; }
#body { width: 26em; padding: 12.7em 2em 2em 2em; margin-left: 14em; background: #fff; }
#message { padding: 0.01em 1em 1em 1em; background: #F6F5E3; }
#menu { position: absolute; top: 12.75em; left: 46em; width: 25em; }
#menu li { font: normal 1.2em Georgia, Helvetica, Sans-serif; letter-spacing: 0.15em; padding: 0; }
#menu li a { width: 5em; display: block; padding: 0; color: #808080; background: url("../images/div.menu.a.gif") 0 0.35em no-repeat; padding-left: 1em; }
#menu li.active a, #menu li.active a:hover { background: url("../images/div.menu.a.active.gif") 0 0.35em no-repeat; color: #fff; }
#menu li a:hover { background: url("../images/div.menu.a.hover.gif") 0 0.35em no-repeat; color: #999999; }
#menu span.underline { text-decoration: underline; }
#recommended { width: 10em; padding: 2em; position: absolute; top: 27.5em; left: 0; }
#recommended h2 { margin-top: 1.3em; }
h1 { font: normal 2em Georgia, Helvetica, Sans-serif; }
h2 { font: normal 1.4em Georgia, Helvetica, Sans-serif; margin: 0.75em 0 0.2em 0; color: #505050; }
p { line-height: 135%; margin-bottom: 0.5em; }
ul { list-style: none; }
li { margin-bottom: 0.3em; background: url("../images/li.gif") 0.1em 0.45em no-repeat; padding-left: 0.75em; }
acronym { border-bottom: 0.06em dotted #000; }
a { color: #706d29; padding: 0 0.1em 0 0.1em; }
a:hover { background: #706d29; color: #fff; }
img.out { width: 2.075ex; height: 1.2ex; }

Posted: **Wed Aug 30, 2006 4:42 am**

When I look at your CSS it looks like you are using three of the same CSS.

And your menu div is set div class="menu-vert" but all of your CSS calls are for a div id(#menu) of just menu... and you don't need " in the image calls, the way you have it set up it would be (http://www.llhdirect.com/hhh/images/div.menu.a.gif)
most images are uploaded to the uploads/images folder in a default install but I'm sure you are just using the CSS the way it came.

#menu should be .menu-vert li { font: normal 1.2em Georgia, Helvetica, Sans-serif; letter-spacing: 0.15em; padding: 0; }
#menu li a { width: 5em; display: block; padding: 0; color: #808080; background: url("..should be http://www.llhdirect.com/hhh/images/div.menu.a.gif") 0 0.35em no-repeat; padding-left: 1em; }
#menu li.active a, #menu li.active a:hover { background: url("../images/div.menu.a.active.gif") 0 0.35em no-repeat; color: #fff; }
#menu li a:hover { background: url("../images/div.menu.a.hover.gif") 0 0.35em no-repeat; color: #999999; }
#menu span.underline { text-decoration: underline; }

Posted: **Wed Aug 30, 2006 11:23 am**

i changed the stylesheet ... see below ... and the menu goes away. it just flat out disappears and the copyright statement moves up like the menu statements didn't exist.

Code: Select all

* { margin: 0; padding: 0; text-decoration: none; border: 0; }
body { font: normal 0.7em Verdana, Sans-serif; background: #515151; }
#container { width: 44em; background: #d0cc73; }
#logo { position: absolute; top: 2em; left: 46em; }
#logo a:hover { background: none; }
#logo img { width: 232px; height: 83px; }
#top { position: absolute; top: 0; left: 0; }
.top { position: absolute; top: 0; left: 0; }
#top img { width: 44em; }
#sidebar { width: 10em; position: absolute; top: 11em; left: 0; padding: 2em; }
.sidebar { width: 10em; position: absolute; top: 11em; left: 0; padding: 2em; }
#sidebar h2 { margin-top: -0.1em; }
#sidebar a:hover { color: #d0cc73; }
#body { width: 26em; padding: 12.7em 2em 2em 2em; margin-left: 14em; background: #fff; }
#message { padding: 0.01em 1em 1em 1em; background: #F6F5E3; }

.menu-vert { 
     position: absolute; 
     top: 12.75em; 
     left: 46em; 
     width: 25em; 
}
.menu-vert li { 
     font: normal 1.2em Georgia, Serif; 
     letter-spacing: 0.15em; padding: 0; 
}
.menu-vert li a { 
     width: 5em; 
     display: block; 
     padding: 0; 
     color: #808080; 
     background: url (http://www.llhdirect.com/hhh/images/div.menu.a.gif) 0 0.35em no-repeat; 
     padding-left: 1em; 
}
.menu-vert li.active a, .menu-vert li.active a:hover { 
     background: url (http://www.llhdirect.com/hhh/images/div.menu.a.active.gif) 0 0.35em no-repeat;
     color: #fff; 
}
.menu-vert li a:hover { 
    background: url(http://www.llhdirect.com/hhh/images/div.menu.a.hover.gif) 0 0.35em no-repeat;     
    color: #999999; 
}
.menu-vert span.underline { 
    text-decoration: underline; 
}
#recommended { width: 10em; padding: 2em; position: absolute; top: 27.5em; left: 0; }
#recommended h2 { margin-top: 1.3em; }
h1 { font: normal 2em Georgia, Helvetica, Sans-serif; }
h2 { font: normal 1.4em Georgia, Helvetica, Sans-serif; margin: 0.75em 0 0.2em 0; color: #505050; }
p { line-height: 135%; margin-bottom: 0.5em; }
ul { list-style: none; }
li { margin-bottom: 0.3em; background: url("../images/li.gif") 0.1em 0.45em no-repeat; padding-left: 0.75em; }
acronym { border-bottom: 0.06em dotted #000; }
a { color: #706d29; padding: 0 0.1em 0 0.1em; }
a:hover { background: #706d29; color: #fff; }
img.out { width: 2.075ex; height: 1.2ex; }

Posted: **Wed Aug 30, 2006 11:42 am**

Nevermind. I got it ... was an out of place div tag in the stylesheet. thanks for your help, though, mark.

Posted: **Wed Aug 30, 2006 3:48 pm**

Hi Linda.

Just looked at your site and found the 'Contact' section isn't working. Just a whole load of error warnings appearing.
You'd best check your settings for the contact form.

Nice site though, great use of colours and your logo is excellent.

Bless you.
Mike.

Posted: **Wed Aug 30, 2006 4:29 pm**

hey, mike. thanks for checking my site.

i got the menu working, now i'm playing around with that crazy logo in the stylesheet (not used to em settings for width, etc.).

i think the errors came from something i did with the cache. ... oops

CMS Made Simple Forums

menu troubles

menu troubles

Re: menu troubles

Re: menu troubles

div out of place

Re: menu troubles

Re: menu troubles