Я пытаюсь создать горизонтальную панель навигации на своем веб-сайте, и я хочу использовать CSS, чтобы расположить ее близко под заголовком имени моего веб-сайта и частью фона панели навигации за значком слева. Вот мой код
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Oldnut.com</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
var currPic=1;
var totPics=2;
var keepTime;
function setupPicChange()
{keepTime=setTimeout("changePic()", 5000);}
function changePic()
{currPic++; if(currPic>totPic)currPic=1;
document.getElementByld("image").src="image"+currPic+".jpg";
setupPicChange();}
</script>
</head>
<body onLoad="setupPicChange();">
<div id="wrapper">
<div id="content">
<div id="banner">
<div id="img"><img src="images/Walnut.png" class="nut-image"></div>
<div id="top">Oldnut.com</div>
</div>
<div>
<img id="image" src="images/image1.jpg" alt="picture">
</div>
<div id="deals">
</div>
</div>
<div id="foot"
</div>
</div>
</body>
</html>
Здесь особо не на что смотреть, я думаю, очевидно, что я делаю, и мой CSS
@charset "UTF-8";
body{background-image:url(../images/bg_bodytakeover.png);
}
#wrapper{
margin-left:auto;
margin-right:auto;
width:1000px;
}
.nut-image {
z-index: 1000;
position: relative;
}
#content{
margin-left:10px;
margin-right:10px;
padding-bottom:20px;
box-shadow:0px 0px 20px 3px;
border-radius:4px;
background-color:#FFFFFF;
height:600px;
position: relative;
}
#banner{
margin:auto;
position: relative;
}
#img{
float:left;
}
#top{
float: left;
color: #FF6600;
text-align: left;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: bold;
font-size: 75pt;
text-shadow: 2px 2px #FFFFFF;
text-transform: uppercase;
}
nav {
position: absolute;
width: 100%;
background: #FF6600;
top: 110px;
}
#list-nav{
list-style-type:none;
margin:0;
padding:0;
width:calc(100% - 192px);
float:right;
top: 125px;
}
#list-nav li{
float:left;
width: 25%;
padding: 0;
margin: 0;
}
#list-nav li a{
text-decoration:none;
width:100%;
background:#FF6600;
color:#eee;
float:left;
text-align:center;
display:block;
}
#list-nav li a:hover{
background:#1d8ed0;
color:#000;
}
Теперь я хочу, чтобы моя панель навигации находилась очень близко под гигантским текстом заголовка и фоном оранжевой линии, чтобы идти под значком до конца белой границы содержимого. Я пробовал всевозможные отступы и смешивание полей, но на самом деле это просто беспорядок. Я много оглядывался, но, кажется, у меня ничего не работает, что работает у других. Или я не могу получить все, что я хочу сделать. У кого-нибудь есть советы?
РЕДАКТИРОВАТЬ: я пробовал много отступов, чтобы заставить панель навигации растягивать экран, но она продолжает нарушать равномерное разделение кнопок и их эффекты наведения, есть ли другой способ отсортировать их равномерно?
*ВТОРОЕ РЕДАКТИРОВАНИЕ НОВЫЙ ВОПРОС* Я пытаюсь, чтобы мои изображения менялись между двумя через 5 секунд. Я видел код с других сайтов и не понимаю, почему он не работает. Кто-нибудь заметил, что не так?
