Closing Gap Between Divs

问题

Here's my test site for a new food festival:

http://aksarbenribfest.bugs3.com/public_html/#!/page_home

I managed to move the cartoon logo on the front page closer to the menu arrows on the top of each page, but can't get the remaining pages to 'move up' the page.

I want to eliminate the gap between the column titles (Thursday, Friday & Saturday for example on the 'Music' page) and the bottom of the arrow menu buttons.

Since I'm modifying a template, any other help and hints are definitely appreciated - before I get to too far into it!

回答1:

If I change the top style on your content section, I think that achieves what you are looking for:

(Full size)

回答2:

The problem is the inline-style in this line:

  <section id="content" style="top: 210px;">

just change the top-value to something smaller.

回答3:

You have CSS on a section element like:

 <section id="content" style="top: 210px;">

Try reducing that to about 100px.

回答4:

Delete from #content > ul > li top: 75px then add #content #page_home { top: 75px }

回答5:

you need to change the funcion that changes dinamically the content position

$(window).resize(function (){
    if (content)
        content.stop().animate(
           {'top':(windowH()-content.height())*.5},
           500,'easeOutCubic');
});

in your scripts.js

right now, it is vertically centered, try calculating a lower value (may be the easiest way is changing the .5 to say .2 Anyway, be careful not to go too up in small windows sizes

来源：https://stackoverflow.com/questions/14418064/closing-gap-between-divs

标签

css

positioning