• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 421
  • Last Modified:

Imange not showing on web page but present in markup

on this website http://www.marhall.com/ I have added an image in  top right corner, after navigation. The image is appearing in the html when inspect element but not showing. Any ideas why it wont be showing. The image is inside div with the following markup

 <div style="float:right;width:144px; height:69px; margin-left:.8em;">
<img src="images/VIDEOS.png" border="0" usemap="#Map">
<map name="Map" id="Map">
  <area shape="rect" coords="62,28,95,39" href="http://www.bbc.co.uk" target="_blank" alt="Test">
  <area shape="rect" coords="64,46,115,56" href="http://www.cnn.com" target="_blank" alt="test">
</map>
</div>
0
mmalik15
Asked:
mmalik15
  • 5
  • 4
1 Solution
 
Chris StanyonCommented:
Change the DIV to position:absolute and add a z-index to show it above your slide show. You can then position it using top, left and right.

<div style="position: absolute; top:0px; right: 7px; z-index:99999;width:144px; height:69px;">

From your design, I can't quite figure out where you want it - there's not enough room on the right (after the navigation) to show it, so you may need to tweak other CSS.
0
 
mmalik15Author Commented:
thanks for the comment.

I can reduce the width of navigation, which I have tried but for some reason after reducing the width of navigation from 710px to 575px is not working, as the navigation moves towards right instead of moving to left and making room for the new image
0
 
mmalik15Author Commented:
I have also changed the float:right property on the navigation to float:left but that does not seem to move the navigation to the left either.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Chris StanyonCommented:
Your #navigation div is positioned absolutely so floating it has no effect. The reason it moves right when you change the width is because you have set it's position to right:7px, so it will always be 7px from the right. Change this to 150px after setting your #navigation width to 575px and everything should line up.

Just looked at your code, and you have also set the right DIV to visibility:hidden!
0
 
mmalik15Author Commented:
thanks a lot for your comments.
 
I have made some changes but lastly can I ask why the navigation is stretching to four lines now instead of three lines.
0
 
Chris StanyonCommented:
The narrower the navigation, the more lines it'll needs to display the info!

You have 2 separate ULs for the navigation and now the #navigation DIV isn't wide enough to show all the LIs without wrapping to a new line.
0
 
mmalik15Author Commented:
I understand that but even when there is more than enough room available for the li elements it still stretches to next line. Ideally what should be the width of navigation div to accomodate both logo and the new image
0
 
Chris StanyonCommented:
It'll only stretch to the next line if there isn't enough room, which is what is currently happening.

Your design won't work as it is. There's simply not enough room to accommodate the logo, the image and the navigation Uls on one line.

You could reduce the font-size but it would be way too small. You could remove the left and right padding from the navigation to give you extra width, but that may make things look cramped and may still not be enough room. You could remove one or more of the LIs!

A few options available but they will need you to rethink your design slightly.
0
 
mmalik15Author Commented:
Many thanks
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now