Jump to content
  • Sign Up
  • 0

Проблема с сылками в навигации


Rebel
 Share

Question

Привет от полного новичка в верстке. 

Делаю сайт и возникла небольшая проблема. В навигации html воспринимает код как обычный текст.

Уже много чего перепробовал, но проблема осталась. (Css еще не подключал, а сайт на стадии каркаса) 

<nav>
<а href="index.html">1</а>
<а href="shop.html">2</а>
<а href="text.html">3</а>
<а href="news.html">4</а>
</nav>

 

Edited by Rebel
Link to comment
Share on other sites

2 answers to this question

Recommended Posts

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

    • WNSY
      By WNSY
      Более опытные товарищи, ай нид ё хелп!)
      Имеется выпадающее меню с классом .sub-menu__list. При наведении оно выпадает, но перекрывается блоком .page__main. Для наглядности прикрепляю скрин и код.
      Естественно, нужно, чтобы выпадающее меню было поверх контента следующего блока.
      Подскажите, как это реализовать?
      P.S. Если нужно поиграть с z-index, подскажите в каком классе, т.к. я перепробовал свои варианты - результата не дало.

       
      HTML
      <header class="header"> <div class="header__all _container"> <div class="header__image"> </div> </div> <div class="header__container _container"> <a href="#" class="header__logo"><img src="img/SL-logo.png" alt="SL"></a> <nav class="header__menu menu"> <ul class="menu__list"> <li class="menu__item"> <a href="#" class="menu__link">Главная</a> </li> <li class="menu__item"> <a href="#" class="menu__link">Обучение</a> <ul class="sub-menu__list"> <li class="sub-menu__item"><a href="#" class="sub-menu__link">Направления</a></li> <li class="sub-menu__item"><a href="#" class="sub-menu__link">Стоимость</a></li> <li class="sub-menu__item"><a href="#" class="sub-menu__link">Расписание</a></li> </ul> </li> <li class="menu__item"> <a href="#" class="menu__link">О нас</a> </li> <li class="menu__item"> <a href="#" class="menu__link">Контакты</a> </li> <li class="menu__item"> <a href="#" class="menu__link">Доп.услуги</a> </li> </ul> </nav> <a href="#" class="header__phone"><img src="img/header-phone.png" alt="h-phone"></a> </div> </header> <main class="page"> <div class="page__container _container"> <div class="page__main"></div> CSS
      .header { } .header__all + ._container { position: relative; } .header__image { background: grey; background-size: cover; height: 302px; font-size: 48px; text-align: center; } /*=======================================HEADER-NAV=======================================*/ .header__container { display: flex; min-height: 110px; align-items: center; margin: 15px auto 0 auto; position: absolute; } .header__logo { } .header__menu { margin: 0 0 0 95px; } .menu { } .menu__list { display: flex; } .menu__item { position: relative; } .menu__item:not(:last-child) { margin: 0 68px 0 0; } .menu__link { font-size: 20px; } .header__phone { margin: 0 0 0 175px; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~SUB-MENU~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ .sub-menu__list { display: none; position: absolute; } .sub-menu__item { width: 204px; } .sub-menu__item:first-child { padding: 40px 0 0 0; } .sub-menu__link { font-size: 18px; max-width: 204px; } .sub-menu__item:not(:last-child) { margin: 0 0 22px 0; } .menu__item:hover .sub-menu__list { display: block; } /*=======================================MAIN=======================================*/ .page { } .page__container { } .page__main { background: rgba(203, 32, 218, 0.25); height: 300px; font-size: 48px; text-align: center; }  
    • KatiaBeing
      By KatiaBeing
      Подскажите пожалуйста, как правильно сделать кастомный список стран используя API.
      Вот fetch код:
       
      const countryList = document.querySelector('.form-list.country'); fetch('https://restcountries.com/v3.1/all').then(res => { return res.json(); }).then(data => { let output = ''; data.forEach(country => { output += `<li class="form-item" data-value="${country.name.common}">${country.name.common}</li>`; countryList.innerHTML = output; }); }).catch(err => { console.log(err); }); полный код html, css, js Во втором списке "Country" список формируется, но название страны не поставляется в форму, а атрибут "data-value="" " в инпут ниже. В первом списке "Guests Amount" все ок, т.к. данные прописаны в html. Нужен такой же, но со странами.
      Сразу скажу, с тегом select все работает, но мне нужна стилизованная выпадашка. Заранее спасибо.
    • noob_saibot
      By noob_saibot
      Здравствуйте!
      http://unbrokenteam.ru/
      Как переместить кнопку на ту же вертикальную линию, что и поля для ввода?
      Вот как сейчас
      Вот как должно быть
      Я использую этот класс для кнопки в style.css
      .noTableBorder-button { left: 0; margin-left: 0; transform: none; display: block; } index.html
      style.css
       
    • Ilya983
      By Ilya983
      Помогите сделать минимальную макет с header, footer, LeftMenu, Content, RightMenu на Bootstrap 4-5.
      Ширина LeftMenu + Content + RightMenu аналогична ширине основного блока текущего сайта(htmlforum.io).
      Другими словами не на всю ширину браузера, а по центру. Может для ширины таких элементов имеется какая-то практика?
      LeftMenu - привязано к левому краю контейнера. 
      RightMenu - привязано к правому краю контейнера. 
      Для примера...
      Пробую, всё скачет...
      https://jsfiddle.net/User65659/0jxt7qLg/45/
      Аналог на картинке
       

    • IsayR
      By IsayR
      Всем привет! Подскажите, пожалуйста, как правильно сделать раскрывающиеся блоки со скрытым содержанием внутри? У меня в принципе все работает, блок открывается и закрывается, НО если я нажимаю на блок, а не на стрелочку, она у меня остается в таком же положении(а она должна у меня меняться, когда блок открывается), и получается куча мала, и выглядит это не очень презентабельно. Подскажите, пожалуйста!
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 1 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 1</div> </div> </div> </div> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 2 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 2</div> </div> </div> </div> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 3 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 3</div> </div> </div> </div> .div{ border: 1px solid #3A444E; border-radius: 10px; width: 300px; height: 64px; overflow: hidden; } .div.open { height: auto; background: #000; color: #fff; } .window-one { display: flex; align-items: center; justify-content: space-between; } .title { margin-bottom: 20px; } .arrow-test { content: ''; background: url('http://cdn.onlinewebfonts.com/svg/img_387044.png') no-repeat center center / 100%; width: 30px; height: 30px; cursor: pointer; } .arrow-test.open { content: ''; background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Eo_circle_yellow_arrow-up.svg/1024px-Eo_circle_yellow_arrow-up.svg.png') no-repeat center center / 100%; width: 30px; height: 30px; cursor: pointer; } $('.div, .arrow-test').click( function(){ $(this).toggleClass('open')});  
  • Обсуждения

    • Switch74
      .tabs>input[type="radio"]:checked+label {   background-color: #fff;   border-bottom: 1px solid #fff; } Здесь и делаете стили для изменения нажатого таба если я правильно понял
    • Switch74
      все файлы должны быть в одной папке некоторые ссылки ссылаются на локальный компьютер - этого не должно быть некоторые маленькие картинки грузят очень большие файлы перепутанные ссылки - это скорее всего ваша ошибка
    • Иван Евгеньевич
      Здравствуйте! Уважаемые форумчане! Я начинающий начинать) прошу помощи,  есть макет сайта , хочу чтоб на главной странице были вкладки которые бы переключались по нажатию кнопки. но основной вопрос в том как сделать их разными. пример приведу в фото. Хочу как на фото сделать но незнаю как( а так же код выглядит таким образом      <div class="tabs">              <input type="radio" name="tab-btn" id="tab-btn-1" value="">              <label for="tab-btn-1">Свадьба</label>              <input type="radio" name="tab-btn" id="tab-btn-2" value="">              <label for="tab-btn-2">Мужу</label>              <input type="radio" name="tab-btn" id="tab-btn-3" value="">              <label for="tab-btn-3">Жене</label>              <input type="radio" name="tab-btn" id="tab-btn-4" value="">              <label for="tab-btn-4">Партнеру</label>              <input type="radio" name="tab-btn" id="tab-btn-5" value="">              <label for="tab-btn-5">Коллекции</label>              <input type="radio" name="tab-btn" id="tab-btn-6" value="">              <label for="tab-btn-6">Редкость</label>                            <div id="content-1">                <img src="images/Kolca1.png" alt="Кольца" class="kolca">                <p class="kolca11">Кольца</p>              </div>              <div id="content-2">                Содержимое 2              </div>              <div id="content-3">                Содержимое 3              </div>              <div id="content-4">                Содержимое 4              </div>              <div id="content-5">                Содержимое 5              </div>              <div id="content-6">                Содержимое 6              </div>     </div>   CSS code .tabs {   top: 1100px;   position: absolute;   left: 600px;   font-size: 50px; } .tabs>input[type="radio"] {   display: none; }   .tabs>div {   /* скрыть контент по умолчанию */   display: none;   border: 1px solid #e0e0e0;   padding: 10px 15px;   font-size: 16px; }   /* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */ #tab-btn-1:checked~#content-1, #tab-btn-2:checked~#content-2, #tab-btn-3:checked~#content-3, #tab-btn-4:checked~#content-4, #tab-btn-5:checked~#content-5, #tab-btn-6:checked~#content-6{   display: block; }   .tabs>label {   display: inline-block;   text-align: center;   vertical-align: middle;   user-select: none;   background-color: #f5f5f5;   border: 1px solid #e0e0e0;   padding: 2px 8px;   font-size: 16px;   line-height: 1.5;   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;   cursor: pointer;   position: relative;   top: 1px;     font-family: 'Gilroy';   font-style: normal;   font-weight: 500;   font-size: 18px;   line-height: 21px;   text-align: center;   letter-spacing: 0.1em;   text-transform: uppercase; }   .tabs>label:not(:first-of-type) {   border-left: none; }   .tabs>input[type="radio"]:checked+label {   background-color: #fff;   border-bottom: 1px solid #fff; }  
    • Наташа
      Сегодня index.html неожиданно начал загружаться, но некорректно. Ссылки на веб-страницы не работают, но я думаю, что я сама указала неправильный путь к файлам, сегодня буду это исправлять. Ещё почему-то отображаются не все иллюстрации, а те что отображаются - все перепутаны. Пробовала открывать иллюстрации на самом сервере, но и там почему-то название картинки одно, а картинка совсем другая. Адрес сайта http://j90365fr.beget.tech/  
    • Switch74
      адрес сайта можно по какому адресу грузится css?  
×
×
  • 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