Home : Forums : ELATED.com Site Help : How to place an image in the menu navigation

How to place an image in the menu navigation

You are currently not logged in. You can view the forums, but cannot post messages.

02-Apr-11 10:52

Delete

Edit

Gemini

No stars yet

Posts: 2

From: UK

Hi there, I really could do with some help, I have been working on a friends website for his business and everything was going pretty well modifying a template I bought.

I am not clueless when it comes to CSS or html, however, I am by far an expert.

I have come to a standpoint as I dont know how to do what I require for the site.

You will see the image below, and hopefully this is self explanatory. I just need an image placed where you see under the menu nav, possibly with a rollover image, or just a still image.

Please could some kind soul help me. This is what the index file looks like.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="wrapper">
<div id="topwrapper"></div>
<div id="mainwrapper">

<div id="header">
<div class="center">

<div id="logo">
<a href="./index.html"><img src="./images/logo.png" alt="logo" /></a>
</div>


<div class="sidebartop" id="headerright">


<div id="mainmenu">
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.a.com" class="selected">Home</a>

<li><a href="./about.html">About</a>
<ul>
<li><a href="#">Our Company</a></li>
<li><a href="#">Vision and Mission</a></li>
<li><a href="#">Testomonials</a></li>
</ul>
</li>
<li><a href="#./services.html">Services</a>
<li><a href="./vehicles.html">Vehicles</a>
<ul>
<li><a href="#">Saloons</a></li>
<li><a href="#">6 Seaters</a></li>
<li><a href="#">Mercedes E/S Class</a></li>
<li><a href="#">Viano</a> </li> </ul>
</li>
<li><a href="./testimonial.html">Testomonials</a>
<ul>
</ul>
<li><a href="./contact.html">Contact</a></li>
</ul>
</div>
</div>


</div>
</div>
</div>



http://img638.imageshack.us/i/acexecu.png/

[Edited by Gemini on 02-Apr-11 10:53]

04-Apr-11 05:15

Delete

Edit

matt

Gold

Posts: 3236

From: Southern Highlands, NSW, Australia

Hi Gemini, welcome to the forums!

Well you probably just want to put an img tag after the navigation list, and float it right in your CSS. Or if you want the image to be clickable then add a link instead, and add the image as a background on the link using CSS.

I can't really help further without seeing your actual page with the markup, CSS and images in place. Can you post the URL of the page with the problem please?

Cheers,
Matt

PS: Please use the code (<>) button when posting code in the forum - makes it much easier to read.

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

04-Apr-11 09:51

Delete

Edit

Gemini

No stars yet

Posts: 2

From: UK

Hi, sorry for making a mess, but thanks for looking into the this.

In fact, its not a float right I need, I want an overlay I think, however I am having other code errors with this template.

This was my first client and I am getting really stressed out, I dont want to upset my first customer, as they say first impressions last!

If you coudl help me I would be honoured and would even said a drink to your paypal address, I have tried a few bits of code already, none of it worked.

Also please bare in mind, that the code thats on the site live is wrong from my febel attempts to make this work, I have been editing the version offline now.

http://img638.imageshack.us/i/acexecu.png/
www.ac-executives.com

Also, I would love to know how to remove the image script found on the vehicles page, as I dont really need it.

Thanks in advance my friend.

05-Apr-11 05:31

Delete

Edit

matt

Gold

Posts: 3236

From: Southern Highlands, NSW, Australia

@Gemini: Put your img tag at the end of your "smoothmenu1" div, just after the clearing <br> element, and float it right.


<div id="smoothmenu1" class="ddsmoothmenu"><!-- The Menu -->
  <ul>
  ...
  </ul>
  <br style="clear: left" />
  <img src="yourimage" style="float: right;" />
</div>
<!-- End of Menu -->

Not sure what you mean by "image script" - there are quite a few different scripts included in that page. (Too many in my opinion!) You'll find all the script linked to using <script> tags in the document head - just remove the one(s) you don't need.

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/