2014-09-23 3 views
-1

По какой-то причине я установил поле для моего баннера, а мой навигатор - 0, и между ними все еще есть пробел. Как я могу это исправить?Почему существует разница между моей навигационной панелью и моим баннером?

CSS

.body 
{ 
margin-left: 200px; 
margin-right: 200px; 
margin-top: 50px; 
margin-bottom: 100px; 
} 




#page{ 
    width: 1000px; 
    margin-left: 0px; 
    margin-right: 0px; 
} 

.li_nav 
{ 
float: left; 
display:inline-block; 
} 

.nav 
{ 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
min-width: 1350px; 
} 

a:link, a:visited 
{ 
display:inline-block; 
width: 182.7px; 
padding-top: 12px; 
padding-right: 5px; 
padding-bottom: 12px; 
padding-left: 5px; 
font-weight: bold; 
color: #FFFFFF; 
background-color: #990000; 
text-align: center; 
text-decoration: none; 
font-family: 'proxima-nova', sans-serif; 
} 

a:hover, a:active 
{ 
background-color: #B20000; 
} 

.body 
{ 
height: 1350px; 
} 

.main_header 
{ 
text-align: center; 
padding-top: 5px; 
padding-right: 5px; 
padding-bottom: 15px; 
padding-left: 5px; 
font-family: 'proxima-nova', sans-serif; 
} 

.main_body 
{ 
padding-bottom: 100px; 
} 

.Team_Description 
{ 
font-size: 150%; 
font-family: 'proxima-nova', sans-serif; 
} 

HTML

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="index_style.css"> 
<title>Team 3774 Homepage</title> 
</head> 
<body> 

<div id="page"> 
<div class="Banner"> 
<img src="/Images/Banner.png" height="200" width="1350"> 
</div> 

<div class="navbar"> 
<ul class="nav"> 
    <li><a class="li_nav" href="/Home">Home</a></li> 
    <li><a class="li_nav" href="/Team Bio">Team Bio</a></li> 
    <li><a class="li_nav" href="/Our Robot">Our Robot</a></li> 
    <li><a class="li_nav" href="/Our Coach">Our Coach</a></li> 
    <li><a class="li_nav" href="/Gallery">Gallery</a></li> 
    <li><a class="li_nav" href="/Outreach">Outreach</a></li> 
    <li><a class="li_nav" href="/Youtube">Youtube</a></li> 
</ul> 
</div> 
</div> 

<div class="body"> 
<h1 class="main_header">Welcome to Robotics Team 3774!</h1> 
<div class="main_body"> 
<p class="Team_Description">Hive Voltage 3774 is the Senior 
(and Junior) 
Engineering Team at Bayonne High School. The team 
is a part of the Senior Engineering class available 
at Bayonne High School. This team has the most experienced 
students for FTC. Many of them are highly capable students 
who had done various stem activities. We plan on learning 
several aspects of engineering this season but we also intend to 
have fun. 
Our main goal however is to grow as a team. We plan to grow 
as individuals and to collaborate as a unit or a team. 
Also, we plan to expose our community to the wonderful 
applications of robotics, and to excel in many parts of real 
engineering and real world applications. Hence we are, 
HIVE VOLTAGE 3774. #Hivevoltage #Gobees</p> 
</div> 
</div> 
</body> 
</html> 

Я строю сайт для моей средней школы робототехники команды. Сайт robotichive3774.com

+0

значение по умолчанию вертикального выравнивания является базовой. Измените его сверху. – GeekByDesign

ответ

3

Поскольку вертикальное выравнивание по умолчанию строкового элемента (в вашем случае изображение в баннере) является базовой, и вы хотите топ:

.Banner img { 
    vertical-align:top; 
} 

jsFiddle example

+0

Почему бы просто не отобразить изображение как «блок»? – disinfor

+1

@ disinfor - Зачем менять свойство отображения по вертикали? – j08691

+0

Хороший звонок. Я был честно любопытен, надеюсь, это не сработало, как вызов правильного ответа. – disinfor

0

Это из-за высоты на изображении:

<img src="/Images/Banner.png" height="200" width="1350">