1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

[Помогите] 1) всплывающее меню на :hover 2) footer не реагирут на content

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Иван2504, 1 дек 2017.

  1. Иван2504

    Иван2504

    Регистрация:
    1 дек 2017
    Сообщения:
    3
    Симпатии:
    0
    День добрый!
    Ребят выручайте! Не пойму в чем дело.
    Во-первых не получается прописать всплывающее меню с помощью псевдокласса :hover.
    И во-вторых не могу понять почему fotter не реагирует на дивку с классом wrapper и content.
    Менял position:absolut; на relative не помогало.
    Хотя я так понимаю, абсолютно спозиционированные дивы должны реагировать на соседа с таким же позиционированием, а точнее с любым позиционированием кроме static.

    Задача сверстать работающий шаблон с помощью position.
    Разумеется в данных вопросах пока далеко не спец. Поэтому не судите строго.
    Код привожу ниже, если будут замечания то пишите!
    Заранее благодарен!!!
    <!DOCTYPE html>

    <html lang="ru">

    <head>
    <meta charset="UTF-8">
    <title>Верстка с помощью позиционирования</title>
    <link rel="shortcut icon" type="image/png" href="images/1-3.png" />
    <link rel="stylesheet" type="text/css"; href="style.css">
    </head>

    <body>

    <div class="header">

    <div class="contacts">
    <ul>
    <li>
    <a href="">тел. 8-926-9888-346</a>
    </li>

    <li>
    <a href="">[email protected]</a>
    </li>

    <li>
    <a href="">Режим работы.<br>
    пн-пт с 10:00 до 18:00</a>
    </li>

    </ul>
    </div>

    <div class="logo">
    <a href=""><img src="images/1(1).png" alt="Mega-toner.ru" title="Mega-toner.ru" width="60%"></a>
    <h2>Продажа оригинальных<br> картриджей<br> для принтеров.</h2>
    </div>

    <div class="contacts-form">

    <h2>Онлайн заявка</h2>
    <form id="contact" action="#" method="post" name="contact">
    <input id="name" class="txt" name="name" type="name" placeholder="Ваше имя" />
    <input id="phone" class="txt" name="phone" type="phone" placeholder="Ваш телефон" />
    <input id="email" class="txt" name="email" type="email" placeholder="Ваш e-mail" />
    <textarea id="msg" class="txtarea" name="msg" placeholder="Ваше сообщение:"></textarea><br>
    <button id="send">Отправить</button>
    </form>

    </div>


    </div>


    <div class="wrapper">

    <div class="nav">
    <ul class="main-menu main-menu1">
    <a href=""><li><img src="" class="main-menu-img menu-img">Каталог</li></a>
    <ul class="main-menu main-menu2">

    <li>Оригинальные картриджи</li>

    <ul class="main-menu main-menu3 orig">
    <li>Hewlett-Packard</li>
    <li>Canon</li>
    <li>Xerox</li>
    <li>Kyocera</li>
    <li>Samsung</li>
    <li>Epson</li>
    <li>Brother</li>
    <li>Panasonic</li>
    <li>Lexmark</li>
    <li>Ricoh</li>
    <li>Oki</li>
    <li>Konica Minolta</li>
    <li>Sharp</li>
    <li>Toshiba</li>
    </ul>
    </ul>

    <ul class="main-menu main-menu2">

    <li>Совместимые картриджи</li>
    <ul class="main-menu main-menu3 sovm">

    <li>Hewlett-Packard</li>
    <li>Canon</li>
    <li>Xerox</li>
    <li>Kyocera</li>
    <li>Samsung</li>
    <li>Epson</li>
    <li>Brother</li>
    <li>Panasonic</li>
    <li>Lexmark</li>
    <li>Ricoh</li>
    <li>Oki</li>
    <li>Konica Minolta</li>
    <li>Sharp</li>
    <li>Toshiba</li>
    </ul>
    </ul>
    <a href=""><li><img src="" class="main-menu-img menu-img">Производители</li></a>
    <ul class="main-menu main-menu2 maker">
    <li>Hewlett-Packard</li>
    <li>Canon</li>
    <li>Xerox</li>
    <li>Kyocera</li>
    <li>Samsung</li>
    <li>Epson</li>
    <li>Brother</li>
    <li>Panasonic</li>
    <li>Lexmark</li>
    <li>Ricoh</li>
    <li>Oki</li>
    <li>Konica Minolta</li>
    <li>Sharp</li>
    <li>Toshiba</li>
    </ul>
    <li><a href=""><img src="" class="main-menu-img menu-img">О нас</a></li>
    <li><a href=""><img src="" class="main-menu-img menu-img">Как заказать</a></li>
    <li><a href=""><img src="" class="main-menu-img menu-img">Оплата</a></li>
    <li><a href=""><img src="" class="main-menu-img menu-img">Акции</a></li>
    </ul>
    </div>

    <div class="content">
    <div class="content-1">
    <h1>Сайт находится в разработке</h1>
    <p>В настоящее время сайт находится в разработке, все интересующие Вас вопросы Вы можете задать по указанным выше контактам или с помощью формы обратной связи в правом верхнем углу сайта.</p>
    <p>Вы можете скачать наш прайс лист <a href="">Оригинальные картриджи</a> или <a href="">Совместимые картриджи</a> для принтеров.</p>
    <p>В настоящее время сайт находится в разработке, все интересующие Вас вопросы Вы можете задать по указанным выше контактам или с помощью формы обратной связи в правом верхнем углу сайта.</p>
    <p>Вы можете скачать наш прайс лист <a href="">Оригинальные картриджи</a> или <a href="">Совместимые картриджи</a> для принтеров.</p>
    <p>В настоящее время сайт находится в разработке, все интересующие Вас вопросы Вы можете задать по указанным выше контактам или с помощью формы обратной связи в правом верхнем углу сайта.</p>
    <p>Вы можете скачать наш прайс лист <a href="">Оригинальные картриджи</a> или <a href="">Совместимые картриджи</a> для принтеров.</p>
    <p>В настоящее время сайт находится в разработке, все интересующие Вас вопросы Вы можете задать по указанным выше контактам или с помощью формы обратной связи в правом верхнем углу сайта.</p>
    <p>Вы можете скачать наш прайс лист <a href="">Оригинальные картриджи</a> или <a href="">Совместимые картриджи</a> для принтеров.</p>
    <p>В настоящее время сайт находится в разработке, все интересующие Вас вопросы Вы можете задать по указанным выше контактам или с помощью формы обратной связи в правом верхнем углу сайта.</p>
    <p>Вы можете скачать наш прайс лист <a href="">Оригинальные картриджи</a> или <a href="">Совместимые картриджи</a> для принтеров.</p>
    <p>В настоящее время сайт находится в разработке, все интересующие Вас вопросы Вы можете задать по указанным выше контактам или с помощью формы обратной связи в правом верхнем углу сайта.</p>
    <p>Вы можете скачать наш прайс лист <a href="">Оригинальные картриджи</a> или <a href="">Совместимые картриджи</a> для принтеров.</p>
    <p>В настоящее время сайт находится в разработке, все интересующие Вас вопросы Вы можете задать по указанным выше контактам или с помощью формы обратной связи в правом верхнем углу сайта.</p>
    <p>Вы можете скачать наш прайс лист <a href="">Оригинальные картриджи</a> или <a href="">Совместимые картриджи</a> для принтеров.</p>
    <p>В настоящее время сайт находится в разработке, все интересующие Вас вопросы Вы можете задать по указанным выше контактам или с помощью формы обратной связи в правом верхнем углу сайта.</p>
    <p>Вы можете скачать наш прайс лист <a href="">Оригинальные картриджи</a> или <a href="">Совместимые картриджи</a> для принтеров.</p>
    <p>В настоящее время сайт находится в разработке, все интересующие Вас вопросы Вы можете задать по указанным выше контактам или с помощью формы обратной связи в правом верхнем углу сайта.</p>
    <p>Вы можете скачать наш прайс лист <a href="">Оригинальные картриджи</a> или <a href="">Совместимые картриджи</a> для принтеров.</p>
    <p>В настоящее время сайт находится в разработке, все интересующие Вас вопросы Вы можете задать по указанным выше контактам или с помощью формы обратной связи в правом верхнем углу сайта.</p>
    <p>Вы можете скачать наш прайс лист <a href="">Оригинальные картриджи</a> или <a href="">Совместимые картриджи</a> для принтеров.</p>
    </div>

    <div class="content-2">
    </div>
    </div>

    </div>

    </body>

    <footer class="footer">
    <div class="footer-logo">
    <img src="images/3.png" alt="Mega-toner.ru" title="Mega-toner.ru" width="100%">
    </div>

    <div>
    <p></p>
    </div>

    <div>
    <p></p>
    </div>
    </footer>

    </html>

    А вот CSS:

    body{
    background-color:black;
    font-size:100%;
    font-family:"Comic Sans MS", cursive, sans-serif;
    margin:0;
    padding:0;
    color:#A0A0A0;
    }

    a{
    color:#00AFDE;
    list-style:none;
    }

    ul{
    margin:0;
    padding:0;
    }

    li{
    list-style:none;
    }

    .header{
    position:relative;
    top:0;
    width:100%;
    margin:0;
    background-color:#FFFF00;
    min-height:30%;
    }

    h1{
    font-size:130%;
    font-weight:bold;
    }

    h2{
    margin:0;
    padding:0;
    }

    .contacts{
    position:absolute;
    left:0;
    top:0;
    width:30%;
    min-height:10%;
    font-sise:110%;
    }

    .contacts a{
    text-decoration:none;
    color:#A0A096;
    }

    .logo{
    position:absolute;
    left:35%;
    top:0;
    width:40%;
    height:10%;
    margin:15px;
    }

    .logo h2{
    position:relative;
    left:-20%;
    text-align:center;
    }

    .contacts-form{
    position:fixed;
    right:0;
    top:0;
    width:30%;
    height:10%;
    max-width:220px;
    margin:15;
    z-index:2;
    }

    .contacts-form #name,
    .contacts-form #phone,
    .contacts-form #email,
    .contacts-form #msg,
    .contacts-form #send{
    width:100%;
    border:2px solid #A0A096;
    border-radius:10px;
    line-height:20px;
    margin-bottom:5px;
    font-family:"Comic Sans MS", cursive, sans-serif;
    padding-left:3%;
    box-sizing:border-box;
    }


    .contacts-form #email{
    width:101%;
    }

    .contacts,
    #logo,
    .contacts-form{
    margin:15px;
    }

    .wrapper{
    position:relative;
    top:280px;
    width:99%;
    margin:5px 0 5px 0;
    z-index:1;
    opacity:1;
    margin-bottom:10%;
    margin-left:0.5%;
    box-sizing:border-box;
    min-height:450px;
    }

    .nav{
    position:absolute;
    top:0;
    left:0;
    width:19.5%;
    min-height:400px;
    padding-top:0;
    box-sizing:border-box;
    }

    .nav a{
    width:100%;
    line-height:100%;
    margin-bottom:5px;
    font-family:"Comic Sans MS", cursive, sans-serif;
    text-decoration:none;
    font-size:120%;
    color:#7B7B71;
    display:block;
    }


    .nav li{
    margin-bottom:1%;
    border:2px solid #7B7B71;
    border-radius:10px;
    padding:10px 5px 10px 15px;
    background-color:#FFFFFF;
    }

    .nav li:hover{
    background-color:#27B7C9;
    }

    .nav li:active{
    background-color:#A62A8B;
    color:white;
    }


    .main-menu3,
    .main-menu2 {
    display:none;
    position:absolute;
    left:100%;
    top:1%;
    z-index:2;
    }


    .main-menu1 li:hover .main-menu2 li,
    .main-menu1 li:hover .main-menu3 li,
    .main-menu1 li:hover .orig,
    .main-menu1 li:hover .sovm,
    .main-menu1 li:hover .maker{
    display:block;
    }


    .content{
    position:absolute;
    top:0;
    right:0;
    width:79.5%;
    min-height:400px;
    }

    .content .content-1{
    position:relative;
    top:0;
    left:0;
    width:79.5%;
    min-height:99%;
    border:2px solid #7B7B71;
    border-radius:10px;
    padding:10px 0 10px 15px;
    box-sizing:border-box;
    background-color:#FFFFFF;
    }

    .content h1{
    text-align:center;
    font-size:150%;
    }

    .content p{
    font-size:110%;
    }

    .content .content-2{
    position:absolute;
    top:0;
    right:0;
    border:2px solid #7B7B71;
    border-radius:10px;
    width:19.5%;
    min-height:100%;
    box-sizing:border-box;
    background-color:#FFFFFF;
    }

    .footer{
    position:absolute;
    width:99%;
    height:15%;
    bottom:0;
    background-color:#FFFFFF;
    border:2px solid #A0A096;
    border-radius:10px;
    min-margin:10% auto 1%;
    max-height:150px;
    }

    .footer-logo{
    position:absolute;
    left:1%;
    top:10%;
    width:20%;
    height:70%;
    }
     
  2. spy

    spy

    Регистрация:
    15 янв 2013
    Сообщения:
    468
    Симпатии:
    137
    Вопервых зачем такие простыни выкладовать?, есть спойлер)
    во 2х, уже не раз писал пользуйтесь онлайн инструментами (писочницами), а не тут выкладывать и что-то разобрать/помочь просто нереально)
    в 3х, - hover на то и ховер, что не всплывает, а показывает блок только при наведении на элемент, а не по-пап))
    в 4х - футер абсолютом и правильно отображается от верха на 450пх- как и указано.
    ну и в 5х ховер меню так напутано, по сути вобще не соотвествует написаному цсс))
     
  3. Иван2504

    Иван2504

    Регистрация:
    1 дек 2017
    Сообщения:
    3
    Симпатии:
    0
    1) Что такое спойлер? можете дать ссылку выложу все там
    2) То же самое, что это такое?))) Есть ссылка?)
    3) Насчет ховера вы правы, но почему не отоброжает?
    4) У футера кроме отступа сверху есть и маргин сверху. Почему он не отталкивает контент?
    5) Насчет написания последнего варианта ховера согласен, ад и только, но прежде я пробовал все варианты, самый логичный
    .main-menu1 li:hover .maun-menu2{
    display:block;
    }

    но о не работает...
    --- Добавлено, 1 дек 2017 ---
    ну или так:
    .main-menu1 > li:hover .maun-menu2{
    display:block;
    }
     
  4. spy

    spy

    Регистрация:
    15 янв 2013
    Сообщения:
    468
    Симпатии:
    137
    1- сдесь на форуме, в инструментах редактирования - для скрытия таких простыней))
    2 - в гуле просто набрать там 5 самых распространенных (например - jsfiddle.net)
    3 -5 - неотображает/не работает так как в коде совсем другое (классы и вложеность) чем пишеш в цсс
    4 - не высота футера влияет, а врапера + высота самого врапера не жестко указана
    PS: лучше возьми самый простую фришную хтмл страницу и разбирайся в ней, чем делать велосипед да еще без понимания вообще, что к чему
     
  5. Иван2504

    Иван2504

    Регистрация:
    1 дек 2017
    Сообщения:
    3
    Симпатии:
    0
    суть понял, благодарю за ответ!
    буду разбираться и осваивать "песочницы" , но данный шаблон планирую довести до ума.
    еще раз благодарю и спасибо за терпение :Wink:
    --- Добавлено, 2 дек 2017 ---
    https://jsfiddle.net/ivan2504/frLosprn/
    вот ссылка на jsfiddle.net