Reputation: 3063

Where does this extra space comes from?

As you can see here http://jsfiddle.net/FqW4R/ and on the picture below, my menu items are not perfectly aligned with "logo" and "social". Also there's a massive gap between the menu categories (Menu I, Menu 2, etc) and the sub-items. When I look at my code I do not see extra padding or anything like that that could cause this type of issue. Any thoughts on that? Many thanks

enter image description here

Html, body {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: 'Open Sans', sans-serif; 
}

#logo {
    position: absolute;
    top: 35px;
    left: 20px;
    color: #000;
    font-size: 20px;
}

/* mainmenu */

#mainmenu {
    float:right;
    margin-top: 35px;
    padding-bottom: 10px; 
    overflow: hidden;
}
#mainmenu ul {
    float: right;
    margin: 0;
    color: #000;
    list-style: none;
}
#mainmenu ul li {
    display: inline-block;
    float: left;
    width: 140px;
    line-height: 20px;
}
#mainmenu>ul>li {
    margin-left: 20px;
}
#mainmenu ul li a {
    display: block;
    text-decoration: none;
    font-weight:600;
    font-size: 12px;
}
#mainmenu ul li a, #mainmenu ul ul:hover li a {
    color: #333;
    -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -webkit-transition-duration: .4s, .4s, .4s, .4s;
    -moz-transition-duration: .4s, .4s, .4s, .4s;
    -ms-transition-duration: .4s, .4s, .4s, .4s;
    -o-transition-duration: .4s, .4s, .4s, .4s;
    transition-duration: .4s, .4s, .4s, .4s;
    -webkit-transition-property: all, -webkit-transform;
    -moz-transition-property: all, -moz-transform;
    -ms-transition-property: all, -ms-transform;
    -o-transition-property: all, -o-transform;
    transition-property: all, transform;
}
#mainmenu ul ul li a:hover, #mainmenu ul ul li.current-menu-item a {
    color: #005EBC;
    -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -webkit-transition-duration: .4s, .4s, .4s, .4s;
    -moz-transition-duration: .4s, .4s, .4s, .4s;
    -ms-transition-duration: .4s, .4s, .4s, .4s;
    -o-transition-duration: .4s, .4s, .4s, .4s;
    transition-duration: .4s, .4s, .4s, .4s;
    -webkit-transition-property: all, -webkit-transform;
    -moz-transition-property: all, -moz-transform;
    -ms-transition-property: all, -ms-transform;
    -o-transition-property: all, -o-transform;
    transition-property: all, transform;
}

#social {
position: absolute;
    float:right;
    right: 10px;
    Color: blue;
    margin-top: 35px;
}

HTML

  <div id="logo">Logo</div>  <!-- End DIV Logo -->
  <div id="mainmenu">
    <ul>
      <li>
        <h5>Menu I</h5>
        <ul>
          <li><a title="" href="">Biography</a> </li>
          <li><a title="" href="">Publications</a> </li>
        </ul>
      <li>
        <h5>Menu 2</h5>
        <ul>
          <li><a title="" href="">Demo</a> </li>
          <li><a title="" href="">Features</a> </li>
          <li><a title="" href="">Comparison</a> </li>
        </ul>
      </li>
      <li>
        <h5>Menu 3</h5>
        <ul>
          <li><a title="" href="">Item 1</a> </li>
          <li><a title="" href="">Item 2</a> </li>
          <li><a title="" href="">Item 3</a> </li>
        </ul>
      </li>
      <li>
        <h5>Menu 4</h5>
        <ul>
          <li><a title="" href="">ddfd</a> </li>
          <li><a title="" href="">dsfd</a> </li>
        </ul>
      </li>
    </ul>
  </div>  <!-- End DIV Main Menu -->
 <div id="social">Social</div><!-- End DIV Social -->

Upvotes: 0

Answers (4)

defau1t

Reputation: 10619

You should read about the CSS Box model. Further to this you are using position:absolute: which actually creates the problem when you resize the screen. Properly use of floats is important to layout the site. I just fixed some of these issues for you and here is the reworked menu.

Hope this helps.

A little of my rewritten CSS is below.

#social {
border:1px solid green;
    float:left;
    width:120px;
    Color: blue;

}

#mainmenu {
    float:left;
    border:1px solid red;
    padding-bottom: 10px; 
    overflow: hidden;
}


#logo {
    float:left;
    color: #000;
    font-size: 20px;
    border:1px solid black;

    width:150px;
}

http://jsfiddle.net/FqW4R/6/

Upvotes: 1

Mr. Alien

Reputation: 157414

First of all, you should use a CSS Reset, because if you don't reset the elements, browser will apply some default styles to your elements, which you don't want eh? You can Google out, will get tons out there, if you want to keep it simply but you want to reset, you can use the below block of code and paste it in your CSS

* {
    margin: 0;
    padding: 0;
}

Demo (Reduced spacing)

It seems like you should learn positioning, you are using position: absolute; element, without wrapping the element inside position: relative; container, this way, your position: absolute; elements will flow out in the wild. Also, I don't think you want to use absolute, using float will be appropriate here.

See how the positioning matters..

What you are doing

What should you do (Saw position: relative; there?)

The horizontal space between each menu is caused because you are using explicit width

Demo

Also, if you use float, you don't require display: inline-block;

I suggest you to learn CSS Positioning and Floats

Upvotes: 1