mmalik15
asked on
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:1
<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>
<div style="float:right;width:1
<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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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!
Just looked at your code, and you have also set the right DIV to visibility:hidden!
ASKER
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.
I have made some changes but lastly can I ask why the navigation is stretching to four lines now instead of three lines.
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.
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.
ASKER
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
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.
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.
ASKER
Many thanks
ASKER
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