WebSite X5Help Center

 
Hans R.
Hans R.
User

Additional Image In The Menu Column  en

Author: Hans R.
Visited 3179, Followers 1, Shared 69  

I would like to position an image in the menu column (vertical menu).
I already used the possibility of the image in the definition of the template.
I tried an HTML element in the header with a <div>-element with aboslute positioning.

How can I add things in the menu-column, specifically an image or text around the defined menu?

Posted on the
15 ANSWERS - 1 USEFUL
Incomedia
Claudio N.
Incomedia

Hello Hans,

Actually the software does not support the custom code in the menu column. Using a div with position=absolute as CSS can solve your problem.

Read more
Posted on the from Claudio N.
Hans R.
Hans R.
User
Author

I did add a div with absolute positioning in the header (to position in the menubar). It does not work. The image disappears behind the menu bar.

Where do I place the HTML to position the DIV-element?

Read more
Posted on the from Hans R.
Incomedia
Claudio N.
Incomedia

I think you simply have to use a z-index on your div. Use one higher than 10200 to put your object above the menu graphics.

Read more
Posted on the from Claudio N.
Hans R.
Hans R.
User
Author

Unfortunately it doesn not work:

<div style="top: 0px; left: 10px; position: absolute; z-index=10201">
<img src="img.jpg" alt="Coverimage" height="191" width="116">
</div>

This gives an image covered by the (vertical) menu.

Read more
Posted on the from Hans R.
Hans R.
Hans R.
User
Author

To continue on this, the generated code is given below. There is the DIV i created in the header HTML but it is enclosed in a DIV of the HTML element used for my own DIV element which containes the image. The image can not be displayed in the menu colum this way. Any other suggestion?

<div style="position: absolute; top: 1px; left: 2px; width: 100px; height: 100px; overflow: hidden;">
<div style="top: 10px; left: 10px; position: absolute; z-index: 11000; overflow: visible">

<img src="C:\\Users\\Gebruiker\\Documents\\Websites\\NNS\\Images\\9090186352_frontcover_thumb.jpg" alt="Coverimage" height="191" width="116">

</div>
</div>


Read more
Posted on the from Hans R.
Incomedia
Claudio N.
Incomedia

Try using some JavaScript. Just add an html object to the header and paste this code:

<script>
var html = "<img src=\"relative_path_to_the_image\" alt=\"Coverimage\" height=\"191\" width=\"116\">";

$(document).ready(function() {
$("#imMnMn").after(html);
})
</script>

Of course you should write the correct path to the image. In example: "files/image.jpg" and then upload your image in the "files" folder.

Read more
Posted on the from Claudio N.
Derek Tutill
Derek Tutill
User

Works a treat for me.  Don't suppose you have a bit of code to add to it so that you can embed a link through the image to either a page within the web site or alternatively to an external web site.  Cheers

Read more
Posted on the from Derek Tutill
Hans R.
Hans R.
User
Author

Unfortunately it doesn't work for me. Don't know why. I do not get any errormessages, no picture is shown. It is getting way to difficult.

I want to mimic www.nietnaarsantiago.nl in the websiteX5 tools but that seems to be very difficult because:

1) I can not place objects at will in the menu section.
2) I can not manipulate borders, colors of the sections easily.

Any better suggestions? Coding internally into the tool I do not see as a good solution.

Thanks.

Hans

Read more
Posted on the from Hans R.
Incomedia
Claudio N.
Incomedia

Hi Hans,

Make sure that the path to the image is correct and it's correctly uploaded on your server.

Thank you!

Read more
Posted on the from Claudio N.
Hans R.
Hans R.
User
Author

It is all done, image in rootdir.

Code: <script>
var html = "<img src=\"frontcover.jpg\" alt=\"Coverimage\" height=\"0\" width=\"0\">";

$(document).ready(function() {
$("#imMnMn").after(html);
})
</script>

Checked and double checked.

Does not work, sorry.

Read more
Posted on the from Hans R.
Hans R.
Hans R.
User
Author

Two additional remarks:

  1. the height / width have been played with, I see things move right of the menu in the main textbody.
  2. maybe the image in the main text part is in front of the picture?
Read more
Posted on the from Hans R.
Incomedia
Claudio N.
Incomedia

Hi Hans,

If that does not work on your site, there's no way to add an image under the menu. The menu column can be quite complex as there are blocks used for CSS styles and other blocks used only for content.

The last try could be add a z-index higher than 10000 to your image.

Read more
Posted on the from Claudio N.
Hans R.
Hans R.
User
Author

That a pity.

You may add this as a wish for a subsequent version.

Read more
Posted on the from Hans R.
Incomedia
Claudio N.
Incomedia

Would you open an "idea" post describing exactly how you want this feature to be added in WSX5?

If there's a certain number of users interested in it, we can add it in a future release.

Thank you!

Read more
Posted on the from Claudio N.