Конфликт background и padding

[Wolk_]

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

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

Edited January 21, 2012 by Wolk_

[sammasati]

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

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

[clavin]

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

[Wolk_]

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

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

[Svatov]

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

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

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

[Wolk_]

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

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

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

Edited January 22, 2012 by Wolk_

[Svatov]

На выбор или таблицей Edited January 22, 2012 by Svatov

[Wolk_]

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

[buddah]

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

[Wolk_]

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

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

Edited January 23, 2012 by Wolk_

[DStereo]

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

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

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

[sammasati]

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

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

[Wolk_]

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

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

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

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

Edited January 23, 2012 by Wolk_

[Wolk_]

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

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

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

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

[ablay2009]

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

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

[Switch74]

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

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

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

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

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

Edited February 10, 2012 by Switch74

[Wolk_]

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

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

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

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

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

Edited February 10, 2012 by Wolk_

[Switch74]

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

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

Edited February 10, 2012 by Switch74

[buddah]

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

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

<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_]

Второй вопрос все ещё актуален, вот, может поможет. Выкладываю кусок кода 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]

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

[Wolk_]

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

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

Edited February 29, 2012 by Wolk_

[buddah]

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

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

Edited February 28, 2012 by buddah

[Wolk_]

Столкнулся с такой проблемой. У меня есть выпадающий список [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]

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

[Wolk_]

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

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

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