Съезжает блок внутри div c position:fixed

imissyouso · July 14, 2013

Привет всем.

Странным образом съезжает блок #top_navigation_block_inner будто у него выставлен margin-top ~ 20px


    <body>
	    <div id="top_navigation_block">
		    <div id="top_navigation_block_inner">
		    <ul id="top_navigation_links">
			    <li><a href="#">О ПРОЕКТЕ</a></li>
			    <li><a href="#">ПАРТНЕРАМ</a></li>
			    <li><a href="#">ПОДДЕРЖКА</a></li>
			    <li><a href="#">ЮРИДИЧЕСКАЯ ИНФОРМАЦИЯ</a></li>
			    <li><a href="#">КОНТАКТЫ</a></li>
		    </ul>
		    </div>

	    </div>
    </body>

съезжающий бок специально сделал голубым.

rash · July 14, 2013

Обнулите маргины у вложенного списка, они «выплескиваются». Или самому иннеру задайте ненулевой паддинг или бордер.

imissyouso · July 14, 2013

спасибо,сработало, а я ведь забыл прикрепить css:


@font-face {
    font-family: Ubuntu-B; /* имя шрифта для CSS правил */
    src: local("Ubuntu-B"), /* проверка на наличие шрифта в ОС пользователя */
    url(fonts/Ubuntu-B.ttf); /* если шрифт не найден браузером, то загружаем его по указанному пути */
}
root {
    padding: 0px;
    margin: 0px;
}
#top_navigation_block {
    background: #3e3e3e;
    height: 60px;
    width: 100%;
    position: fixed;
    top:0px;
    left: 0px;
}
#top_navigation_block_inner {
    width: 980px;
    height: 100%;
    margin:0px auto;
    background: aqua;
}
#top_navigation_links{
    list-style-type:none;
}
#top_navigation_links li{
    display:inline;
    padding-right: 20px;
}
#top_navigation_links a
{
    font-family: Ubuntu-B;
    font-size: 0.8em;
    text-decoration:none;
    color:#fff;
}
#top_navigation_links a:hover
{
    color:#fff;
}

объяните логик

я выставил в #top_navigation_links margin:0px;

но это ведь ul внутри иннера, почему убрав у него маргин удаляется внешний отступ у иннера? где логика?

rash · July 14, 2013

Интуиция

Это поведение кажется немного необычным, но явно описано в спецификации, и часто помогает делать полезные вещи. Вкратце, например, можно посмотреть тут: https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

imissyouso · July 14, 2013

спасибо)

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

Делаю так:


@font-face {
    font-family: Ubuntu-B; /* имя шрифта для CSS правил */
    src: local("Ubuntu-B"), /* проверка на наличие шрифта в ОС пользователя */
    url(fonts/Ubuntu-B.ttf); /* если шрифт не найден браузером, то загружаем его по указанному пути */
}
root {
    padding: 0px;
    margin: 0px;
}
#top_navigation_block {
    background: #3e3e3e;
    height: 60px;
    width: 100%;
    position: fixed;
    top:0px;
    left: 0px;
}
#top_navigation_block_inner {
    width: 980px;
    height: 100%;
    margin:0px auto;
}
#top_navigation_links{
    list-style-type:none;
    margin: 0px;
    display: block;
    float: left;
    height: 100%;

}
#top_navigation_links li{
    display:block;
    float: left;
    padding-right: 20px;
    height: 100%;
    background-image:url('images/arrow.png');
    background-repeat:no-repeat;
    background-position: center bottom; /* Положение фона */

}
#top_navigation_links a
{

    font-family: Ubuntu-B;
    font-size: 0.8em;
    text-decoration:none;
    color:#fff;
}
#top_navigation_links a:hover
{
    color:#fff;
}
#enter_register_link {
    display: block;
    float: right;
    padding-top: 20px;
    padding-right: 20px;
}
#enter_register_link a
{
    font-family: Ubuntu-B;
    font-size: 0.8em;
    text-decoration:none;
    color:#fff;
}


	    <div id="top_navigation_block">
		    <div id="top_navigation_block_inner">
			    <ul id="top_navigation_links">
				    <li><a href="#">О ПРОЕКТЕ</a></li>
				    <li><a href="#">ПАРТНЕРАМ</a></li>
				    <li><a href="#">ПОДДЕРЖКА</a></li>
				    <li><a href="#">ЮРИДИЧЕСКАЯ ИНФОРМАЦИЯ</a></li>
				    <li><a href="#">КОНТАКТЫ</a></li>
			    </ul>
			    <div id="enter_register_link">
				    <a href="#">ВХОД/РЕГИСТРАЦИЯ</a>
			    </div>   
		    </div>
	    </div>

не могу теперь никак выравнить ссылки вертикально по центру( как быть?

rash · July 14, 2013

Вы хотите разместить ссылки из меню на одном уровне со ссылкой «Вход/Регистрация»?

У вас сейчас эта ссылка смещена вниз паддингом фиксированно на 20px (то есть, строго говоря, не выровнена вертикально по центру, а смещена туда визуально). Если вас устраивает такое решение, то точно так же можно поступить и со ссылками в меню, только у них родителем будет не #enter_register_link, а #top_navigation_links li — добавьте и им верхний паддинг 20px (и задайте явную высоту, не 100%, а 40px, то есть из высоты блока нужно вычесть этот паддинг). Да, и если у них уже есть float, то display: block не нужен.

Это один из вариантов, думаю, в вашем случае должен устроить.

Zverushka · July 14, 2013

Можно еще line-height: 60px; и само выровняется по центру.

rash · July 14, 2013

Можно, но сам осторожно к этому отношусь, потому что если появятся переносы — начнется кошмар.

imissyouso · July 14, 2013

спасибо. А как обойтись без паддингов? Чтобы ссылки сами выровнялись по центру?

то есть как выравнить строчный элемент внутри блочного по центру? Верно?

rash · July 14, 2013

Если поддерживаемые версии браузеров позволяют — display: table-cell и vertical-align: middle самый элегантный способ, но если не позволяют — лучше, мне кажется, где-нибудь что-нибудь упростить.

Ну и если переносов заведомо не будет — можно line-height установить. Только опять же разные шрифты могут при этом выглядеть немного смещенными вертикально, поэтому я обычно в таких случаях ставлю line-height немного меньше необходимой высоты блока, а потом компенсирую верхним-нижним паддингом «на глаз». Не универсально.

imissyouso · July 14, 2013

спасибо rash. Спокойной ночи, завтра продолжу.

ps это можно удалить

Sign In

Съезжает блок внутри div c position:fixed

Question

Link to comment

Share on other sites

10 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

Join the conversation

Обсуждения

Important Information