Невозможно переопределить встроенный CSS из шаблона веб-страницы

У меня сложное время переопределять встроенный стиль для веб-страницы, которая начиналась как бесплатный HTML-шаблон. Я попытался использовать ключевое слово «! Important», но это не отменяет его. Когда я проверяю элемент в Chrome, я могу отключить раздел «element.style» для «padding-top: 164px», но я не могу избавиться от него в CSS. Я новичок, поэтому я уверен, что я просто что-то пропустил, но я не знаю, что еще искать.Невозможно переопределить встроенный CSS из шаблона веб-страницы

Чтобы уточнить, проблема заключается в встроенном стиле, который устанавливает верхнее дополнение div на 164px, и я хочу, чтобы оно было меньше.

HTML-:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Senkadagala</title> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,400italic,500,700' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" type="text/css" href="css/main.css"> 




<script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="js/singlepagenav.js"></script> 
    <script type="text/javascript" src="js/queryloader.js"></script>  
    <script type="text/javascript" src="js/main.js"></script> 

    <meta charset="UTF-8"> 
    <meta name="description" content="Senkadagala - a simple HTML template"> 
    <meta name="keywords" content="web design, web development, branding, Social media marketing, print media design, digital design, HTML,CSS,XML,JavaScript"> 
    <meta name="author" content="PixelMock"> 

    <link rel="icon" type="image/png" href="img/fav.png" /> 
</head> 
<body> 
    <div class="navbar navbar-inverse navbar-fixed-top top-nav" role="navigation"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#"> 
      <p class="slogan">"Members First, Service Always."</p> 
      </a> 
     </div> 
     <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
      <li><a href="#home">Home</a></li> 
      <li><a href="#services">Services</a></li> 
      <li><a href="#calendar">Calendar</a></li> 
      <li><a href="#intranet">Intranet</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </div>

Вот рассматриваема область:

<div class="content" id="home"> 
     <div class="section section1"> 
      <div class="container"> 
       <div class="row"> 
        <img src="img/TransPatriotLogo.png"> 
       </div> 
       <div class="row"> 
        <h4 class="bodytext">Symitar for Windows 2</h2> 
       </div> 

       <div class="row"> 
        <h5 class="bodytext"> 
         © 2016 - Patriot Federal Credit Union 
        </h5> 
        <h5 class="bodytext"> 
         All Rights Reserved 
        </h5> 
       </div> 

      </div> 
     </div>

В следующем разделе, что не должно быть важно:

 <div class="section section2" id="services"> 
      <div class="container"> 
       <div class="row" id="services-row"> 
        <h3 id="services-title">Services</h3> 
        <p> 
         Services go here. 
        </p> 

        <p> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id ultricies felis. Fusce sed nisi velit. Quisque cursus pharetra diam, non congue ligula sodales at. Phasellus sodales sem sagittis arcu vulputate dictum. Vestibulum faucibus malesuada risus. 
        </p> 

...continued...

Вот CSS:

body 
{ 
    text-align: center; 
    padding: 0px; 
    margin: 0px; 
    font-family: "Roboto",sans-serif; 
    font-size: 12px; 
    color:#d3d3d3 !important; 
} 

body .text-color1 
{ 
    color: #882565; 
} 

body .text-color2 
{ 
    color: #C54D8D; 
} 

.container 
{ 
    /*width:1200px;*/ 
    margin: 0px auto; 
    /*text-align: left;*/ 
} 

.top-nav 
{ 
    position: fixed; 
    height: 70px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    width:100%; 
    background-color: #f8f8f8; 
} 

.top-nav li a 
{ 
    font-size:16px; 
    font-family: "Roboto"; 
    font-weight: bold; 
    color:#0e3d83 !important; 
} 

.slogan 
{ 
    color: #0e3d83; 
    font-family: "Monotype Corsiva"; 
    font-weight: bold; 
    font-size: 26px; 
    margin-top: 15px; 
} 

.bodytext 
{ 
    color: #0e3d83; 
    font-family: "Trebuchet MS"; 
    font-weight: bold; 
} 

.navbar li .current 
{ 
    background-color: transparent; 
    color: #d92727 !important; 
    outline: none; 
} 

.navbar-brand 
{ 
    padding-top: 0px; 
} 

.top-nav li a:hover 
{ 
    color:#C54D8D!important; 
} 

.navbar-inverse 
{ 
    border: none; 
    box-shadow: 0px 1px 5px #0e3d83; 
} 

.content 
{ 
    padding-top:70px; 
} 

.section1 
{ 
    background: url(../img/whiteflag.png); 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    background-position:50% -400px; 
} 

.logo-row 
{ 
    padding-top: 0px; 
} 
.section1 .main-logo 
{ 
/* background: url("../img/TransPatriotLogo.png") no-repeat scroll center center rgba(0, 0, 0, 0); 
    height: 200px; 
    width: 500px; 
    margin-left: auto; 
    margin right: auto; */ 
} 

.section1 h2 
{ 
    color: #0e3d83; 
    font-family: "Trebuchet MS"; 
    font-weight: bold; 
} 

.section1 p 
{ 
    font-size: 20px; 
    color: #0e3d83; 
    font-family: "Trebuchet MS"; 
    font-weight: bold; 
} 

.section2 
{ 
    padding-top: 100px; 
    /*padding-bottom: 200px;*/ 
} 

.section2 .intro-text 
{ 
    /*text-align: left*/ 
} 

.section2 img 
{ 
    margin: 0 auto; 
} 

.section2 h3#services-title 
{ 
    font-family: "Roboto", sans-serif; 
    font-size: 34px; 
    color: #0e3d83 !important; 
    font-weight: 300; 
    margin-bottom: 40px; 
} 

.section2 .team 
{ 
    padding: 150px 0px 100px 0px; 
} 

.section2 .team img 
{ 
    margin:0px auto; 
} 

.section2 .team h3.team-name 
{ 
    color:#848484; 
    margin-bottom: 5px; 
} 

.section2 .team h4.team-subtitle 
{ 
    margin-top: 0px;  
    font-weight: lighter; 
    color:#848484; 
    margin-bottom: 20px; 
} 

.section2 .team p.team-details 
{ 
    text-align: center; 
    font-size: 16px; 
} 

.section2 p 
{ 
    color: #848484; 
    font-size: 18px; 
    font-family: "Roboto", sans-serif; 
    margin-bottom: 20px; 
    font-weight: 300; 
    text-align: left 
} 

.section3 
{ 
    background: url(../img/workspace-sub.jpg) rgba(213,30,155, 0.6); 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    background-position:50% 0%; 
    padding-top: 200px; 
    padding-bottom: 200px; 
} 

.section3 .container 
{ 

} 

.section3 img.img-responsive 
{ 
    margin: 0 auto; 
} 

.section3 h3 
{ 
    color: #848484; 
    font-weight: 400; 
} 

.section3 p 
{ 
    color: #848484; 
    font-weight: 300; 
    font-size: 18px; 
} 

.section4 
{ 
    /*height:600px;*/ 
} 

.item 
{ 
    width: 20%; 
    background-color: red; 
    height:300px; 
    float:left; 
    position: relative; 
} 

.item.w2 
{ 
    width: 25%; 
} 

.item.w3 
{ 
    width: 40%; 
} 

.item .hidden-item 
{ 
    display: none; 
} 

.portfolio 
{ 
    padding: 100px 0px 
} 

.portfolio #portfolio-introduction 
{ 
    margin-bottom: 100px; 
    margin-top: 100px; 
    color: #828282; 
} 

.portfolio #portfolio-introduction p 
{ 
    font-size: 24px; 
    font-weight: lighter; 
} 

.portfolio #portfolio-items 
{ 
    border-top: 1px solid #D6D6D6; 
    border-bottom: 1px solid #D6D6D6; 
} 

.portfolio .item .hover-content 
{ 
    width: 100%; 
    height: 100%; 
    background: #8a0175; 
    opacity: 0.8; 
    position: absolute; 
    padding: 20px; 
    display: none; 
    transition:all 0.5s ease 0s; 
    cursor: pointer; 
} 

.portfolio .item .hover-content h3 
{ 
    font-size: 34px; 
    font-weight: lighter; 
    color: #fff; 
    position: relative; 
    top:30%; 
} 

.portfolio .item:hover .hover-content 
{ 
    display: block; 
} 

.portfolio .item .portfolio-popup h3 
{ 
    margin-bottom: 30px; 
    margin-top: 0px; 
    color:#828282; 
} 

.portfolio .item .portfolio-popup p 
{ 
    color: #828282; 
    line-height: auto; 
    font-size: 18px; 
    font-weight: lighter; 
} 


.portfolio .item .portfolio-popup .popup-image-container 
{ 
    padding: 20px; 
} 

.portfolio .item .portfolio-popup .popup-image-container img 
{ 
    margin: 0 auto 
} 

.portfolio .item .portfolio-popup .portfolio-item-description 
{ 
    border-bottom: 1px solid #8D8D8D; 
    padding: 40px; 
    text-align: left; 
} 

.portfolio .item .portfolio-popup .labels 
{ 
    margin-top:20px; 
    line-height: 30px; 
} 


.portfolio .item .portfolio-popup .portfolio-item-description span.label 
{ 
    font-family: "Roboto", sans-serif; 
    font-size: 12px; 
    font-weight: lighter; 
} 

.portfolio h3 
{ 
    font-size: 60px; 
    font-family: "Roboto", sans-serif; 
    font-weight: lighter; 
} 

.footer 
{ 
    background: url(../img/footer-bg.jpg) repeat-x left bottom #000; 
    /*padding-top: 200px;*/ 
} 

#contact 
{ 
    /*padding-bottom:80px;*/ 
    font-family:"Roboto", sans-serif; 
    font-weight:300; 
    min-height:600px; 
} 

#contact #contact-us-header 
{ 
    font-size: 44px; 
    font-weight: lighter; 
    margin-bottom: 50px 
} 

#contact #contact-form input[type=submit] 
{ 
    background-color:#C54D8D; 
    border:1px solid #882565                                                                                                                                                                       
} 

#contact #contact-form 
{ 
    text-align: left; 
} 

#contact #contact-form label 
{ 
    font-size: 16px; 
    font-weight: lighter; 
} 

#contact .contact-description p 
{ 
    font-size:20px; 
} 

.sm-wrapper 
{ 
    margin-top:30px; 
    margin-bottom:50px; 
} 


.sm-wrapper a:hover 
{ 

} 

.sm-container 
{ 
    width:32px; 
    height:32px; 
    display:block; 
    float:left; 
    background:url(../img/sm-sprite.png) no-repeat; 
    margin-right:10px; 
} 

.sm-container:hover 
{ 
    /*border-bottom:5px solid #C54D8D;*/ 
    cursor:pointer; 
} 

.sm-facebook 
{ 
    background-position:0px -32px; 
} 

.sm-linkedin 
{ 
    background-position:0px -64px; 
} 

.sm-gplus 
{ 
    background-position:0px -96px; 
} 

.sm-skype 
{ 
    background-position:0px -128px; 
} 


/* end of contact section */ 



/* Landscape phones and down */ 
@media (max-width: 480px) { 

    .section2 p 
    { 
     font-size: 18px; 
     font-weight: 300; 
    } 

    .section2 img 
    { 
     padding-bottom: 60px; 
    } 

    .item,.item.w2 , .item.w3 
    { 
     width: 100%; 
    } 

    .portfolio .item .portfolio-popup h3 
    { 
     font-size: 42px; 
    } 

    .portfolio .item .portfolio-popup p 
    { 
     font-size: 16px; 
     font-weight: lighter; 
    } 

    .section2 .team img 
    { 
     padding-bottom: 0px; 
    } 

    .section3 .service-item 
    { 
     margin-bottom: 50px 
    } 

    .section3 .service-item p 
    { 
     font-size: 18px; 
     margin: 0 auto; 
     width: 75%; 
    } 


} 

/* Landscape phone to portrait tablet */ 
@media (min-width: 481px) and (max-width: 767px) { 
    .section3 .service-item 
    { 
     margin-bottom: 50px 
    } 

    .section3 .service-item p 
    { 
     font-size: 18px; 
     margin: 0 auto; 
     width: 75%; 
    } 

    .section2 p 
    { 
     font-size: 20px; 
     font-weight: 300; 
    } 

    .section2 img 
    { 
     padding-bottom: 0px; 
    } 

    .item,.item.w2 , .item.w3 
    { 
     width: 100%; 
    } 

    .navbar-nav 
    { 
     background-color:#F8F8F8 
    } 
} 


/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 1024px) { 
    .section2 img 
    { 
     padding-bottom: 60px; 
    } 

    .section2 p 
    { 
     font-size: 20px; 
    } 

    .section2 img 
    { 
     padding-bottom: 0px; 
    } 

    .section3 .service-item 
    { 
     margin-bottom: 50px; 
     font-size: 18px; 
    } 

    .portfolio .item .hover-content 
    { 
     width: 100%; 
     height: 100%; 
     background: #8a0175; 
     opacity: 0.8; 
     position: absolute; 
     padding: 20px; 
     display: none; 
     transition:all 0.5s ease 0s; 
     cursor: pointer; 
    } 

    .portfolio .item .hover-content h3 
    { 
     font-size: 18px; 
     font-weight: 300; 
     color: #fff; 
     position: relative; 
     top:30%; 
    } 

    .portfolio .item:hover .hover-content 
    { 
     display: block; 
    } 

    .portfolio .item .portfolio-popup h3 
    { 
     margin-bottom: 30px; 
     margin-top: 0px; 
     color:#828282; 
     font-size: 42px; 
    } 

    .portfolio .item .portfolio-popup p 
    { 
     color: #828282; 
     line-height: auto; 
     font-size: 16px; 
     font-weight: lighter; 
    } 

    .item 
    { 
     width: 20%; 
     background-color: red; 
     height:200px; 
     float:left; 
     position: relative; 
    } 

    .item.w2 
    { 
     width: 25%; 
    } 

    .item.w3 
    { 
     width: 40%; 
    } 

    .navbar-nav 
    { 
     float: right; 
    } 
} 

/* Large desktop */ 
@media (min-width: 1025px) { 
    .navbar-nav 
    { 
     float: right; 
    } 
} 

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
.clearfix { display: inline-block; } 
/* start commented backslash hack \*/ 
* html .clearfix { height: 1%; } 
.clearfix { display: block; } 
/* close commented backslash hack */

источник

2016-09-21 AmishJohn81

Можете ли вы создать скрипку для это, тогда это будет легко проверить –

Хорошо, это не выходит правильно в JSFiddle ... – AmishJohn81

, если он в сети, вы можете поделиться ссылкой или использовать https://jsfiddle.net/ для создания скрипта –

Вы сказали, что вы пробовали важный вариант, но did'nt работать, что вы пробовали?

Что-то вроде:

.section1 
{ 
    background: url(../img/whiteflag.png); 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    background-position:50% -400px; 
    padding-top: 10px !important; 
}

Если вок переопределить встроенный CSS.

источник

2016-09-21 12:55:20 P13

Это именно то, что я пробовал, но это не сработало. – AmishJohn81

Я изменяю вызовы класса для div. Вместо «section section1» я просто «section1», а затем добавил дополнение с помощью! Важно, и он сработал. – AmishJohn81

2 пути решения:

Посмотрите, если какой-либо шаблон HTML имеет встроенный стиль, который вы хотели, и удалить его
Если 1 не работает: Посмотрите на любой Javascript, что может быть добавление этих стилей (используйте функцию поиска в текстовом редакторе).

источник

2016-09-21 12:58:19

Использование !important не должно на самом деле быть ответом. Похоже, какой-то JavaScript вполне может установить высоту элемента (не идеальный, но эй).

Я бы рекомендовал заглянуть в ваши JS-файлы на номер 164 и посмотреть, что он появится.

Я хотел бы начать, глядя в js/singlepagenav.js и js/main.js

источник

2016-09-21 12:58:20 itsphilz

Поскольку, как представляется, в шаблоне, который я загрузил, важно, что корабль отплыл, если я не использую новый шаблон. – AmishJohn81

Ни в коем случае, только потому, что кто-то написал плохой код, не означает, что вы не можете это исправить. – itsphilz

Попробуйте называть это как .section.section1 вместо .section section1

Like:

.section.section1 { 
padding-top:20px !important; 
}

источник

2016-09-21 13:00:54

Ну, это работало до вопроса о дополнении, но теперь мой фон ушел – AmishJohn81

Добавьте все, что является встроенным под этот класс. Не забудьте добавить! Важно –

Дайте мне знать, если это работает @ AmishJohn81 –

Вы должны проверить файл CSS ..следующие отступы отображается в стиле элемента, поэтому его нет в строке. В вашем CSS-файле, классе контента, вы предоставили padding-top как 70 px. Это может добавить ваше пространство.

источник

2016-09-21 13:13:48

С некоторыми рекомендациями из ваших ответов, я думаю, что наткнулся на решение, по крайней мере, на решение, хотя это может быть не самая лучшая практика. Мой класс ДИВ был

<div class="section section1">

Таким образом, очевидно они были противоречивыми, так что я сделал это

<div class="section1">

и изменил CSS для

.section1 
{ 
    background: url(../img/whiteflag.png); 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    background-position:50% -400px; 
    padding-top: 20px !important; 
}

источник

2016-09-21 13:14:13 AmishJohn81

Невозможно переопределить встроенный CSS из шаблона веб-страницы

ответ

Смежные вопросы