Jump to content

elmohack
 Share

Recommended Posts

Ok my issue is that the image in the attached file (screen shot) refuses to stay in the box , when i remove the menu the image stays in the box, does anyone have a clue of what is causing this issue? Please see attachment to roughly get what i mean. The image size is 1000px by 150px so it should fit nicely but apparently it leaves a blank space in the div on the top i have tried verticle align top still not results.i tried float right it stays within the heigh of the box properly BUT it moves to the extreme right.. i can fix it by using position relative left : negative but i want to figure out what the issue is without using any position relative negative etc. Please help :S Here is the HTML Code - <div class="menu"> <ul> <li style="width:300px; height:135px; padding:0px ;border: none;"><a href="#" ><img src="images/logo1.png"> </a></li> <li ><a href="#" ><img src="images/home1.png"></a></li> <li><a href="#" id="current">Web Hosting</a> <ul> <li><a href="#">Shared Hosting</a></li> <li><a href="#">Domains</a></li> </ul> </li> <li><a href="/faq.php">Servers</a> <ul> <li><a href="#">Virtual Private Servers</a></li> <li><a href="#">Dedicated Servers</a></li> </ul> </li> <li><a href="webdesign.html">Web Design</a></li> <li><a href="support.html">Support</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </div> (here is where i get the probem the image overflow or rather doesnt stay within the div for a better deccription look at the attach image to what i mean ) <div class="bannerbox"><div class="banner"><img src="images/ds-banner.jpg"></div></div>------------ End of html code-start of css - .bannerbox{background:black;border:0px;margin:auto;width:100%;height:150px;padding:0px; } .banner{background:red;border:0px;margin:0 auto;width:1000px;height:150px;padding:0;vertical-align:top; position: relative; left: 0px; top: 0px; } img{vertical-align:top;}------------------------ menu css.menu{clear:both;min-width: 1000px; border:none; border:0px; margin:0px; padding:0px; font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size:14px; font-weight:bold; background:#000000; width:100%; }.menu ul{ background:#000000; clear:both; height:110px; list-style:none; width: 1000px; max-width:1000px; margin: 0 auto; padding:0; } .menu li{ float:left; padding:0px ; min-width: 60px; height: 50px;width: 110px; } .menu li a{ background:#000000 url("images/vline1.png") bottom right no-repeat; color:#cccccc; border-radius: 5px 5px 0px 0px;-moz-border-radius: 5px 5px 0px 0px;-webkit-border-radius: 5px 5px 0px 0px; display:block; height: 110px; font-weight:normal; line-height:110px; margin:0px; text-align:center; text-decoration:none; } .menu li a:hover, .menu ul li:hover a{ background: #131313 url("images/arrow1.png") bottom center no-repeat; color:#FFFFFF; text-decoration:none; } .menu li ul{ border-radius: 0px 0px 5px 5px;-moz-border-radius: 0px 0px 5px 5px;-webkit-border-radius: 0px 0px 5px 5px; background:#131313; display:none; height:auto; padding:0px; margin:0px; border:0px; position:absolute; width:225px; z-index:200 /*top:1em; /*left:0;*/ } .menu li:hover ul{ display:block; } .menu li li { background:url('images/hr.png') bottom left no-repeat; display:block; float:none; margin:0px; padding:0px; width:225px; height:auto; /*removethis*/ } .menu li:hover li a{ background:none; } .menu li ul a{ line-height:75px; display:block; height:75px; font-size:12px; font-style:normal; margin:0px; padding:0px 10px 0px 15px; text-align:left; } .menu li ul a:hover, .menu li ul li:hover a{ background:#393b3b url('images/arrow2.png') center left no-repeat; border:0px; border-radius: 0px 0px 5px 5px;-moz-border-radius: 0px 0px 5px 5px;-webkit-border-radius: 0px 0px 5px 5px; color:#ffffff; text-decoration:none; } .menu p{ clear:left; }

post-94772-0-19638400-1337285915_thumb.jpg

  • Like 1
Link to comment
Share on other sites

Your inline style here

<li style="width:300px; height:135px; padding:0px ;border: none;"><a href="#" ><img src="images/logo1.png"> </a></li>

overrides the height you specified in the rest of the CSS code, change height to 110px

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...