Menu on One Line and Colour Changes

  • 1
  • Question
  • Updated 8 years ago
  • Answered
I have at the bottom of my page links to my webpages but i would like the links on the one line and not 2 seperate lines and also for the active colour to be green with white writing and the the others when hovered over to be grey with white writing does someone know how to acheive this?
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes

Posted 8 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Craig

Hopefully this will work for you:

<style type="text/css">
dl.nav {
width: auto;
height: 27px;
margin: 0 0 0px;
}

dl.nav dt, dl.nav dd {
float: left;
display: inline;
}

dl.nav dt {
color: #111;
font-weight:
normal;
}

dl.nav dd a {
margin-left: 0px;
padding: 1px 5px;
text-decoration:
none;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
}

dl.nav
a:hover {
background: #e3e3e3;
color: #fff;
}

dl.nav dd.active a {
background: #6c9900;
color: #fff;
}

</style>

<dl class="nav"><dt>On this Page:</dt><dd class="active">
<a href="http://abbotsfordgolfsection.yolasite... Gallery</a></dd><dd><a
href="http://abbotsfordgolfsection.yolasite...
href="http://abbotsfordgolfsection.yolasite...
href="http://abbotsfordgolfsection.yolasite...
href="http://abbotsfordgolfsection.yolasite... Played</a></dd><dd><a
href="http://abbotsfordgolfsection.yolasite... Syndicte</a></dd></dl></div></div><div id="I740" style="display:block;clear: both;margin:-20px 0px 0px 0px;" class="Text_Default"><div id="I740_sys_txt" class="sys_txt" style="margin:0px; padding:0px; color:; font:; background-color:;"><p style="text-align: center;"><img style="margin: 4px; padding: 0px; width: 812px;" src="resources/AGS%20Logo.png?timestamp=1263782545916"></p></div></div></div>
</div>
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi Sanja the code kind of worked but all the info is still not on one line and there is a green circle present and a repeat of my footer for some reason!!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Whoops.. sorry Craig.. try removing this last part of your code:
</div><div id="I740" style="display:block;clear: both;margin:-20px 0px 0px 0px;" class="Text_Default"><div id="I740_sys_txt" class="sys_txt" style="margin:0px; padding:0px; color:; font:; background-color:;"><p style="text-align: center;"><img style="margin: 4px; padding: 0px; width: 812px;" src="resources/AGS%20Logo.png?timestamp=1263782545916"></p></div></div></div>
</div>

Then, can you please let me know what style you are using? Then, I can probably adjust the width accordingly. Thanks.