Jump to content
  • 0

Конфликт background и padding


Wolk_
 Share

Question

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

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

di-WPMY.png

Edited by Wolk_
Link to comment
Share on other sites

Recommended Posts

  • 0
  On 1/22/2012 at 4:31 AM, clavin said:

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

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

Link to comment
Share on other sites

  • 0
  On 1/22/2012 at 7:31 AM, Wolk_ said:
  On 1/22/2012 at 4:31 AM, clavin said:

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

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

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

Link to comment
Share on other sites

  • 0

monotone_question.png

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

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

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

di-4UUS.png

Edited by Wolk_
Link to comment
Share on other sites

  • 0

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

di-I97R.png

Link to comment
Share on other sites

  • 0

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

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

di-ESQE.png

Edited by Wolk_
Link to comment
Share on other sites

  • 0
  On 1/23/2012 at 3:02 PM, Wolk_ said:

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

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

di-ESQE.png

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

Link to comment
Share on other sites

  • 0
  On 1/23/2012 at 3:08 PM, DStereo said:

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

  On 1/23/2012 at 3:12 PM, sammasati said:

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

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

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

Edited by Wolk_
Link to comment
Share on other sites

  • 0

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

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

di-ZS04.png

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

di-GK34.png

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

Link to comment
Share on other sites

  • 0
  On 2/10/2012 at 3:09 PM, ablay2009 said:
  On 2/10/2012 at 2:34 PM, Wolk_ said:

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

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

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

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

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

Edited by Switch74
Link to comment
Share on other sites

  • 0
  On 2/10/2012 at 3:09 PM, ablay2009 said:

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

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

  On 2/10/2012 at 4:20 PM, Switch74 said:

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

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

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

di-BG6D.png

Edited by Wolk_
Link to comment
Share on other sites

  • 0

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

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


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

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0
  On 2/12/2012 at 10:09 AM, ablay2009 said:

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

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

Edited by Wolk_
Link to comment
Share on other sites

  • 0

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

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

Edited by buddah
Link to comment
Share on other sites

  • 0

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

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

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

di-61I2.pngdi-BOKB.png

<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 by Wolk_
Link to comment
Share on other sites

  • 0
  On 4/17/2012 at 4:59 PM, Switch74 said:

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

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

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

1a1a1fb6e822808f98e33f9ae62b26a8.png

86db641d619ec06d8575f2b74d5455d4.png

9520a84eeff128471050afcc655592b6.png

01aca31009f329fb97e7a6b6db8baf28.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy