Конфликт background и padding

Wolk_ · January 21, 2012

Добрый вечер уважаемые форумчане, спешу к вам за советом по следующему вопросу. При разработке дизайна столкнулся с такой проблемой:

Имеется некий блок header в котором есть горизонтальный блок навигации по сайту. У header`а прописан background-image, а у ссылок в блоке навигации внутренний отступ от верхнего края блока. Хочу при наведении на определенную ссылку изменять background ссылки под курсором, как это делается я знаю, есть один момент о котором вы наверняка догадались из названия темы: padding-top ссылок конфликтует с background. При наведении на любую из ссылок в меню - background съезжает на уровень отступа ссылки, чтобы было проще и поняли о чем я рассказываю приведу пример.

Edited January 21, 2012 by Wolk_

sammasati · January 22, 2012

Покажите код.

Может там margin стоит вместо padding'a?

clavin · January 22, 2012

Добавляя padding нужно также уменьшить и height (ровно на размер добавленных пайдингов)

Wolk_ · January 22, 2012

Добавляя padding нужно также уменьшить и height (ровно на размер добавленных пайдингов)

Да, моя невнимательность меня и завела в тупик, давно знаком с такой хитростью и в коде её уже много раз применял, почему мой больной мозг не дал сигнал и в данном случае хитрость применить - для меня это до сих пор остается загадкой, благодарю, проблема решена.

Svatov · January 22, 2012

Добавляя padding нужно также уменьшить и height (ровно на размер добавленных пайдингов)
Да, моя невнимательность меня и завела в тупик, давно знаком с такой хитростью и в коде её уже много раз применял, почему мой больной мозг не дал сигнал и в данном случае хитрость применить - для меня это до сих пор остается загадкой, благодарю, проблема решена.

Это не хитрость, а правильная верстка называется.

Wolk_ · January 22, 2012

И дабы не создавать второй темы, задам ещё один вопрос...

Подскажите, как рационально можно реализовать следующий момент:

Имеется контент и sidebar, нужно, чтобы в зависимости от высоты контента увеличивалась и высота sidebar`а при том при всем, что сайдбар ни в коем случае не должен заключать в контент и должен учитываться тот момент, что порой сайдбар бывает больше контент блока. Помогите найти решение, заранее спасибо.

Edited January 22, 2012 by Wolk_

Svatov · January 22, 2012

На выбор или таблицей

Edited January 22, 2012 by Svatov

Wolk_ · January 22, 2012

И последний вопрос, чтобы у меня вообще они больше не возникли. Подскажите, как реализовать треугольник у (в данном случае) комментария, как в CSS сделать треугольник - я в курсе, но как его сделать частью border`а блока комментария - нет.

buddah · January 22, 2012

Вот статья колеги с форума Softlink'a.

Wolk_ · January 23, 2012

Огромное всем спасибо, но вот всетаки вылез ещё один вопрос. Как и каким образом можно отцентровать тег input по горизонтали?

Предположим, есть некая форма, которая заканчивается тегом input с типом submit, если в CSS прописать для кнопки такой параметр, как margin: 0 auto, то самособой ничего не произойдет, а указывать точное число в моем случае нельзя, как быть товарищи? Рассчитываю на вашу помощь.

Edited January 23, 2012 by Wolk_

DStereo · January 23, 2012

Огромное всем спасибо, но вот всетаки вылез ещё один вопрос. Как и каким образом можно отцентровать тег input по горизонтали?
Предположим, есть некая форма, которая заканчивается тегом input с типом submit, если в CSS прописать для кнопки такой параметр, как margin: 0 auto, то самособой ничего не произойдет, а указывать точное число в моем случае нельзя, как быть товарищи? Рассчитываю на вашу помощь.

Нужно кнопку заключить в блок обертку, который будет тянуться по всей ширине и для блока обертки указать text-align:center

sammasati · January 23, 2012

А фиксированную ширину кнопке можете задать? Если да, то:

display: block;
width: 200px;
margin: 0 auto;

Wolk_ · January 23, 2012

Нужно кнопку заключить в блок обертку, который будет тянуться по всей ширине и для блока обертки указать text-align:center

А фиксированную ширину кнопке можете задать? Если да, то:
display: block;
width: 200px;
margin: 0 auto;

Огромное спасибо! Прошу не закрывать тему и уж тем более её не удалять, наверняка я ещё не раз обращусь к опытным верстальщикам на данном форуме. Ну и конечно ответы на мои вопросы, возможно, для многих окажутся решением и они не станут лишний раз открывать новый топик.

Edited January 23, 2012 by Wolk_

Wolk_ · February 10, 2012

И снова здравствуйте, на этот раз столкнулся с двумя проблемами, суть которых я постараюсь изложить максимально понятно.

Первая проблема: Имеется некий div в котором располагается изображение. Никаких отступов для него и для самого блока не прописано, по умолчанию они тоже выключены, но почему-то несмотря ни на какие мои манипуляции, изображение имеет снизу внутренний отступ равный порядка 5 px. Выглядит все примерно так:

Вторая проблема: Имеются два diva в которых содержатся изображения, один длиннее другого. Что именно требуется, я изображу на картинке ниже:

Тоесть, нужно чтобы изображение большего размера находилась на равне со вторым именно внизу, а не сверху по умолчанию.

ablay2009 · February 10, 2012

Первая проблема:

Попробуйте задать диву (в котором картинка) vertical-align:bottom

Switch74 · February 10, 2012

Первая проблема:
Попробуйте задать диву (в котором картинка) vertical-align:bottom

хм.. интересный совет

по второму - попробуйте для их родителя указать text-align:bottom;

а вообще по умолчанию картинки себя так не ведут, видимо у вас все к топу прижато.

Edited February 10, 2012 by Switch74

Wolk_ · February 10, 2012

Попробуйте задать диву (в котором картинка) vertical-align:bottom

Благодарю, ваш совет помог исправить первую проблему

по второму - попробуйте для их родителя указать text-align:bottom;
а вообще по умолчанию картинки себя так не ведут, видимо у вас все к топу прижато.

Сожалею, но ваш совет мне не помог. Никаких изменений (почему-то даже неудивительно, видимо из-за несуществующего параметра):

Edited February 10, 2012 by Wolk_

Switch74 · February 10, 2012

ой блин, надо было vertical-align:bottom

но мне почему-то кажется, что у вас эти картинки в блоках и это может не помочь

Edited February 10, 2012 by Switch74

buddah · February 10, 2012

По ширине картинки одинаковы?

Можно как-то так


<head>
<style>
  div {
    float: left;
    padding: 5px;
    background: grey;
    margin: 5px;
    height: 500px;
    width: 500px;
    position: relative;
  }
  img {
    display: block;
    position: absolute;
    bottom: 0;
  }
</style>
</head>
<body>
  <div>
      <img src="http://blogs.gamefilia.com/files/imce/u355553/oso-panda.jpg">
  </div>
  <div>
      <img src="http://factsanddetails.com/media/2/20080318-pandaWWf5.jpg">
  </div>
</body>
</html>

Если что извини, сплю уже..

Wolk_ · February 11, 2012

Второй вопрос все ещё актуален, вот, может поможет. Выкладываю кусок кода CSS и HTML:

CSS


/* PHOTOS */
.photos {
	width: 480px;
	margin: 0 auto;
}

.tab1 {
	width: 200px;
	float: left;
}

.tab2 {
	width: 200px;
	float: right;
}

.tab_photo {}

.tab_photo img {
	vertical-align: bottom;
}

HTML


	<div class="photos">

    	<div class="tab1">
            <div class="tab_photo">
            	<img src="img/no.png" alt="photo_1">
            </div>
        </div>

        <div class="tab2">
            <div class="tab_photo">
            	<img src="img/no.png" alt="photo_2">
            </div>
    	</div>

    </div>
    <!-- Photos End -->

ablay2009 · February 12, 2012

А чем вам не понравился способ описанный выше buddah?

Wolk_ · February 27, 2012

А чем вам не понравился способ описанный выше buddah?

Тем, что он действенный, но не в моем конкретном случае. Поэтому вопрос все ещё актуален, выкладываю все в общий доступ, очень надеюсь на вашу помощь в данном вопросе.

Edited February 29, 2012 by Wolk_

buddah · February 28, 2012

Так надо было? http://jsfiddle.net/eutTH/1/

Если нужно чтоб были равны блоки в целом (то есть картинки внизу выравниваются, а заголовки поверху), то нужен js для приведения высоты блока с заранее неизвестной меньшей высотой к блоку с большей высотой.

Edited February 28, 2012 by buddah

Wolk_ · April 17, 2012

Столкнулся с такой проблемой. У меня есть выпадающий список [1 картинка],

как только он становится активным происходит следующее [2 картинка].

Выручайте, ниже будет представлен код.

<div class="head_profile">
                	<a href="javascript:look('div2');" class="head_profile_link">
                    	<span class="head_profile_name">User</span>
                        <span class="head_profile_arrow"></span>
                    </a>
                    <div class="head_profile_menu" id="div2" style="display:none">
                    	<div class="head_profile_menu_content">
                            <ul>
                                <li><a href="http://www.ajaxshake.com">www.ajaxshake.com</a></li>
                                <li><a href="http://www.solvingequations.net">www.solvingequations.net</a></li>
                                <li><a href="http://www.tutorialjquery.com">www.tutorialjQuery.com</a></li>
                                <li><a href="http://www.jqueryload.com">www.jqueryload.com</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

.head_profile {
	margin-right: 14px;
	float: right;
}

.head_profile_link {
	height: 33px;
	display: block;
	padding: 0 5px 0;
	text-decoration: none;
}

.head_profile_link:hover {
	text-decoration: none;
	background-color: rgba(255, 255, 255, 0.1);
}

.head_profile_name {
	color: #f3f3f3;
	font-weight: bold;
	text-shadow: 0px 1px 0px #46729e;
	text-decoration: none;
}

.head_profile_arrow {
	display: inline-block;
	height: 6px;
	width: 7px;
	margin-left: 5px;
	background: url(../img/arrow.png) no-repeat;
}

.head_profile_menu {
	border: 1px solid #46729e;
	border-top: none;
}

.head_profile_menu a {
	font-size: 12px;
	color: #fff;
}

.head_profile_menu_content {
	padding: 3px;
	background: #5e8dbb;
	border: 1px solid #719ac3;
	border-top: none;
}

Edited April 17, 2012 by Wolk_

Switch74 · April 17, 2012

а что не так? как должно быть?

Wolk_ · April 18, 2012

а что не так? как должно быть?

Вот посмотрите сам макет, нажмите на схожую кнопку и вопрос отпадет сам собой. Нужно, чтобы кнопка в шапке не съезжала, а также при наведении на нее в активном состоянии, она не должна так растягиваться.

Хочется, чтобы было так (можете сравнить с настоящим и тогда будет понятней)

Sign In

Конфликт background и padding

Question

Link to comment

Share on other sites

36 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information