Jump to content

Search the Community

Showing results for tags 'blank space between div'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 1 result

  1. 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; }
  • Create New...