Jump to content
  • 0

Адаптивная шапка


MadSandwich
 Share

Question

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

Код самой шапки:

<headr class="page-header">
    <div class="logo">
        <img src="/img/11111.png">
    </div>
    <div class="nav-contact">
    <ul class="contact-nav">
                        <li><a href="/catalog.php">Каталог</a></li>
                        <li><a href="/about">О компании</a></li>
                        <li><a href="/dostavka">Доставка и оплата</a></li>
                        <li><a href="#download">Отзывы</a></li>
                        <li><a href="/contact.php">Контакты</a></li>
    </ul>
    </div>
    <div class="telefon">
                    <ul class="member-actions">
                        <li><h4>+375 (29) </h4></li>
                        <li><h4>+375 (33) ***-**-**</h4></li>
                        <li><h4>+375 (25) </h4></li>
                   </ul>    
    </div>
    <div class="telefon-gor">
                    <ul class="member-actions">
                        <li><h4>+375 (17) ***-**-**</h4></li>
                   </ul>    
    </div>            
</headr>

Стили относящиеся к данной шапке:

Скрытый текст

/* Header */

* { padding: 0; margin: 0; }

headr.page-header {

    left: 50px;

    content: '';

    display: inline-block;

    width: 100%;

    min-height: 20px;

    color: white;

    background: transparent;

}

 

.background {

padding: 0;

margin: 0;

  min-height: 450px;

  background: url("../img/hero.jpg") center center;

  background-size: cover;

  position: relative; }

}

 

.logo {

    margin: 0;

    position: fixed;

    left: 100px;

}

.telefon {

    position:relative;

    left: 850px;

    top: -80px;

    display: outline;

}

.telefon-gor {

    position:relative;

    left: 1050px;

    top:  -145px;

    display: inline;

}

.nav-contact {

    position: absolute;

    margin: 0;

    padding: 20px;

}

  headr .header-nav {

    display: inline-block; }

     

  headr ul.contact-nav {

    margin: 0 0 0 75px;

    padding: 0; }

    headr ul.contact-nav li {

    display: inline-block;

    position: relative;

    font-size: 13pt;

    top: -60px;

    left: 120px;

      }

      headr ul.contact-nav li a {

        color: #fff;

        padding-right: 25px; }

        headr ul.contact-nav li a:hover {

          color: #FF5274; }

      headr ul.contact-nav li:last-child a {

        padding-right: 0px; }

И если не помогло, все что я тут написал, может ссылка на сайт поможет?
Огромное спасибо всем, кто откликнется.

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 1

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

  • Like 1
Link to comment
Share on other sites

  • 1
<ul class="nav navbar-nav">
                                <li><a href="/catalog.php">Каталог</a></li>
                                <li><a href="/about.php">О компании</a></li>
                                <li><a href="/company.php">Доставка и оплата</a></li>
                                <li><a href="/contact.php">Контакты</a></li>
    							<li><h4>+375 (29) ***-**-** </h4></li>
  								<li><h4>+375 (33) ***-**-** </h4></li>
  								<li><h4>+375 (25) ***-**-** </h4></li>
  								<li><h4>+375 (17) ***-**-**</h4></li>
</ul>

Бегло просмотрел. Создали несколько списков class="nav navbar-nav", хотя все относится к одному меню,нет смысла создавать несколько. в бутстрапе есть два класса, которыми можно прижать элементы к правому краю :

1. pull-right - все равно что float:right, т.е. весь блок поедет вправо,

2. text-right - все равно что text-align: right; но тут надо чтобы элемент, который надо выровнять, был строчным или inline-block

Link to comment
Share on other sites

  • 0

картинки выложите, чтобы понятнее было

P.S. Увидел ссылку на сайт

Вот смотрите

headr ul.contact-nav li {
    display: inline-block;
    position: relative;
    font-size: 13pt;
    top: -60px;
    left: 120px;
}

Если убрать top: -60px; left: 120px; то шапка станет на место. Еще здесь маргин можно уменьшить. Вообще,если резиновый макет, то для левой/правой стороны лучше задавать в % маргины и паддинги. И в целом лучше не писать селекторы с тегами, лучше так ".class" чем так "tag.class"

.page-header {
 margin: 60px 0 50px 50px;
}

 

И еще, не стоит увлекаться позиционированием. У вас его слишком много. Например зачем тут абсолютное позиционирование? Это просто меню, здесь можно обойтись и без него.

.nav-contact {
    position: absolute;
    margin: 0;
    padding: 20px;
}

 

Edited by WhatIsHTML
Link to comment
Share on other sites

  • 0

Спасибо, что откликнулись, но после внесенных изменений у меня в браузере шапка сайта поехала, но уже некоторые части ее стали резиновыми.

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

ec396a7cbdb0t.jpg

p.s. извините забыл на какие хостинги нужно загружать картинки, загрузил на радикал.

p.s.s. картинка кликабельна, увеличивается при клике.

Edited by MadSandwich
Link to comment
Share on other sites

  • 0

Через бутстрап, получается отличная шапка, спасибо. Вот только есть один нюансик, я не силен в редактировании бутстрапа, меня пугает его код)

Если не сочтете за наглость помогите поставить номера телефонов справа и так же их отобразить списком. Я попытался изобразить свои мысли в пэинте)

Страница сайта, на которой я работаю с шапкой на бутсрапе.

Screenshot_2.png

Link to comment
Share on other sites

  • 0

Да они теперь отображаются справа, использовал класс pull-right, спасибо помогло. И теперь осталось только сделать номер который один, чтобы он был по центру тех 3 номеров. Как пример вот картинка, того что я хотел бы добиться.

ebb4ca0b682e.png

Link to comment
Share on other sites

  • 0

Этот пример - быстрое упражнение, чтобы проиллюстрировать, как работают стандартная, статическая панель навигации и фиксированная верхняя панель навигации. Включает в себя отзывчивый CSS и HTML

https://www.welookups.com/bootstrap/bootstrap_navbar.html

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

  • Similar Content

    • By Seendorei
      Здравствуйте уважаемые форумчане, подскажите пожалуйста, не получается сделать блок адаптивным(я в этом не очень разбираюсь =)) ). Уже голова кипит, все попереисправлял, переделал, удалял и добавлял, что просто запутался, очень прошу вас распутать и подсказать как правильно, чтобы я точно знал :). Спасибо заранее.
      В чем собственно проблема: А в том, что этот блок не уменьшается пропорционально ширине экрана.
      На 1 скриншоте он вообще выпадает из общего контента. А на 2 скриншоте появляется горизонтальная прокрутка.
      Пересмотрел много роликов и статей, но чет так сильно запутался во всем этом :((.

      CSS code блока и т.д: 
       
      @media (max-width: 320px) {   .wat{     left: 260px;   } } .wat{   margin:0;   margin-left: 5.5em;   left: auto;   top: 260px;   border: 3px red solid;   border-radius: 3px;   width: 150px; height: 50px;   position: relative;   padding-left: 4px;   padding-top: 0px;   display: block; } #btn3{   position: absolute;   margin-left: 8px;   top: 13px;   border: 3px red solid;   border-radius: 3px;   width: 150px; height: 50px; } span{   font-size: 16pt;   margin-left: 50px;   position: absolute;   top: 14px;   left: -1px;   font-size: 16pt;   color: white; } .opa{   display: block;   border-radius: 3px;   border: 3px red solid;   width: 150px; height: 50px;   position: relative;   z-index: 100000;   margin-top: -12.8em;   margin-left: 18.5em; } @media (max-width: 320px){   .opa{     width: 25%;     height: auto;   } } Вот HTML Код:
      <ul id="slides"> <li class="slide showing">Slide 1 <!--<div class='wat'><img id='btn3' src='app2.png'></img></div>--> </li> <li class="slide">Slide 2</li> <li class="slide">Slide 3</li> </ul> <div class='opa'> <img src='app.svg'></img> <span>App Store</span> </div>  
       
              
    • By ilya.pokrov
      Добрый день.

      Появилась следующая проблема:
      При отображении сайта в любых браузерах - все работает корректно, кроме Google Chrome. Съезжает шапка сайта, а точнее то, что в css указывал позиционировать справа - располагается в левой части и закрывает логотип.

      Ну уж очень меня это напрягает. Не пойму, что нужно делать.

      Кто сталкивался с такой же проблемой?

      Сайт - ganzola.ru

      Заранее спасибо.
    • By Takono
      Здравствуйте. Создан слайдер из трёх слайдов. На слое над слайдером с помощью :before создан контент (один блок, содержащий текст, меню со ссылками и форму). Однако при адаптации под разные разрешения всё очень сильно съезжает и искажается. Есть ли какой-то более рациональный способ разместить слой с контентом над слайдером, чтобы слайды переключались под недвижимым контентом? Подскажите пожалуйста.
      id="main" это блок, который находится в слое над id="slider"
       
      index.html
      style.css
    • By Михаил HTML
      Всем доброго дня.
      Ищу помощника или наставник в создании небольшого сайта.
      С данного момента погружаюсь в тему изучения верстки.
      Мой максимум это HTML i CSS.
      Сайт будет представлять из себя небольшую записную книжку( не часто используемую). Пока без картинок, просто текст.

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

      //Движки и блоги использовать не хочу, это сложно для меня. Написал текст, вставил его в стандартную страницу htmlя и написал ссылку на главной станице сайта, вот все что мне нужно.


    • By начинающий верстаг
      дайте оценку хотя бы по 5 ти бальной шкале portfoliox.ru/test
×
×
  • 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