Natural essence theme

Feed 6 posts, 2 voices

Avatar
11 posts

Hi all,

I’m in the processes of porting the Natural Essence theme from Arcsin.

http://templates.arcsin.se/demo/natural-essence-website-template/

I have run into two issues that I can’t figure out (some suggestions are much appreciated!):

1. The “discs” from the UL are floating above the menu. I tried to use “ list-style-type: none; “ in the navigation class to remove them, but it doesn’t work.. Any idea?

2. The active menu state does not work.

navigation a#active { background-position: left bottom; color: #331;
}

Am I missing something here?

Here is the link to my site: http://jcihelsinki.com/?natural-essence.html

 
Avatar
316 posts

You have done things slightly different from the way arcsin has done it. Arcsin’s code for that area is:

<div class="navigation">

	<a href="index.html" id="active">Two Columns</a>

	<a href="single-column.html">Single Column</a>
	<a href="no-header.html">Without Header</a>
	<a href="index.html">Malesuada</a>
	<a href="index.html">Lobortis</a>
	<a href="index.html">Pharetra</a>

	<div class="clearer"></div>

</div>

Your code is:

<div class="navigation">
    <ul>
      <li><a href="http://jcihelsinki.com/">Home</a></li>

      <li><a href="http://jcihelsinki.com/?test-2.html" title="Test 2" >Test 2</a></li>
      <li><a href="http://jcihelsinki.com/?unbound.html" title="Unbound" >Unbound</a></li>
      <li><a href="http://jcihelsinki.com/?natural-essence.html" title="Natural Essence"  class="current">Natural Essence</a></li>
      <li><a href="http://jcihelsinki.com/?dirtylicious.html" title="Dirtylicious" >Dirtylicious</a></li>
      <li><a href="http://jcihelsinki.com/?about_us.html" title="About us" >About us</a></li>
      <li><a href="http://jcihelsinki.com/?articles.html" title="Articles" >Articles</a></li>

    </ul>
  </div> <!-- end #navigation -->

He doesn’t list his menu as a unordered list, he lists them under a <div class=“navigation”> and simply puting links in.

I’m not sure, but can you not do the same? This is what he uses for his navigation system:

/* navigation */
.navigation {
	background: #DED9D0 url(img/nav.gif) repeat-x; height: 41px;
	border-top: 1px solid #996;
}
.navigation a {
	background: #FFF url(img/nav.gif) repeat-x;
	border-right: 1px solid #C9C6B3;
	color: #553;
	float: left;
	font: bold 1em Tahoma,sans-serif;
	padding: 0 14px;
	line-height: 41px;
	text-align: center;
	text-decoration: none;
}
.navigation a:hover,.navigation a#active {background-position: left bottom; color: #331;}

Not sure if that helps any…

 
Avatar
11 posts

Thanks a MILLION mtylerb!

Your post helped.

I made the following changes:

.navigation li {
	list-style-type: none;

}

.navigation li a.current {
	background-position: left bottom;
	color: #000;
}

.navigation li a.hover {
	background-position: left bottom;
	color: #000;
}

I will continue with some more tweaking of this theme port and send it to be posted in the Themes section.

Thanks!

J