CSS Проблемы с размером (базовые)

Я пытался создать сайт, например, this. Хотя из моего понимания, что сайт находится в JQuery, и я хочу работать только в HTML и CSS, поэтому я использовал некоторые анимации веб-кита. Однако у них есть небольшое пространство между вершиной и фотографией, скользящей вверх. Я понятия не имею, как это исправить. Если бы кто-нибудь мог мне помочь, я бы очень признателен.CSS Проблемы с размером (базовые)

Вот сайт: http://www.wandernetwork.com/

Вот скрипка: http://jsfiddle.net/8QhKW/

и вот исходный код:

<! DOCTYPE HTML> 
<html> 
<head> 
<meta charset='UTF-8'> 
<title> Wandercraft Network </title> 

<style media="screen" type="text/css"> 

#page-wrap{ 
    width:620px; 
    margin:0px auto; 
} 
.slide-up-boxes a { 
    display:block; 
    width:300px; 
    height:300px; 
    background: #eee; 
    overflow:hidden; 
} 
.slide-up-boxes h5 { 
    height:300px; 
    width:300px; 
    text-align:center; 
    line-height:150px; 
    -webkit-transition: margin-top 0.3s linear; 
    background-color:#white; 
} 
.slide-up-boxes a:hover h5 { 
    margin-top:-300px; 
} 
.slide-up-boxes div { 
    text-align:center; 
    height:300px; 
    width:300px; 
    opacity:0; 
    background-color:orange; 
    -webkit-transform: rotate(6deg); 
    -webkit-transition: all 0.2s linear; 
} 
.slide-up-boxes a:hover div { 
    -webkit-transform: rotate(0); 
    opacity:1; 
} 

.slide-up-boxes { 
margin:5px; 
width:300px; 
float:left; 
} 

.banner{ 
margin:0px auto; 
display:block; 
padding:15px; 
width:1000px; 
height:300px; 
} 

/* =====================================================================*/ 
/* MAKES THE ENJIN TRAY RUN VERTICALLY RATHER THAN HORIZONTALLY 
/* =====================================================================*/ 

/* Limit the width of the tray to 30px to make it stack vertically*/ 

#enjin-tray { 
    max-width: 30px; 
    margin: 0; 

/*adjust to your desired distance from the bottom of the window*/ 

    bottom: 175px; 

} 

/*Make all of the corners rounded*/ 
#enjin-tray li#notificationpanel { border-radius: 3px;} 

/* make the border cover all edges */ 
#enjin-tray ul li.tray-item {border-style: solid; border-width: 1px;} 

/* Edit the alignment of the background images */ 
#notificationpanel .notification-icon.apps {background-position: -84px 3px;} 
#notificationpanel .notification-icon.general {background-position: -54px 3px;} 
#notificationpanel .notification-icon.messages {background-position: -25px 3px;} 

/*Hide the Home button - it's redundant and it's wider than the others, so it looks funny stacked vertically */ 
#notificationpanel .notification-icon.dashboard {display: none;} 

/*Subpanel Tweaks - for the pop-up panel -- bottom: 0 will line the panel up with the bottom of the tray*/ 
#enjin-tray li#notificationpanel .subpanel {width: 380px; bottom: 0;} 

/*fixe the horizontal alignment for the different panels*/ 
#enjin-tray #notificationpanel .subpanel.general {right: 40px;} 
#enjin-tray #notificationpanel .subpanel.messages {right: 40px;} 
#enjin-tray .subpanel {right: 40px;} 

/*Hide the fake icons that appear when the subpanel opens */ 
#enjin-tray #notificationpanel .subpanel.apps .faux-icon {display: none;} 
#enjin-tray #notificationpanel .subpanel.general .faux-icon {display: none;} 
#enjin-tray #notificationpanel .subpanel.messages .faux-icon {display: none;} 


/*Move notification tip - the "right: 35px" pulls the tips to the left of the tray. The "bottom: 231px" will have to be adjusted 
according to how high up the side of the browser window you placed your tray in the #enjin-tray section */ 

#messages-notification-tip {bottom: 231px !important; right: 35px !important;} 
#general-notification-tip {bottom: 205px !important; right: 35px !important;} 
#apps-notification-tip {bottom: 180px !important; right: 35px !important;} 

/*Hide the little chat tail on the notification pop-up */ 
    .triangle {display: none;} 

/*move the one-on-one chat icon over to the right edge of the page, now that the tray is out of the way (if you're beta-testing the chat */ 
    #enjin-tray-messaging {display: none;} 


</style> 

</head> 

<body> 

<img src="https://dl.dropboxusercontent.com/u/85261154/WN_Banner.png" border="0px" class="banner"> 

    <div id="page-wrap"> 
     <section class="slide-up-boxes"> 
      <a href="www.reddit.com"> 
     <img src="https://dl.dropboxusercontent.com/u/85261154/PVP.png"> 
     <div> 
     <h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5> 
     </div> 
     </a> 
     </section> 

    <section class="slide-up-boxes"> 
     <a href="www.reddit.com"> 
     <img src="https://dl.dropboxusercontent.com/u/85261154/Kingdoms.png"> 
     <div> 
     <h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5> 
     </div> 
     </a> 
    </section> 

     <section class="slide-up-boxes"> 
     <a href="www.reddit.com"> 
     <img src="https://dl.dropboxusercontent.com/u/85261154/Survival.png"> 
     <div> 
     <h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5> 
     </div> 
     </a> 
     </section> 
      <section class="slide-up-boxes"> 
      <a href="www.reddit.com"> 
      <img src="https://dl.dropboxusercontent.com/u/85261154/Factions.png"> 
      <div> 
      <h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5> 
      </div> 
      </a> 
     </section> 
       <div style="clear:both;"></div> 
    </div> 

</body> 

</html>

Спасибо за чтение, любая помощь будет оценен

источник

2013-07-14 user2426889

Извините, но я не понимаю, что это точка? –

, пожалуйста, объясните, что вы хотите сделать точно, каков конечный результат, которого вы хотите достичь? – Mangiucugna

Извините, возможно, это было не очень очевидно, но я хотел, чтобы ящики не имели места между верхней границей и изображением. – user2426889

Добавить это вашему CSS:

.slide-up-boxes a { 
    line-height: 0; 
}

Элементы a будут занимать высоту от свойства line-height, даже если у них нет текстового узла, так как вы работаете с изображениями, вы не хотите добавлять к нему какую-либо высоту.

источник

2013-07-14 19:39:31

Whoa! Это работало, как шарм, спасибо за то, что вы нашли время, чтобы ответить и объяснить мне это, я очень ценю это, ВСЕ ХАЙЛ БОЛЬШЕ И ВСЕ ЗНАЮ KAALA_DEV! – user2426889

Вы можете изменить изменение маржи от

.slide-up-boxes a:hover h5 { 
    margin-top:-300px; 
}

.slide-up-boxes a:hover h5 { 
    margin-top:-305px; 
}

Или найти, где что дополнительный запас приходит от;)

источник

2013-07-14 19:41:50

Когда я открываю это в хроме, он добавляет скуку на дно, а не сверху, а раньше на хром это было прекрасно, Tho на сайте не было места, когда я запускал его в хроме, и это происходит, когда я применяю его к enjinn или использовать его на Jsfiddle, поэтому я собираюсь попробовать его, спасибо за ваш ответ, я буду отмечать его как правильно, если он работает. – user2426889

Я попробовал его в инспекторе элементов в хроме, и он сделал трюк –

Nevermind, все зная, что у Koala_Dev есть исправление для меня, и причина, по которой у меня возникла проблема, были элементы A будут занимать высоту линии свойство, даже если у них нет текстового узла, поскольку я работал с изображениями, вы не хотите добавлять к нему какую-либо высоту. – user2426889

Также вы можете устранить эту проблему, добавив следующий код:

div#page-wrap section.slide-up-boxes a div { 
    position: relative; 
    bottom: 5px; 
}

Но уверен, что делает высоту строки по 0 из бирки будет лучше;)

источник

2013-07-14 19:58:28

CSS Проблемы с размером (базовые)

ответ

Смежные вопросы