Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Remove gap between two rectangles in CSS

Remove gap between two rectangles in CSS

Problem

I created a menu item with jquery and CSS but is has a gap in menu items..One item is placed on top op other ite..I want to remove this gap and push every eliment right litle by litle as I shown in the image. How can I do that?

here is the image of the menu item...

here is my CSS file

    *{
    margin:0;
    padding:0;
}
body{
    background:#000;
    font-family:"Trebuchet MS", Helvetica, sans-serif;
    font-size:15px;
    color: #fff;
    text-transform:uppercase;
    overflow-x:hidden;
}
.oe_overlay{
    background:#000;
    opacity:0;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}
ul.oe_menu{
    list-style:none;
    position:relative;
    margin:60px 0px 0px 40px;
    width:967px;
    float:left;
    clear:both;
}
ul.oe_menu > li{
    width:112px;
    height:50px;
    padding-bottom:2px;
    float:left;
    position:relative;
}
ul.oe_menu > li > a{
    display:block;
    background-color:#101010;
    color:#aaa;
    text-decoration:none;
    font-weight:bold;
    font-size:12px;
    width:138px;
    height:30px;
    padding:10px;
    margin:1px;
    text-shadow:0px 0px 1px #000;
    opacity:0.8;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
    background:#fff;
    color:#101010;
    opacity:1.0;

}
.oe_wrapper ul.hovered > li > a{
    background:#fff;
    text-shadow:0px 0px 1px #FFF;
}
ul.oe_menu div{
    position:absolute;
    top:50px;
    left:1px;
    background:#fff;
    width:967px;
    height:180px;
    padding:30px;
    display:none;
}
ul.oe_menu div ul li a{
    text-decoration:none;
    color:#222;
    padding:2px 2px 2px 4px;
    margin:2px;
    display:block;
    font-size:12px;
}
ul.oe_menu div ul.oe_full{
    width:100%;
}
ul.oe_menu div ul li a:hover{
    background:#000;
    color:#fff;
}
ul.oe_menu li ul{
    list-style:none;
    float:left;
    width: 150px;
    margin-right:10px;
}
li.oe_heading{
    color:#aaa;
    font-size:16px;
    margin-bottom:10px;
    padding-bottom:6px;
    border-bottom:1px solid #ddd;
}

this is my html

     
        

Duke FashionOverlay Effect Menu with jQuery

Welcome to the world of fashion

  • Collections
    • Summer 2011
    • Milano
    • Paris
    • Special Events
    • Runway Show
    • Overview
    • Winter 2010
    • Milano
    • New York
    • Behind the scenes
    • Interview
    • Photos
    • Download
    • Categories
    • Casual
    • Business
    • Underwear
    • Nature Pure
    • Swimwear
    • Evening
  • Projects
    • Fashion Shows
    • Milano
    • Paris
    • Berlin
    • New York
    • London
    • Events
    • Fashion Party 2011
    • Evening specials
    • Fashion Day Milano
    • Model Workshops
    • Media
    • Wallpapers
    • Downloads
    • Images
    • Contest 2011
    • Fashion Mania
    • Green Earth Day
  • Fragrances
    • Fashion Fragrances
    • Deálure
    • Violet Woman
    • Deep Blue for Men
    • New York, New York
    • Illusion
  • Events
    • Shows 2010
    • Milano
    • Paris
    • Berlin
    • New York
    • London
    • Shows 2011
    • Milano
    • Paris
    • Berlin
    • New York
    • London
    • Special Events
    • Fashion Party 2011
    • Fashion Countdown Party 2010
    • Fashion Day Milano
    • Model Workshops
  • Stores
    • Europe
    • Milano
    • Paris
    • Berlin
    • London
    • Asia
    • Hong Kong
    • Tokio
    • New Delhi
    • Beijing
    • United States
    • New York
    • Los Angeles
    • Seattle
    • Miami
  • My table
    • Europe
    • Milano
    • Paris
    • Berlin
    • London
    • Asia
    • Hong Kong
    • Tokio
    • New Delhi
    • Beijing
    • United States
    • New York
    • Los Angeles
    • Seattle
    • Miami
  • Admin
    • Europe
    • Milano
    • Paris
    • Berlin
    • London
    • Asia
    • Hong Kong
    • Tokio
    • New Delhi
    • Beijing
    • United States
    • New York
    • Los Angeles
    • Seattle
    • Miami
back to the Codrops tutorial Background image by Duke Photo
Problem courtesy of: Lahiru Chathuranga

Solution

Load your page in Firefox with Firebug, or Chrome, or other browser with web developer tools. Then start modifying margins,padding, etc. using the developer tools. This is easiest way to troubleshoot CSS problems, as you can see immediate feedback on the page for the changes you make.

Solution courtesy of: Mike Brant

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Remove gap between two rectangles in CSS

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×