WebSite X5Help Center

 
Hans R.
Hans R.
User

Additional Image In The Menu Column  en

Autor: Hans R.
Visitado 3440, Followers 1, Compartido 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?

Publicado en
15 RESPUESTAS - 1 ÚTIL
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.

Leer más
Publicado en de Claudio N.
Hans R.
Hans R.
User
Autor

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?

Leer más
Publicado en de 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.

Leer más
Publicado en de Claudio N.
Hans R.
Hans R.
User
Autor

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.

Leer más
Publicado en de Hans R.
Hans R.
Hans R.
User
Autor

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>


Leer más
Publicado en de 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.

Leer más
Publicado en de 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

Leer más
Publicado en de Derek Tutill
Hans R.
Hans R.
User
Autor

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

Leer más
Publicado en de 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!

Leer más
Publicado en de Claudio N.
Hans R.
Hans R.
User
Autor

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.

Leer más
Publicado en de Hans R.
Hans R.
Hans R.
User
Autor

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?
Leer más
Publicado en de 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.

Leer más
Publicado en de Claudio N.
Hans R.
Hans R.
User
Autor

That a pity.

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

Leer más
Publicado en de 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!

Leer más
Publicado en de Claudio N.