выравнивание контента резиновой шапки по ширине.

width
margin

Asked by stupidtrue,
September 27, 2013

Followers 0

Question

stupidtrue
Newbie
- 8
Posted September 27, 2013
Мужчина
kiev

stupidtrue

Posted September 27, 2013

- Report
- Share

Posted September 27, 2013 (edited)

много гуглил но так и не нашел годного ответа на свой вопрос

подскажите пожалуйста.

есть шапка


<header>
<a></a>
<div></div>
<nav></nav>
</header>

и css


header {
height:300px;
}

Нужно что бы шапка растягивалась по всей ширине, но контент в ней(a, div, nav) выравнивался по горизонтали по центру.

Стандартный:

margin: 0 auto;

не действует, если не задано width.

Как выровнять весь контент шапки по центру?

Edited September 27, 2013 by stupidtrue

Quote

Link to comment

Share on other sites

3 answers to this question

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.

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.

Insert image from URL

Followers 0

Go to question listing

Similar Content
- Container в Bootstrap
  By Marri.nich
  
  Всем привет) Самостоятельно обучаюсь верстке. Сейчас изучаю Bootstrap и столкнулась с такой проблемой:
  <header> <nav> <div class="container"> <ul class="menu"> <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li> ... <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li> </ul> </div> </nav> </header> Использую в верстке стандартный контейнер из Bootstrap'а. Его стили не трогаю.
  Сейчас корплю над адаптивностью сайта и при изменении размера устройства (в консоли разработчика) на 768px шапка вылезает за пределы экрана.
  Как удалось выяснить header принимает требуемое значение width: 768px, а вот nav упорно занимает 993px и они тянутся от container'а (он согласно стилям Bootstrap'а имеет max-width: 720px, но его margin-left и margin-right почему-то принимают значение 136,50px.
  Дополнение: тегу nav в стилях задан width: 100%.
  Вопрос:
  1. Правильно ли я понимаю, что cтандартный контейнер из Bootstrap'а должен был в данном примере рассчитаться так: width=max-width=720px, margin-left=margin-right=(768px-720px-12pxpadding-left-12pxpadding-right)/2=12px?
  2. Почему margin'ы работают не так как я ожидаю?)
  Если я что-то неясно или не совсем корректно изложила прошу понять и простить :)))
  Спасибо за ответы.
- Размещение фоновой картинки, заключенной в div, на всю ширину вьюпорта
  By Алеся
  
  Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает.
  <div class="banner">
        <div class="container background-image">
        <div class="banner_text"></div>
        </div>
      </div>
  CSS:
  .background-image {
    background-image: url('/img/new_oranges.jpg');
    background-size: cover;
    height: 200px;
  }
- Выравнивание блоков/элементов
  By Nerwoid
  
  Ребят всем привет! Я только начал изучать верстку по видео урокам на ютубе. У меня есть свой макет который я купил у дизайнера. Решил с него поучиться верстать. Подскажите как правильно сделать шапку сайта. У меня все выравнивания происходят с помощь отрицательных "margin". Судя по урокам, везде делают это с помощью flex и тому подобное. Дизайн очень оказался сложным и там много проблем с фонами. Дайте пару советов и подсказок как продолжать дальше. Заранее спасибо ?
  
  Вот: макет:
  Мой сайт
- Спозиционировать элемент в нужное место по горизонтали, не выводя из потока
  By Launder
  
  Вот кот. Предполагается, что элемент не выводится из потока (по крайней мере, нужно чтоб он взаимодействовал в "строке" с другими элементами, предполагается, что за block-center могут также находится элементы). Загвоздка следующая: левый блок (block-1) имеет минимальный размер в пикселях(150px) и натуральный размер в rem (15rem, при том, что 1rem = 10px). Хочется оставить пользователю возможность менять в браузере размер шрифта, при этом положение левого края второго элемента (block-center) должно оставаться посередине (или в ином заданном месте).
  Для второго элемента указано свойство:
  padding-left: calc(50% - 15rem); /* тут может быть и 150px*/ При использовании rem во-второй части выражения, элемент уходит вправо, при маленьком шрифте (отнимается меньше - отступ больше),
  если в выражении использовать пиксели, то элемент уйдёт вправо при большом шрифте (просто левый элемент увеличится).
  И в том, и в другом случае, для компенсации сдвига вправо, нужно сдвинуть элемент ВЛЕВО. Но сдвинуть не абсолютно, а при условии. Основные инструменты для сдвигов: марджины паддиги и бордеры прилежащих сторон элементов block-1 и block-center... Можно было бы как-то изловчится с паддингами (что-то вроде 15rem - 150px, положительное значение будет только при значении браузерного шрифта большего, чем по-умолчанию, значит только тогда он и начнёт работать), но паддинг может сдвинуть только вправо. Марджин может сдвинуть и туда и туда, но он безусловен, то есть, не может в одном случае сдвигать, а в другом - не сдвигать.
  Была идея как-то сделать, чтоб паддинг и марджин взаимно компенсировали друг друга, когда нам надо, а когда не нужно паддинг, стал меньше нуля, и исчез, но на практике мне не удалось это реализовать.
  В случае, когда отнимаем rem (в указанном выше коде), при нулевом font-size отступ максимален. Соответственно, сдвиг влево должен быть максимален и равняться ширине элемента block-1 в пикселях. Допустим ставим элементу block-center отрицательный левый марджин (или отрицательный правый марджин ставим block-1), сдвигая block-center на нужную величину, а, чтоб при увеличении шрифта отступ уменьшался, пишем block-1 {margin-right: calc(15rem - 150px)}, что при маленьких шрифтах будет сдвигать блок block-center влево, но при больших будет сдвигать вправо и как это компенсировать - не понятно.
  В случае, когда отнимаем px, при маленьких шрифтах всё хорошо, поскольку и block-1, и отступ - нужных размеров, но когда шрифт увеличивается, элемент block-1 увеличивается, а расстояние между блоками block-1 и block-center остаётся таким же, и опять-таки нужно каким-то образом компенсировать, а любой марджин - будет действовать в обе стороны, а паддинг - в одну, но только вправо, а мне нужно налево.
  В общем, не оставляют меня мысли, что тут можно применить какую-то хитрость и скомпенсировать увеличение отступа, при изменении шрифта, но что-то, как не изгаляюсь, паддинг сдвигает не туда, марджин сдвигает не только туда, но и не туда, при этом паддинг это "не туда" скомпенсировать не может, поскольку сам вылезает туда же, в "не туда"...
  Каким образом приручить эти элементы?
- Проблема в адаптивной верстке
  By Masya
  
  Здравствуйте, я новичок в сайтостроении и у меня возникла одна проблема при адаптации страницы, она состоит в том ,что в max-width ,при заданной ширине, не хочет работать изменение отступов (padding и margin), хотя flex-direction: column; работает. Жуткое ощущение глупой ошибки ,которую не могу найти. Заранее спасибо за помощь.
  Ниже HTML и CSS код:
  <header>
             <div class="header">
                 <div class="wrap">
                     <div class="logo header_left">
                         <a href="#">
                             <img src="images/logo.png" alt="Логотип">
                         </a>
                     </div>
                     <div class="header_right">
                         <div id="topmenu">
                             <p>
                                 <a href="#">About</a>
                                 <span>/</span>
                                 <a href="#">Blog</a>
                                 <span>/</span>
                                 <a href="#">Contact</a>
                                 <span>/</span>
                             </p>
                         </div>
                         <div id="social">
                             <a class="twitter" href="#"></a>
                             <a class="vimeo" href="#"></a>
                             <a class="facebook" href="#"></a>
                             <a class="instagram" href="#"></a>
                             <a class="dribbble" href="#"></a>
                             <a class="reddit" href="#"></a>
                         </div>
                     </div>
                 </div>
             </div>
         </header>
  ——————————————————————————————————————————————————--
  #container {
     margin: 0 auto;
  }
  #container .header {
     border-bottom: 1px solid #bfbfbf;
     box-shadow: 0 0 3px #dbdbdb;
     padding-top: 6px;
  }
  #container .header .wrap {
     display: flex;
     justify-content: space-between;
     padding: 0;
  }
  @media (max-width: 650px) {
  .header .wrap {
  flex-direction: column;
  padding: 0 3px;
  margin-bottom: 5px;
  }
  
  .header #socials {
  margin-left: 5px;
  }
  
  .header #socials a:last-child {
  margin-right: 2px;;
  }
  }
  #container .header .header_left {
     align-self: center;
  }
  #container .header .header_right {
     display: flex;
     justify-content: space-between;
  }
  #container #topmenu {
     color: #8e8e8e;
     padding-top: 6px;
  }
  #container #topmenu a {
     color: #8e8e8e;
     text-decoration: none;
  }
  #container #topmenu a:hover {
     color: #dd5555;
  }
  #container #social {
     display: flex;
     margin-left: 20px;
     margin-right: 50px;
  }
  #social a {
     margin-top: 9px;
     margin: 8px 10px;
  
  }
  .twitter {
     background: url("../images/twitter_un.png") no-repeat;
     height: 11px;
     width: 13px;
     cursor: pointer;
  }
  .twitter:hover {
     background: url("../images/twitter.png") no-repeat;
     height: 11px;
     width: 13px;
  }
  .dribbble {
     background: url("../images/dribbble_un.png") no-repeat;
     height: 13px;
     width: 13px;
     cursor: pointer;
  }
  .dribbble:hover {
     background: url("../images/dribbble.png") no-repeat;
     height: 13px;
     width: 13px;
  }
  .vimeo {
     background: url("../images/vimeo_un.png") no-repeat;
     height: 12px;
     width: 13px;
     cursor: pointer;
  }
  .vimeo:hover {
     background: url("../images/vimeo.png") no-repeat;
     height: 12px;
     width: 13px;
  }
  .facebook {
     background: url("../images/facebook_un.png") no-repeat;
     height: 13px;
     width: 7px;
     cursor: pointer;
  }
  .facebook:hover {
     background: url("../images/facebook.png") no-repeat;
     height: 13px;
     width: 7px;
  }
  .instagram {
     background: url("../images/instagram_un.png") no-repeat;
     height: 12px;
     width: 12px;
     cursor: pointer;
  }
  .instagram:hover {
     background: url("../images/instagram.png") no-repeat;
     height: 12px;
     width: 12px;
  }
  .reddit {
     background: url("../images/reddit_un.png") no-repeat;
     height: 11px;
     width: 13px;
     cursor: pointer;
  }
  .reddit:hover {
     background: url("../images/reddit.png") no-repeat;
     height: 11px;
     width: 13px;
  }

Обсуждения
- Вёрстка футера на движке Xenforo
  
  By Mondeus · Posted November 13, 2023
  
  Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }
- Примеры верстки
  
  By torsar · Posted November 3, 2023
  
  Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
- Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?
  
  By Katerina23 · Posted October 25, 2023
  
  Да, подходит. Спасибо.
- Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?
  
  By Switch74 · Posted October 25, 2023
  
  <input type="number">
- Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?
  
  By Katerina23 · Posted October 25, 2023
  
  Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.

Sign In

выравнивание контента резиновой шапки по ширине.

Question

stupidtrue

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

mrnobody

Link to comment

Share on other sites

stupidtrue

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information