• B правой части каждого сообщения есть стрелки и . Не стесняйтесь оценивать ответы. Чтобы автору вопроса закрыть свой тикет, надо выбрать лучший ответ. Просто нажмите значок в правой части сообщения.

  • Познакомьтесь с пентестом веб-приложений на практике в нашем новом бесплатном курсе

    «Анализ защищенности веб-приложений»

    🔥 Записаться бесплатно!

  • CTF с учебными материалами Codeby Games

    Обучение кибербезопасности в игровой форме. Более 200 заданий по Active Directory, OSINT, PWN, Веб, Стеганографии, Реверс-инжинирингу, Форензике и Криптографии. Школа CTF с бесплатными курсами по всем категориям.

Помогите с кодом, я чуть-чуть запутался

Alecs_2101

Member
21.01.2021
17
0
BIT
0
В общем, есть код и я хотел сделать менюшку сверху. Должно было получится вот так
На форум.png


А получилось вот так
На форум 2.png



Вот код
HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>Moja głowna strona</title>
<link rel="stylesheet" href="style.css">

<style>
body{
  background: white; /* Меняется фон экрана, выбирается здесь */
  padding: 0;
 
}
.menu{
    width:100px;
    position: fixed;
    top:0;
    left:0;
    padding: 0 3rem;
    background-color: #1F2232;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }
  .menu a{
    margin: 0 1rem ;
    text-decoration: none;
    padding: 1rem .5rem;
  }
  .dropdown{
    position: relative;
  }
  .dropdown ul{
    width: 200px;
    text-align: center;
    position:absolute;
    background-color: #373C58 ;
    padding: 0;
    list-style-type: none;
    box-shadow: 0px 0px 23px 0px rgba(0,0,0.25) ;
    margin-top: 10px;
    border-radius:  7px;
    display: none;
  }
  .dropdown ul li{
    padding: .5rem;
    
  }
  .dropdown ul li a{
    width: 100%;
    height: 100%;
    display: inline-block;
    margin: 0;
  }
  .dropdown ul li:hover{
    background-color: #27283F;
    border-radius: 7px;
  }
  .dropdown a:focus + ul,
  .dropdown a:focus + ul
  .dropdown ul:hover {
    display:  block;

  }
#wrapper{ /* Оболочка страницы сайта */
  width: 1300px; /* Меняется ширина страницы */
  margin: 0 auto;
  background:#f2e8c9; /* Меняется задний фон страницы */
}

/* Шапка сайта */

#header{
position: relative; /* Задаём блоку относительное позиционирование для того, чтобы затем размещать, в нём другие элементы и позиционировать относительно его границ поверх фоновой картинки и заголовка */
  height: 250px; /* Высота шапки */
  background-color: #ffffff; /* Фон шапки */
  margin-bottom: 10px; /* Нижний отступ шапки от остального контента */
  border-radius: 5px; /* Закругляются углы блока */
  box-shadow: rgba(0,0,0,0.5) 0px 1px 3px; /* Тень. Визуально приподнимает блок над оболочкой */
}
img{ /* Фоновая картинка в шапке */
float: left; /* Разрешаем наплывание других элементов на картинку */
  margin: -40px 0 0 0;} /* Размещаем картинку в блоке header. 1-я и 3-я цифры - двигаем вверх-вниз, 2-я и 4-я цифры - двигаем вправо-влево */
h1{ /* Заголовок сайта */
  margin:0 0 10px 40px; /* Заголовок двигается верх-вправо-вниз-влево. */
  color:#464451; /* Цвет заголовка */
}
.nomer{ /*Подзаголовок (номер телефона)*/
  position:absolute; /* Позиционируем абсолютно подзаголовок, относительно границ блока header. Также можно разместить в шапке сайта ещё другие картинки и абзацы поверх фоновой картинки и заголовка */
  top:5px; /* Двигается вверх-вниз */
  left:680px; /* Двигается вправо-влево */
  font-size: 25px; /* Размер букв подзаголовка */
  font-style:italic; /* Курсив */
  font-weight:bold; /* Жирный */
  color:#464451; /* Цвет букв подзаголовка */
}

/* Сайдбар (колонка справа) */

#sidebar{ /* Блок сайдбара */
  background-color: #ffffff; /* Фон блока */
  width: 180px; /* Ширина блока */
  padding: 10px; /* Отступ текста от краёв */
  float: right; /* Размещаем блок справа от других элементов, наплывание или обтекание справа). Если делать сайдбар слева, то значение right меняем на left */
  border-radius: 5px; /* Закругляем углы блока */
  box-shadow: rgba(0,0,0,0.5) 0px 1px 3px; /* Задаём блоку тень */
}
.marcer{ /* Галочки маркеры меню */
  float: left; /* Размещаем слева от текста */
  margin: 5px 5px 0 0; /* Двигаются вверх-вправо-вниз-влево */
}

/* Контент (статья) */

#content{ /* Блок контента */
  margin-bottom: 5px; /* Отступ блока статьи от блока подвала */
  width: 676px; /* Ширина статьи */
  padding: 10px; /* Отступ текста от краёв блока */
  background: #ffffff; /* Фон статьи */
  border-radius: 5px;
  box-shadow: rgba(0,0,0,0.5) 0px 1px 3px;
}
.left{ /* Картинка в тексте слева */
  float: left;
  margin: 30px 7px 7px 7px;
}
.right{ /* Картинка в тексте справа */
  float: right;
  margin: 7px 0 7px 7px;
}
/* Подвал */

#footer{ /* Блок подвала */
  height:80px; /* Высота блока подвала */
  background-color: #ffffff; /* Фон блока подвала */
  margin-bottom: 10px; /* Отступ снизу */
  border-radius: 5px; /* Закруглённые углы */
  box-shadow: rgba(0,0,0,0.5) 0px 1px 3px; /* Тень блока */
}
.clear{ /* Запрет наплывания. Устанавливается для того, чтобы блок контента, при заполнении текстом и изображениями не наплывал на подвал */
  clear: both;
}
  .fon{ /* Номер телефона */
  float:left; /* Разрешаем другим элементам обтекать абзац справа */
  margin:20px 0 0 20px;
}
.fax{ /* Номер факса */
  float:left;
  margin:20px 0 0 60px;
}
 .mail{  /* Адрес E-mail  */
  float:left;
 margin:20px 0 0 60px;
}
 
</style>
</head>
<body>
  <naw class="menu">
    <div class="dropdown">
      <a href="#">Oferta</a>
      <ul>
        <li><a href="#">Logo</a></li>
        <li><a href="#">Wizytówki</a></li>
        <li><a href="#">Reklama</a></li>
      </ul>
    </div>
    <a href="#">0 nas</a>
    <a href="#">Kontakt</a>
  </naw>
  <div id="wrapper"> <!--Оболочка страницы-->
<!--Шапка сайта-->
    <div id="header">
<!--Заголовок сайта-->
      <h1></h1>
<!--Описание (телефон)-->
        <p class="nomer"> <br></p>
<!--Фоновая картинка в шапке сайта-->
      <img src="">
    </div>
<!--Сайдбар-->
    <div id="sidebar">
<!--меню-->
      <h3>На нашем сайте</h3>
<!--Картинки маркеров меню (галочки)-->
        <p><img class="marcer" src="http://trueimages.ru/img/99/91/dea39f15.png" width="10" height="10">Наши сотрудники</p>
        <p><img class="marcer" src="http://trueimages.ru/img/99/91/dea39f15.png" width="10" height="10">Наша техника</p>
        <p><img class="marcer" src="http://trueimages.ru/img/99/91/dea39f15.png" width="10" height="10">Прайс</p>
<!--Прямая синяя линия-->
          <hr width="50" color="#037FFC" size="5">
<!--Общая информация в сайдбаре-->
      <h3>Другая информация</h3>
    </div>
<!--Основной контент (статья)-->
    <div id="content">
<!--Картинка слева-->
      <img class="left" src="http://trueimages.ru/img/81/90/b1718f15.png">
<!--Заголовок статьи-->
        <h3>Наша работа</h3>
<!--Текст статьи-->

    </div>
<!--Запрет наплывания-->
  <div class="clear"></div>
<!--Подвал-->
    <div id="footer">
      <p class="fon"><strong>Телефон:<br> +48 000 000 000</strong> </p>
      <p class="fax"><strong>Faks:<br> Daniel</strong></p>
      <p class="mail"><strong>E-mail<br>kolobok121@gmail.com</strong></p>

    </div>
  </div>
</body>
</html>


Помогите решить эту вроде бы мелочь но очень важную проблему для меня :)
 

rdh_x

Green Team
26.03.2018
63
5
BIT
0
У тебя в коде у класса .menu width: 100px, а надо 100%.

И добавь z-index: 1, чтобы меню было поверх #wrapper, а #wrapper добавь margin-top, где-нибудь 60px
 

nks1ck

Green Team
02.11.2020
223
105
BIT
0
В общем, есть код и я хотел сделать менюшку сверху. Должно было получится вот так
Посмотреть вложение 47972

А получилось вот так Посмотреть вложение 47973


Вот код
HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>Moja głowna strona</title>
<link rel="stylesheet" href="style.css">

<style>
body{
  background: white; /* Меняется фон экрана, выбирается здесь */
  padding: 0;

}
.menu{
    width:100px;
    position: fixed;
    top:0;
    left:0;
    padding: 0 3rem;
    background-color: #1F2232;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }
  .menu a{
    margin: 0 1rem ;
    text-decoration: none;
    padding: 1rem .5rem;
  }
  .dropdown{
    position: relative;
  }
  .dropdown ul{
    width: 200px;
    text-align: center;
    position:absolute;
    background-color: #373C58 ;
    padding: 0;
    list-style-type: none;
    box-shadow: 0px 0px 23px 0px rgba(0,0,0.25) ;
    margin-top: 10px;
    border-radius:  7px;
    display: none;
  }
  .dropdown ul li{
    padding: .5rem;
   
  }
  .dropdown ul li a{
    width: 100%;
    height: 100%;
    display: inline-block;
    margin: 0;
  }
  .dropdown ul li:hover{
    background-color: #27283F;
    border-radius: 7px;
  }
  .dropdown a:focus + ul,
  .dropdown a:focus + ul
  .dropdown ul:hover {
    display:  block;

  }
#wrapper{ /* Оболочка страницы сайта */
  width: 1300px; /* Меняется ширина страницы */
  margin: 0 auto;
  background:#f2e8c9; /* Меняется задний фон страницы */
}

/* Шапка сайта */

#header{
position: relative; /* Задаём блоку относительное позиционирование для того, чтобы затем размещать, в нём другие элементы и позиционировать относительно его границ поверх фоновой картинки и заголовка */
  height: 250px; /* Высота шапки */
  background-color: #ffffff; /* Фон шапки */
  margin-bottom: 10px; /* Нижний отступ шапки от остального контента */
  border-radius: 5px; /* Закругляются углы блока */
  box-shadow: rgba(0,0,0,0.5) 0px 1px 3px; /* Тень. Визуально приподнимает блок над оболочкой */
}
img{ /* Фоновая картинка в шапке */
float: left; /* Разрешаем наплывание других элементов на картинку */
  margin: -40px 0 0 0;} /* Размещаем картинку в блоке header. 1-я и 3-я цифры - двигаем вверх-вниз, 2-я и 4-я цифры - двигаем вправо-влево */
h1{ /* Заголовок сайта */
  margin:0 0 10px 40px; /* Заголовок двигается верх-вправо-вниз-влево. */
  color:#464451; /* Цвет заголовка */
}
.nomer{ /*Подзаголовок (номер телефона)*/
  position:absolute; /* Позиционируем абсолютно подзаголовок, относительно границ блока header. Также можно разместить в шапке сайта ещё другие картинки и абзацы поверх фоновой картинки и заголовка */
  top:5px; /* Двигается вверх-вниз */
  left:680px; /* Двигается вправо-влево */
  font-size: 25px; /* Размер букв подзаголовка */
  font-style:italic; /* Курсив */
  font-weight:bold; /* Жирный */
  color:#464451; /* Цвет букв подзаголовка */
}

/* Сайдбар (колонка справа) */

#sidebar{ /* Блок сайдбара */
  background-color: #ffffff; /* Фон блока */
  width: 180px; /* Ширина блока */
  padding: 10px; /* Отступ текста от краёв */
  float: right; /* Размещаем блок справа от других элементов, наплывание или обтекание справа). Если делать сайдбар слева, то значение right меняем на left */
  border-radius: 5px; /* Закругляем углы блока */
  box-shadow: rgba(0,0,0,0.5) 0px 1px 3px; /* Задаём блоку тень */
}
.marcer{ /* Галочки маркеры меню */
  float: left; /* Размещаем слева от текста */
  margin: 5px 5px 0 0; /* Двигаются вверх-вправо-вниз-влево */
}

/* Контент (статья) */

#content{ /* Блок контента */
  margin-bottom: 5px; /* Отступ блока статьи от блока подвала */
  width: 676px; /* Ширина статьи */
  padding: 10px; /* Отступ текста от краёв блока */
  background: #ffffff; /* Фон статьи */
  border-radius: 5px;
  box-shadow: rgba(0,0,0,0.5) 0px 1px 3px;
}
.left{ /* Картинка в тексте слева */
  float: left;
  margin: 30px 7px 7px 7px;
}
.right{ /* Картинка в тексте справа */
  float: right;
  margin: 7px 0 7px 7px;
}
/* Подвал */

#footer{ /* Блок подвала */
  height:80px; /* Высота блока подвала */
  background-color: #ffffff; /* Фон блока подвала */
  margin-bottom: 10px; /* Отступ снизу */
  border-radius: 5px; /* Закруглённые углы */
  box-shadow: rgba(0,0,0,0.5) 0px 1px 3px; /* Тень блока */
}
.clear{ /* Запрет наплывания. Устанавливается для того, чтобы блок контента, при заполнении текстом и изображениями не наплывал на подвал */
  clear: both;
}
  .fon{ /* Номер телефона */
  float:left; /* Разрешаем другим элементам обтекать абзац справа */
  margin:20px 0 0 20px;
}
.fax{ /* Номер факса */
  float:left;
  margin:20px 0 0 60px;
}
.mail{  /* Адрес E-mail  */
  float:left;
margin:20px 0 0 60px;
}

</style>
</head>
<body>
  <naw class="menu">
    <div class="dropdown">
      <a href="#">Oferta</a>
      <ul>
        <li><a href="#">Logo</a></li>
        <li><a href="#">Wizytówki</a></li>
        <li><a href="#">Reklama</a></li>
      </ul>
    </div>
    <a href="#">0 nas</a>
    <a href="#">Kontakt</a>
  </naw>
  <div id="wrapper"> <!--Оболочка страницы-->
<!--Шапка сайта-->
    <div id="header">
<!--Заголовок сайта-->
      <h1></h1>
<!--Описание (телефон)-->
        <p class="nomer"> <br></p>
<!--Фоновая картинка в шапке сайта-->
      <img src="">
    </div>
<!--Сайдбар-->
    <div id="sidebar">
<!--меню-->
      <h3>На нашем сайте</h3>
<!--Картинки маркеров меню (галочки)-->
        <p><img class="marcer" src="http://trueimages.ru/img/99/91/dea39f15.png" width="10" height="10">Наши сотрудники</p>
        <p><img class="marcer" src="http://trueimages.ru/img/99/91/dea39f15.png" width="10" height="10">Наша техника</p>
        <p><img class="marcer" src="http://trueimages.ru/img/99/91/dea39f15.png" width="10" height="10">Прайс</p>
<!--Прямая синяя линия-->
          <hr width="50" color="#037FFC" size="5">
<!--Общая информация в сайдбаре-->
      <h3>Другая информация</h3>
    </div>
<!--Основной контент (статья)-->
    <div id="content">
<!--Картинка слева-->
      <img class="left" src="http://trueimages.ru/img/81/90/b1718f15.png">
<!--Заголовок статьи-->
        <h3>Наша работа</h3>
<!--Текст статьи-->

    </div>
<!--Запрет наплывания-->
  <div class="clear"></div>
<!--Подвал-->
    <div id="footer">
      <p class="fon"><strong>Телефон:<br> +48 000 000 000</strong> </p>
      <p class="fax"><strong>Faks:<br> Daniel</strong></p>
      <p class="mail"><strong>E-mail<br>kolobok121@gmail.com</strong></p>

    </div>
  </div>
</body>
</html>


Помогите решить эту вроде бы мелочь но очень важную проблему для меня :)
StackOverflow же есть для таких вопросов))))
 
Мы в соцсетях:

Обучение наступательной кибербезопасности в игровой форме. Начать игру!