Для начинающих

Типовые вопросы по вёрстке


ℹ️ Прочитай — Как получить качественный и быстрый ответ на свой вопрос?

Придерживайтесь, пожалуйста, рекомендаций при открытии новой темы, — тем самым Вы существенно увеличите шансы получить качественный ответ в ближайшее время.

Именование
Имя темы — это краткое описание проблемы, позволяющее понять о чём идет речь в теме без её чтения.
Пример как правильно назвать тему: "Текст в блоке вертикально по центру", "При наведении на картинку отобразить список".
Пример как не правильно называть тему: "Подскажите начинающему", "Подскажите как сделать", "Что не так?"

Описание задачи
Содержимое темы — полное описание проблемы. Ожидается что содержимое составлено для участника сообщества, который никогда не видел Ваш код, но имеет опыт, позволяющий помочь в её решении. В большинстве случаев достаточно описания проблемы, скриншот и ссылку на код, в котором присутствует ошибка.

ℹ️ Рекомендуем прочитать тему —  "Помогите мне с ..." — Как правильно оформить вопрос/проблему перед публикацией, это повысит Ваши шансы получить ответ.

Оформление
Оформление темы — это визуальное форматирование её содержимого, согласно типа данных. Пользуйтесь редактором, так как он позволит пару кликов преобразить тему и поднять её читабельность. Бесспорно, этот приём благоприятно скажется на отношение читателя вашей темы к ней. На пример: для html/css/JavaScript/php кода используйте кнопку редактора code_24.png, а для длинного текста или кода используйте спойлер spoiler_24.png

Картинки
Делайте скриншоты и обозначайте свою проблему. Для скриншотов рекомендуем: Monosnap, ShareX, JingSkitch. В качестве альтернативы используйте хостигни картинок: piccy.infosavepice.ru

Примеры
Выкладывайте свой код в качестве готового примера, используя среду веб-разработки в браузере: jsfiddle.netcodepen.iocssdeck.compastebin.com. Результат вставляйте как iframe. Это позволит сразу увидеть результат и код, легче и быстрей понять как работает код и в чём проблема.

Спасибо за Ваше внимание и понимание ?

С уважением, команда HTMLforum.io

Subforums

  1. Макеты для вёрстки

    Макеты и задания для самостоятельной работы

    931
    posts
  2. Обсуждение работ

    Аудит Вашего кода: указываем на ошибки, даём рекомендации по улучшению качества кода

    29,894
    posts

29,039 topics in this forum

    • 114 replies
    • 33,441 views
    • 153 replies
    • 57,679 views
    • 19 replies
    • 21,145 views
  1. ЧаВО

    • 8 replies
    • 34,826 views
  2. 408 Request Timeout

    • 0 replies
    • 8 views
    • 2 replies
    • 42 views
  3. Как правильно указать путь к файлу?

    • 1 reply
    • 42 views
    • 10 replies
    • 278 views
  4. неровный flex

    • 2 replies
    • 59 views
    • 2 replies
    • 70 views
  5. navbar collapse

    • 0 replies
    • 30 views
    • 0 replies
    • 49 views
    • 3 replies
    • 102 views
    • 1 reply
    • 128 views
    • 2 replies
    • 102 views
    • 8 replies
    • 184 views
    • 0 replies
    • 80 views
    • 0 replies
    • 65 views
    • 13 replies
    • 2,815 views
    • 0 replies
    • 83 views
    • 0 replies
    • 65 views
    • 9 replies
    • 1,243 views
    • 0 replies
    • 106 views
    • 7 replies
    • 203 views
    • 1 reply
    • 143 views
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Если в кратце, проблема возникает из за того что когда заходим на страницу изначально текущий урл страницы
      http://localhost:3004/tablets/tablet_1
      Если мы покликаем по табам (у которых тоже реализован роутинг и к урлу добавляется еще значение)
      То урл будет менять свое значение например на 
      http://localhost:3004/tablets/tablet_1/characteristics
      И вот, допустим у нас сейчас этот урл и если страница перезагрзиться, то реакт будет считать что текущий урл уже
      http://localhost:3004/tablets/tablet_1/characteristics
      а не 
      http://localhost:3004/tablets/tablet_1 как предполагается
      И из за этого возникают проблемы
      Могут быть вот такие страницы 
      localhost:3004/tablets/tablet_1/characteristics/characteristics А так быть не должно. Подскажите как решить такую проблему
      Если подробнее:
      Делаю Интернет-магазин на Реакте (в рамках учебного проекта)
      На данный момент сделал роуты для нескольких страниц 
      [JS]
      <Route path="/" ... /> // главная страница
      <Route path="/tablets"  ... />  // страница категорий
      <Route path="/tablets/:id"  ... /> // детальная страница товара
      [/JS]
      И это все работает хорошо Проблема с роутингом началась когда я начал делать табы на детальной странице товара. Их я тоже хотел сделать через роутинг.
      [JS]
      <Route path="/tablets/:id/characteristics"  ... />
      <Route path="/tablets/:id/opinion"  ... />
      <Route path="/tablets/:id"  ... /> // по дефолту
      [/JS]
      Пути у табов:
      [JS]
      to=`${ текущий урл страницы }/characteristics` // Таб "Характеристки"
      to=`${ текущий урл страницы }/opinion` // Таб Отзывы
      to=`${ текущий урл страницы }` // Таб "Описание" (по дефолту)
      [/JS] http://skrinshoter.ru/s/221019/1f36Q0Gw И это работает исправно, до тех пор пока страница не перезагрузиться.
      Прикол в том, что если мы кликали по табам, урл менялся и допустим стал таким : http://localhost:3004/tablets/tablet_1/characteristics
      И потом вдруг страницу перезагрузили А при перезагрузке страницы текущий адрес получается уже http://localhost:3004/tablets/tablet_1/characteristics     а не   http://localhost:3004/tablets/tablet_1     как задумывалось.     Из-за этого возникают проблемы когда кликаешь по табам:     адрес получается уже      http://localhost:3004/tablets/tablet_1/characteristics/characteristics     http://skrinshoter.ru/s/221019/eTe8ZW5F Вот в этом и проблема. Как такое решить?
      Дело в том что location.pathname я передаю через props дочернему компоненту, он принимает его и в state я добавляю ему
      [JS]`${ this.props.pathName }/characteristics`[/JS]Вот код, как это выглядит:
        class App extends Component {   render() {     <Switch>         <Route path="/" exact={true} component={ CategoriesList }/>       <Route path="/tablets/:id/characteristics"         render={ ({ match, location }) => {           const { id } = match.params;           return <DetailPage itemId={ id } currentTab="characteristics" pathName={ location.pathname } />         }}/>       <Route path="/tablets/:id/opinion"         render={ ({ match, location }) => {           const { id } = match.params;           return <DetailPage itemId={ id } currentTab="opinion" pathName={ location.pathname } />         }}/>       <Route path="/tablets/:id"         render={ ({ match, location }) => {           const { id } = match.params;           return <DetailPage itemId={ id } currentTab="description" pathName={ location.pathname } />         }}/>       <Route path="/tablets"         render={({ location }) =>           <CategoryPage             goodList={goodsList.tablets}             title="Tablets"             location={ location }             exact={true}             />}       />     </Switch>   } } class DetailPage extends Component {   state = {     tabs: {       opinion: {         tabId: 'opinionTab',         tabTitle: 'Отзывы',         tabPathTo: `${ this.props.pathName }/opinion`,         tabContent: 'Контент отзывов'       },       characteristics: {         tabId: 'characteristicsTab',         tabTitle: 'Характеристики',         tabPathTo: `${ this.props.pathName }/characteristics`,         tabContent: 'Контент Характеристик'       },       description: {         tabId: 'descriptionTab',         tabTitle: 'Описание',         tabPathTo: `${ this.props.pathName }`,         tabContent: 'Контент описания'       }     }   };   findCurrentGood(goodsList, itemId) {     for (let key in goodsList) {       goodsList[key].forEach(category => {         if (category.id === itemId) {           this.currentGood = category         }       })     }   }   findCurrentTab() {     for (let key in this.state.tabs) {       if (key === this.props.currentTab) {         this.activeTab = this.state.tabs[key];       }     }   }   render() {     const { goodsList, itemId, currentTab, pathName } = this.props;     const { tabs } = this.state;     this.findCurrentGood(goodsList, itemId);     this.findCurrentTab();               return() {       <div className="tabs">             <div className="tabs__menu">               {                 Object.keys(tabs).map(tab => {                   const tabClass = classNames('tabs__link', {                     'tabs__link--active' : tab === currentTab                   });                   return (                     <Link key={ tabs[tab].tabId }                           to={  tabs[tab].tabPathTo }                           className={ tabClass } >                       { tabs[tab].tabTitle }                     </Link>                   )                 })               }             </div>             <div className="tabs__content">               <h3 className="info__title">{ this.activeTab.tabTitle }</h3>               <div className="info__text">                 { this.activeTab.tabContent }               </div>             </div>           </div>     }   } }  
    • Создали Landing Page на тематику "Межевание земельного участка" Сделано: - С нуля разработана концепция и структура Landing page;
      - Разработан стильный и современный дизайн;
      - Наполнили контентом;
      - Качественная верстка и программирование сайта (быстрая загрузка, чистый, валидный код);
      - Подобрали хостинг и домен для клиента, установили и настроили сайт, установили админку Клиент на выходе получил полностью готовый для работы Landing Page Срок изготовления - 2 недели Если вам нужен качественно представить свою услугу, товары или компанию пишите по контактам ниже, сделаем вам крутой веб-ресурс, будь то Landing Page, Сайт многостраничник, Интернет-магазин.
      По невысокой цене и разумные сроки
      Контакты: Телеграм: @Nikker
      Скайп: smo_perviy
      E-Mail: Golllandec@gmail.com    
    • Здравствуйте. Предоставьте, пожалуйста, ссылку на сайт
  • Popular Contributors