Jump to content

107andz

Newbie
  • Posts

    13
  • Joined

  • Last visited

Posts posted by 107andz

  1. Может я как-то неудачно написал о проблеме, но это вообще не решение - тут как раз всё ок.

    Проблема в том, что курсор срабатывает на строке "меню" по ширине всего блока, а нужно чтобы только на кнопке "меню"

     

    Захват_1.jpg

    Захват_2.jpg

     

    а это - ".dropdownbtn-content a:hover" - задается ширина "ссылки 1, 2,3...."

    https://jsfiddle.net/r6hsf4cy/3/

  2. Вот так это выглядит структурно на странице (она очень не маленькая, т.ч. публикую только проблемный блок)

    <!doctype html>
    <html lang="ru">
    <head>
    <title>меню контекста</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/menu.css" rel="stylesheet" type="text/css">
    </head>
    <body>
      <div class="container">
        <div class="main_menu">
          <div class="dropdownbtn">
    <a class="button"><p class="selected">меню</p></a>
            <div class="dropdownbtn-content">
    <p class="title1"><a href="#">ссылка 1</a></p>
    <p class="title1"><a href="#">ссылка 2</a></p>
    <p class="title1"><a href="#">ссылка 3</a></p>
    <p class="title1"><a href="#">ссылка 4</a></p>
    <p class="title1"><a href="#">ссылка 5</a></p>
            </div>
          </div>
        </div>
      </div>
    
    </body>
    </html>

    --CSS--

    @charset "utf-8";
    * {
        margin: 0;
        padding: 0;
        position: relative;
    }
    .container {
        width: 100%;
        max-width: 1920px;
    }
    .main_menu {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .dropdownbtn {
        display: block;
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
    .button,.selected {
        width: 10em;
        background-color: yellow;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        border-style: hidden;
    }
    .dropdownbtn-content {
        display: none;
        width: 100%;
        text-align: center;
    }
    .dropdownbtn-content a {
        text-decoration: none;
        color: black;
        display: block;
    }
    .dropdownbtn-content a:hover {
        margin-left: auto;
        margin-right: auto;
        width: 17em;
        background-color: blue;
    }
    .dropdownbtn:hover .dropdownbtn-content {
        display: inline-block;
        background-color: red;
    }

     

  3. Вот столкнулся с такой проблемой: для ОДНОЙ СТРАНИЦЫ сайта лучше и проще сделать новую версию для мобильных устройств, чем заниматься адаптацией. Вот только не знаю как подключить её (желательно через CSS, если возможно) ?

  4. Имеется страница сайта на которой есть только картинка, размером 1920х1200px, с картой ссылок. Соответственно, когда меняется разрешение экрана, эта карта съезжает с заданных точек. Вопрос: кто-нибудь может подсказать решение этой проблемы, кроме создания списка медиазапросов ?

  5. Заплутал в двух соснах

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Town</title>
    <body style="margin: 0px; background: #f35e62;"></body>
    </head>

      <body>
        <img src="Images/fortown.jpg" usemap="#menus" alt="Места"
        style="display: block; margin: auto; height: 100vh"/>
        <map name="menus">
            <area shape="circle" coords="1052,386,70" href="gathering place.html" target="_blank" alt="Место сбора">
            <area shape="circle" coords="934,633,70" href="placeofdeparture" target="_blank" alt="Место отправки">
        </map>
      </body>
    </html>

    Почему не работают (даже не появляются) ссылки на картинке ?

  6. Заплутал в двух соснах

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Town</title>
    <body style="margin: 0px; background: #f35e62;"></body>
    </head>

      <body>
        <img src="Images/fortown.jpg" usemap="#menus" alt="Места"
        style="display: block; margin: auto; height: 100vh"/>
        <map name="menus">
            <area shape="circle" coords="1052,386,70" href="gathering place.html" target="_blank" alt="Место сбора">
            <area shape="circle" coords="934,633,70" href="placeofdeparture" target="_blank" alt="Место отправки">
        </map>
      </body>
    </html>

    Почему не работают (даже не появляются) ссылки на картинке ?

×
×
  • 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