2014-11-25 2 views
-7

Почему в красном div есть граница, показывающая вокруг H3, также на ползунке? Я не смог найти какой-либо код границы в css.Html Неизвестная граница вокруг h3?

Более текст, так что я могу отправить вопрос

Почему там граница появляется вокруг Н3 в красном DIV, а также на ползунок DIV? Я не смог найти какой-либо код границы в css.

Пожалуйста, помогите Зачем возникает граница, показывающая вокруг H3 в красном div, также на ползунке div? Я не смог найти какой-либо код границы в css.

Пожалуйста, помогите

@charset "utf-8"; 
 
/* CSS Document */ 
 

 
.clearfix{ clear:both;} 
 

 
body{ 
 
\t 
 
\t \t 
 
\t } 
 

 
@font-face {font-family: Orator Std; 
 
\t src: url(fonts/OratorStd.otf);} 
 
\t 
 
\t 
 
\t 
 
@font-face {font-family: Century Gothic; 
 
\t src: url(fonts/GOTHIC.TTF);} \t 
 

 
.wrapper{ width:100%; 
 
\t \t margin-left:auto; 
 
\t \t margin-right:auto; 
 
\t \t background-image: 
 
\t \t 
 
\t \t overflow:hidden; 
 
     } 
 
.header{ width:100%; 
 
\t \t height:240; 
 
\t \t margin-bottom:10px; 
 
\t \t background: 
 
\t  
 
     } 
 
\t  
 
.bannerbox \t {width:100%; 
 
\t \t \t height:150px; 
 
\t \t \t padding-top:50px; 
 
\t \t \t 
 
\t \t \t ; background-color:#FFF; 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t } 
 

 
.bannercntr{ 
 
\t \t \t font-family: "Orator Std"; 
 
      } 
 
\t \t  
 
\t \t  
 
.bannergothic{font-family:"Century Gothic"; 
 
\t \t \t \t border: none;} \t \t  
 
\t \t  
 
.blockimgs{height:250px; 
 
\t \t \t width:250px; 
 
\t \t \t float:left; 
 
      } 
 

 
.megablock{width:1000px; 
 
\t \t \t height:500px; 
 
\t \t \t margin-left: auto; 
 
\t \t \t margin-right:auto; 
 
\t \t \t } 
 

 
\t \t \t  
 
.blockimgsw1{height:250px; 
 
\t \t \t width:250px; 
 
\t \t \t float:left; 
 
\t \t \t background-image:url(Images/australia.jpg) 
 
      } \t  
 
.blockimgsw1:hover { background-image: url(Images/australia%20-%20Copy.fw.png)} 
 

 

 
.blockimgsw2{height:250px; 
 
\t \t \t width:250px; 
 
\t \t \t float:left; 
 
\t \t \t background-image: url(Images/Canada.jpg) 
 
      } \t  
 
.blockimgsw2:hover { background-image: url(Images/Canada%20-%20Copy.fw.png)} 
 

 

 
.blockimgsw3{height:250px; 
 
\t \t \t width:250px; 
 
\t \t \t float:left; 
 
\t \t \t background-image: url(Images/china.jpg) 
 
      } \t  
 
.blockimgsw3:hover { background-image: url(Images/china%20-%20Copy.fw.png)} 
 

 
.blockimgsw4{height:250px; 
 
\t \t \t width:250px; 
 
\t \t \t float:left; 
 
\t \t \t background-image: url(Images/dubai.jpg) 
 
      } \t  
 
.blockimgsw4:hover { background-image: url(Images/dubai%20-%20Copy.fw.png)} 
 

 

 
.blockimgsw5{height:250px; 
 
\t \t \t width:250px; 
 
\t \t \t float:left; 
 
\t \t \t background-image: url(Images/europe.jpg) 
 
      } \t  
 
.blockimgsw5:hover { background-image: url(Images/europe%20-%20Copy.fw.png)} 
 

 
.blockimgsw6{height:250px; 
 
\t \t \t width:250px; 
 
\t \t \t float:left; 
 
\t \t \t background-image: url(Images/singapore.jpg) 
 
      } \t  
 
.blockimgsw6:hover { background-image: url(Images/singapore%20-%20Copy.fw.png) } 
 

 

 
.blockimgsw7{height:250px; 
 
\t \t \t width:250px; 
 
\t \t \t float:left; 
 
\t \t \t background-image:url(Images/southAfrica.jpg) 
 
      } \t  
 
.blockimgsw7:hover { background-image: url(Images/southAfrica%20-%20Copy.fw.png)} 
 

 

 
.blockimgsw8{height:250px; 
 
\t \t \t width:250px; 
 
\t \t \t float:left; 
 
\t \t \t background-image: url(Images/USA.jpg) 
 
      } \t  
 
.blockimgsw8:hover { background-image: url(Images/USA%20-%20Copy.fw.png)} 
 

 
.ddmenubox{width:700px; 
 
\t \t \t float:right; 
 
      } 
 
.logodiv{float:left;} 
 

 

 
<!-----Drop Down Menu----> 
 

 

 
ul {list-style: none;padding: 0px;margin: 0px;} 
 
    ul li {display: block;position: relative;float: left;border:1px solid #000;z-index:1} 
 
    li ul {display: none;} 
 
    ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none; 
 
      white-space: nowrap;color: #fff;} 
 
    ul li a:hover {background: #f00;} 
 
    li:hover ul {display: block; position: absolute;} 
 
    li:hover li {float: none;} 
 
    li:hover a {background: #f00;} 
 
    li:hover li a:hover {background: #000;} 
 
    #drop-nav li ul li {border-top: 0px;} 
 

 
<!----Drop Down Menu END---> 
 

 

 

 

 

 
.rightheader{float:right; 
 
\t \t \t \t height:240px; 
 
\t \t \t \t width:500px;} 
 

 
.horilist{ float:left; 
 
    list-style:none; 
 
\t font-family:"Century Gothic"; 
 
\t font-size:30px; 
 
\t font-weight:800; 
 
\t padding-right:20px; 
 
\t margin:0px auto; 
 
\t } 
 
\t 
 
.subbox \t {width:1000px; 
 
     height:280px; 
 
\t \t padding-top:20px; 
 
\t \t background-image:url(Images/matte-red.jpg); 
 
\t \t background-repeat:repeat; 
 
\t \t 
 
\t \t overflow:hidden; 
 
     } 
 

 

 
<!-----SLIDER----> 
 

 
.banner { position: relative; overflow: auto; } 
 
    .banner li { list-style: none; height:400px;} 
 
     .banner ul li { float: left; } 
 

 
<!-----SLIDER--END---->
<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Travel the World</title> 
 

 
<link rel="stylesheet" type="text/css" href="main.css"> 
 

 

 

 
<!-----Slider-----> 
 

 

 

 
\t <!-----Slider end----> 
 

 

 
</head> 
 

 

 

 

 
<body> 
 

 
<div class="header"> <div class="logodiv"> <img src="Images/One.png"> </div> 
 

 
\t <div class="ddmenubox"> 
 

 
<ul id="drop-nav"> 
 
    <li><a href="#">Support</a></li> 
 
    <li><a href="#">Web Design</a> 
 
    <ul> 
 
     <li><a href="#">HTML</a></li> 
 
     <li><a href="#">CSS</a></li> 
 
     <li><a href="#">JavaScript</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Content Management</a> 
 
    <ul> 
 
     <li><a href="#">Joomla</a></li> 
 
     <li><a href="#">Drupal</a></li> 
 
     <li><a href="#">WordPress</a></li> 
 
     <li><a href="#">Concrete 5</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
    <ul> 
 
     <li><a href="#">General Inquiries</a></li> 
 
     <li><a href="#">Ask me a Question</a></li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 

 
\t </div> 
 

 

 
</div> 
 

 

 

 
<div class="wrapper"> 
 
<!---Insert Slider----> \t 
 
\t \t 
 
     <div class="banner"> 
 
    <ul> 
 
     <li style="background-image:url(Images/002.jpg)">This is a slide.</li> 
 
     <li>This is another slide.</li> 
 
     <li>This is a final slide.</li> 
 
    </ul> 
 
</div> 
 
     
 

 
\t \t 
 
<!------SLIDER AREA END---->  
 
    
 
    <div class="bannerbox"> 
 
    <center> 
 
    
 
    <h3 class="bannergothic">You can simple dream a great vacation. But it is a tough job to make it into a reality and to find <br>a travel company who delightfully crafts your trip. <br>At One World Holidayz we make it our pleasure to transform your dream holiday into a reality.</h3> 
 
    
 
    </center> 
 
    </div> 
 
    
 
    <div class="megablock"> 
 
    <div class="blockimgsw1"> 
 
    
 
    </div> 
 
    
 
    <div class="blockimgsw2"> 
 
    
 
    </div> 
 
    
 
    <div class="blockimgsw3"> 
 
    
 
    </div> 
 
    
 
    <div class="blockimgsw4"> 
 
    
 
    </div> 
 
    
 
    <div class="blockimgsw5"> 
 
    
 
    </div> 
 
    
 
    <div class="blockimgsw6"> 
 
    
 
    </div> 
 
    
 
    <div class="blockimgsw7"> 
 
    
 
    </div> 
 
    
 
    <div class="blockimgsw8"> 
 
    
 
    </div> 
 
    
 
    </div> 
 
    <div class="clearfix"></div> 
 
    
 
    <div class="bannerbox"> 
 
    <center> 
 
    <h2 class="bannercntr"> ADVENTURE IS EVERYWHERE </h2> 
 
    <h3 class="bannergothic"> You can simple dream a great vacation. But it is a tough job to make it into a reality and to find a travel company who delightfully crafts your trip. At One World Holidayz we make it our pleasure to transform your dream holiday into a reality.</h3> 
 
    
 
    </center> 
 
    </div> 
 

 

 
\t <div class="subbox"> 
 
    <ul class="horilist"> 
 
    <li class="horilist"> 
 
    China 
 
    </li> 
 
    <li class="horilist"> 
 
    Australia 
 
    </li> 
 
    <li class="horilist"> 
 
    Canada 
 
    </li> 
 
    
 
    <li class="horilist"> 
 
    Dubai 
 
    </li> 
 
    
 
    <li class="horilist"> 
 
    New Zealand 
 
    </li> 
 
    
 
    <li class="horilist"> 
 
    Europe 
 
    </li> 
 
    </ul> 
 
    
 
    <ul> 
 
    <li class="horilist"> 
 
    Hong Kong 
 
    </li> 
 
    
 
    <li class="horilist"> 
 
    Asia 
 
    </li> 
 
    
 
     
 
    
 
    <li class="horilist"> 
 
    USA 
 
    </li> 
 
    
 
    <li class="horilist"> 
 
    South Africa 
 
    </li> 
 
    
 
    <li class="horilist"> 
 
    United Kingdom 
 
    </li> 
 
    
 
    
 
    </ul> 
 
    
 
    </div> 
 
    
 
    
 
    
 
</div> 
 

 

 

 

 

 

 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
<script src="http://unslider.com/unslider.min.js"></script> 
 

 
<script> 
 

 
$(document).ready(function(){ 
 
    $('.banner').unslider(); 
 
}); 
 

 
</script> 
 

 

 
</body> 
 
</html>

+1

Обычно инструменты для разработчиков браузера очень полезны для проверки расчетного стиля ... и для того, чтобы узнать, откуда они берутся. Могу ли я предложить начать/научиться их использовать? –

ответ

0

У вас есть ваши

ul li{ 
    display: block; 
    position: relative; 
    float: left; 
    border: 1px solid #000; 
    z-index: 1; 
} 

Какая граница 1px сделать бегунок провести границу. Так что просто удалите границу или просто сделайте em 0, и вы можете пойти со своим слайдером без рамки.

+0

Спасибо, брат. вы исправили его !!! –

+0

Добро пожаловать, но не пропустите комментарий @AdrianoRepetti – Benjamin

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