Jump to content
  • 0

Вложение div блоков в основном контенте


Tascan
 Share

Question

Всем привет.
Может кто сможет помочь в данном вопросе.
Изучаю в данный момент связку HTML и CSS, и появились два вопроса.

1) Иногда изучая какой-нибудь сайт или пытаясь по образцу переписать какой-нибудь макет, вижу примерно такой код:

<div id="wrapper">
       <div id="main">
               <div id="sidebar"></div>
                <div id="content"></div>
       </div>
</div>

Вот мне и стало интересно, зачем внутрь одного блока (wrapper) вставлять ещё один блок-обёртку (main) для содержимого страницы.
Ведь у двух этих родительских блоков одинаковая ширина и высота. Почему нельзя навигацию и основной контент размещать сразу в первом div-блоке?

2) Если я скачиваю готовый макет, открываю его в браузере и пытаюсь сделать этот макет сам, то тут всё понятно: сделал, сравнил, недочёты исправил и запомнил на будущее. 
А вот если я, например, пытаюсь сверстать сайт из PSD картинки, то как я в итоге могу проверить, правильно я сделал или нет?
Ведь визуально всё может быть правильно, но в коде может быть фатальная ошибка, которая напомнит о себе в будущем. И если уж выбирать, то как лучше вначале: по PSD пытаться построить макет или скачивать готовый, и так подглядывая иногда, пытаться сделать самому?

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

1) задачи разные бывают, такая структура может выполнять разные задачи, на первый взгляд не видимые

2) к psd, в реальных задачах, прилагается ТЗ, в котором описано как должен сайт работать.

Link to comment
Share on other sites

  • 1

По первому вопросу, возможно такая разметка сделана для прижатия футера к низу страницы при маленькой высоте содержимого.

После блока #wrapper должен идти блок #footer.

Если заинтересовало, то можете поискать по запросу "sticky footer".

Link to comment
Share on other sites

  • 0
6 часов назад, mrnobody сказал:

По первому вопросу, возможно такая разметка сделана для прижатия футера к низу страницы при маленькой высоте содержимого.

После блока #wrapper должен идти блок #footer.

Если заинтересовало, то можете поискать по запросу "sticky footer".

Спасибо большое, обязательно найду и прочитаю)

 

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

  • Обсуждения

    • Вот тут есть актуальный список бесплатных тестов с сертификацией https://www.classcentral.com/report/free-certificates/ Обратите внимание на HackerRank, там есть тест с сертификацией непосредственно по CSS
    • Нужно сверстать по картинке меню-бар. Не получается сделать вот это поле поиска <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style> .nav {     display: flex;     list-style-type: none;     padding-left: 0;     font-size: 17px;     text-transform: uppercase; } .nav > li > a {     color: #fff;     text-decoration: none; } .nav > li {     padding-left: 29px;     margin-left: 30px; } .header {     display: flex;     background-color: #31485b;     justify-content: space-between;     align-items: center; }   .sidebar {     width: 410px;     display: block;     padding-right: 20px;     margin: auto;     margin-left: 250px; }   ul.nav li a:hover {     background-color: #687c8d;     padding: 17.2px 35px; }   input[type="text"], input[type="search"] {   background-color: #687c8d;   width: 60%;   padding: 8px;   margin: 0 50px }   input[type="search"] {     color: #31485b;     font-style: italic; }     </style> </head> <body>     <div class="header">                 <ul class="nav">                     <li class="s1"><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 class="sidebar">                     <form method="post" action="#" id="search_form" >                       <input type="search" name="search_field" placeholder="Поиск" />                     </form>                   </div>     </div> </body> </html>  
    • ЭЭ, а почему оно должно удалять? Может стоило повесить событие на эту кнопку и указать, что при это должно происходить?
    • например -R не будет качать указанные файлы если вы знаете список нужных вам файлов, проще их указать или можно написать парсер
    • выкладывайте код в песочнице, так будет проще У вас media подключается до blocks/header, по этому правила из blocks/header перекрывают media сверху вниз в css пишите tag .class ... @media и не будет у вас подобных проблем  
×
×
  • 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