Я пытаюсь создать веб-сайт для моего бизнеса мамы туристов. Проблема, с которой я сталкиваюсь, заключается в том, что между моим изображением баннера и моей панелью навигации есть пустая белая линия, которую вы можете видеть на изображении. Я думал, что это связано с полем, поэтому я установил его на ноль для обоих элементов безрезультатно.
Также второй вопрос - почему моя черная рамка также не покрывает основной контент? Я думал, что поскольку это фон тела, он обойдет каждый элемент тела.
Я понимаю, что, возможно, были похожие вопросы, но я нигде не могу найти ответ. Я буду признателен за вводную информацию - это мой первый пост, поэтому я прошу прощения, если я испортил форматирование.
Изображение моего сайта можно найти здесь:
http://postimage.org/image/20dhjcdb8/
Заранее спасибо.
В настоящее время в моем файле index.html есть следующий код:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
</head>
<body>
<img src="final.jpg" id="banner"></img>
<ul id="nav">
<li class="links"><a href="index.html">Home</a></li>
<li class="links"><a href="planning.html">Planning</a></li>
<li class="links"><a href="construction.html">Construction</a></li>
<li class="links"><a href="evaluation.html">Evaluation</a></li>
</ul>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
</div>
</body>
</html>
и следующий код CSS:
html{
font-family: sans-serif;
background-color:#464E54;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 5px solid black;
}
#banner{
padding: 0px;
margin: 0;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#mainc {
width: 960px;
float: right;
background-color: white;
margin: 0;
}
.links {
float: left;
margin: 0px;
}
a:link, a:visited {
display: block;
width: 232px;
font-weight: bold;
color: grey;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover, a:active{
background-color: #333333;
}