БЛОГ НА HUSL


Как убрать отступ от краев ? т.е. мне не нравится что от навигационной панели отступ,я хочу чтобы она была целиком фонового цвета

Автор вопроса: Yunu

введите сюда описание изображения

$(function(){
    if($('.nav>ul>li').hasClass('selected')){
    $('.selected').addClass('active');
    var currentleft=$('.selected').position().left+"px";
    var currentwidth=$('.selected').css('width');
    $('.lamp').css({"left":currentleft,"width":currentwidth});
    }
    else{
      $('.nav>ul>li').first().addClass('active');
      var currentleft=$('.active').position().left+"px";
    var currentwidth=$('.active').css('width');
    $('.lamp').css({"left":currentleft,"width":currentwidth});
    }
    $('.nav>ul>li').hover(function(){
      $('.nav ul li').removeClass('active');
      $(this).addClass('active');
    var currentleft=$('.active').position().left+"px";
    var currentwidth=$('.active').css('width');
    $('.lamp').css({"left":currentleft,"width":currentwidth});
    },function(){
    if($('.nav>ul>li').hasClass('selected')){
    $('.selected').addClass('active');
    var currentleft=$('.selected').position().left+"px";
    var currentwidth=$('.selected').css('width');
    $('.lamp').css({"left":currentleft,"width":currentwidth});
    }
    else{
      $('.nav>ul>li').first().addClass('active');
      var currentleft=$('.active').position().left+"px";
    var currentwidth=$('.active').css('width');
    $('.lamp').css({"left":currentleft,"width":currentwidth});
    }
    });
    });
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);
h1{
  font:400 40px 'pt sans',sans-serif;
  text-align:center;
}
.nav a{
  text-decoration:none;
}
.nav{
  height:70px;
  background:#222;
  position:relative;
}
.nav>ul{
  position:relative;
  list-style:none;
  padding:0;
  margin:0;
}
.nav>ul>li>ul{
  position:absolute;
  left:0;
  padding:0;
  margin:0;
  list-style:none;
}
.nav>ul>li:hover>ul li a{
  opacity:1;
  height:50px;
   transition:all .3s linear;
  -o-transition:all .3s linear;
  -moz-transition:all .3s linear;
  -webkit-transition:all .3s linear;
}
.nav>ul>li>ul a{
  display:block;
  color:#222;
  width:150px;
  line-height:50px !important;
  font:700 14px 'pt sans',sans-serif;
  background:#eee;
  border-bottom:1px solid #ddd;
  text-align:center;
  padding:0 5px;
   height:0;
  overflow:hidden;
  opacity:0;
    transition:all .3s linear .2s;
  -o-transition:all .3s linear .2s;
  -moz-transition:all .3s linear .2s;
  -webkit-transition:all .3s linear .2s;
}
.nav>ul>li{
  float:left;
  position:relative;
}
.nav>ul>li>a{
  padding:0 20px;
  color:#fff;
  display:block;
  line-height:70px !important;
  font:400 15px 'PT Sans', sans-serif;
  text-transform:uppercase;
  text-decoration:none;
}
.lamp span{
  display:block;
  height:4px;
  background:#ee6666;
  position: relative;
}
.lamp span:after {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(238, 102, 102, 0);
    border-bottom-color: #ee6666;
    border-width: 4px;
    margin-left: -4px;
}
.lamp{
  position:absolute !important;
  height:4px;
  top:66px;
  background:#333;
  transition:all .3s linear;
  -o-transition:all .3s linear;
  -moz-transition:all .3s linear;
  -webkit-transition:all .3s linear;
}
.selected.active>a,.active>a{
  transition:all .3s linear;
  -o-transition:all .3s linear;
  -moz-transition:all .3s linear;
  -webkit-transition:all .3s linear;
  color:#fff;
}
.credit{
  text-align:center;
  margin:20px 0;
}
.blog-link{
color:#fff;
text-decoration:none;
background:#eee;
background-size:40px;
line-height:50px;
display:inline-block;
padding:0 10px;
border-radius:4px;
border-bottom:3px solid #ddd;
color:#333;
font-family:'open sans',sans-serif;
margin:10px;
}
.dgithub{
color:#fff;
text-decoration:none;
background:#eee url('https://lh6.googleusercontent.com/-MOW-T0KLZJI/UyR6EIggYkI/AAAAAAAAEbM/el92Uoxz-aI/s50-no/GitHub-Mark.png') no-repeat;
background-size:40px;
line-height:50px;
display:inline-block;
padding:0 10px 0 50px;
background-position:5px;
border-radius:4px;
border-bottom:3px solid #ddd;
color:#333;
font-family:'open sans',sans-serif;
margin:10px;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);

$bg:#1a1f25;
$button:#e6b333;
$border:#22272d;



*, *:after, *:before{
  box-sizing:border-box;
}

html, body {background:$bg;font-family: 'Roboto', sans-serif;}

.clear {clear:both;}

#man-people-user, #lock-locker {
  fill:white;  
}

.wrapper{
  width:300px; 
  margin:12% auto;
}

form {position:relative;}

.clear {clear:both;}
.sign-in {
  float:left; 
  color:white;
  font-size:1.3em;
}
.button {
  float:right;
  color:#7f8084;
  border:1px solid $border;
  padding:7px 15px;
  border-radius:3px;
  font-size:0.8em;
  cursor:pointer; 
}
.button:hover {color:#d3d3d3}
.lock {
  position:absolute;
  width:30px;
  height:30px;
  margin-top:10px;
  padding:7px; 
  left:5px;
  &::after {
    content:""; 
    width:1px;
    height:30px;
    position:absolute;
    background:$border; 
    top:0px; 
    left:100%; 
  }
}
.user {
 
  position:absolute;
  width:30px;
  height:30px;
  margin-top:10px;
  padding:7px;
  left:5px;
  &::after {
    content:""; 
    width:1px;
    height:30px;
    position:absolute;
    background:$border; 
    top:0px; 
    left:100%; 
  }
}

input {
  width:100%;
  padding:5px;
  height:40px;
  border-radius:3px;
  margin:5px 0;
  outline: none;
}
input[type="text"]:focus, input[type="password"]:focus {
  border:1px solid white;
  box-shadow:none;
}
.user-input:focus .user{
  background:white !important;
   
} 


input[type="text"]{
  background:transparent; 
  border:2px solid $border;
  padding-left:45px;
  color:$button;
}
input[type="password"]{
  background:transparent; 
  border:2px solid $border;
  padding-left:45px;
  color:$button;
}
input[type="submit"]{
  background:$button; 
  border:none;
  color:white;
  text-align:center;
  font-size:0.8em;
  cursor:pointer;
}

input[type="radio"]{
  display:none; 
}
.radio-check {
  width:50px;
  height:20px;
  border:1px solid $border;
  border-radius:30px;
  margin-top:10px;
  float:left;
  text-align:center;
  padding:4px 0;
  color:$button;
  font-size:0.65em;
  position:relative;
  label{
    margin:0 2px;
    cursor:pointer;
  }
  .switch-selection{
    display: block;
    position: absolute;
    width:11px;
    height:11px; 
    border-radius:50%;
    background:#babbbd;
    margin-top:-11px;
    margin-left:11px; 
    transition: 0.2s ease-out;
  } 
  
}

 .radio-yes:checked ~ .switch-selection{
    margin-left:25px !important;
  } 
  

.check-label {
  font-size:0.8em;
  color:#7f8084;
  margin-top:10px;
  float:left;
  padding:3px 0;
  margin-left:10px;
}


.forgot-label {
  font-size:0.8em;
  color:#7f8084;
  margin-top:10px;
  float:right;
  padding:3px 0;
  cursor:pointer;
}

.body1 {
    background-color:#1A1F25 ;
}

.signnn {
    background-color: yellowgreen;
}
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  /* Скрыть флажок HTML по умолчанию */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* Ползунок */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Закругленные ползунки */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }
  .nav {
    background-color: #343434;
   
  }
  div{
    position:absolute;
    top:0px;
    left:0px;
    margin: 0;
    }
<div class='nav'>
  <ul>
    <li id="ok"> <a href="#"> Code studio <i class="fas fa-solid fa-code" style="color: #ffffff;" ></i></a</li>
    <li><a href='#'>Главная <i class="fas fa-home"></i></a></li>
    <li><a href='#'>Курсы <i class="fas fa-solid fa-arrow-down" style="color: #ffffff;"></i> </a>
    <ul>
      <li><a href='#'>WEB <i class="fas fa-solid fa-code" ></i></a></li>
      <li><a href='#'>Python <i class="fas fa-solid fa-file-code fa-beat"></i></a></li>
      <li><a href='#'>Java <i class="fas fa-solid fa-mug-hot fa-fade"></i></a></li>
      <li><a href='#'>C# <i class="fas fa-solid fa-hashtag fa-fade"></i></a></li>
      <li><a href="#">Сис. админ-е <i class="fas fa-solid fa-laptop fa-fade"></i></a></li>
      </ul>
    </li>
    <li><a href='#'>Подписка <i class="fas fa-solid fa-arrow-down" style="color: #ffffff;"></i></a>
        <ul>
      <li><a href='#'>Бесплатная <i class="fas fa-solid fa-battery-quarter fa-fade"></i></a></li>
      <li><a href='#'>Обычная <i class="fas fa-solid fa-battery-half fa-fade"></i></a></li>
      <li><a href='#'>Полная <i class="fas fa-solid fa-battery-full fa-fade"></i></a></li>
      
      </ul>
    </li>
    <li><a href='#'>О нас <i class="fas fa-solid fa-question"></i></a></li>
    <li><a href='#'>Связь с нами <i class="fas fa-solid fa-phone"></i> </a></li>
    <li> <a href="login.html">Начать обучение <i class="fas fa-solid fa-fire" style="color: #ffffff;"></i></a></li>

    <li class='lamp'><span></span></li>
  </ul>
</div>


Источник

Ответы (1 шт):

Автор решения: Swek

Такое поведение навигационной панели происходит из-за стилей которые передаются сайту от браузера

Для удаления стилей, предоставляемых браузером, и устранения отступов, вы можете использовать Normalize.css. Эта библиотека нормализует стандартные стили браузера, обеспечивая единый и предсказуемый вид отображения на всех устройствах.

  1. Удаление всех стилей браузера через Normalize.css:

Вставьте ссылку на Normalize.css в раздел <head> вашего HTML-документа:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Подключение normalize.css -->
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

  <!-- Подключение normalize.css -->
  <title>Your Page Title</title>
</head>
<body>
  <!-- Ваш контент здесь -->

  <!-- Удачи с вашим проектом! -->
</body>
</html>
  1. Для устранения отступов от навигационной панели через ваш css файл
body {
  margin: 0; /* Убираем внешний отступ */
  /* Остальные стили */
}
→ Ссылка

licensed under cc by-sa 3.0 with attribution.