CSS позиционирование навигационная панель

Question

CSS позиционирование навигационная панель

0

Я пытаюсь сделать горизонтальную навигационную панель на своем веб-сайте, и я хочу использовать 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>

Главная Preassmbled ЦПУ GPU

<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;
}

Теперь я хочу, чтобы мой навигационный бар был очень близко под гигантским заголовком, а оранжевый фон линии - под значком до конца границы белого содержимого. Я пробовал всевозможные дополнения и маржи, но на самом деле это просто беспорядок. Я много огляделся, но, похоже, ничего не работает для меня, что работает для других. Или я не могу получить все то, что я ищу. У кого-нибудь есть подсказки?

EDIT: Я пробовал много дополнений, чтобы заставить навигационную панель растягивать экран, но он продолжает ломать ровное разделение кнопок и их эффекты зависания, есть ли другой способ сортировать их равномерно?

* ВТОРОЙ РЕДАКТИРОВАТЬ НОВЫЙ ВОПРОС * Я пытаюсь изменить мои изображения между двумя после 5 секунд. Я видел код с других сайтов и не понимаю, почему он не работает. Кто-нибудь замечает, что не так?

Sherifftwinkie 02 дек. 2013, в 18:09

Источник

0

Можете ли вы создать скрипку и ссылаться на изображения, чтобы мы могли видеть фактический макет?
grimmus 02 дек. 2013, в 16:37
0

Абсолютно, вот иди jsfiddle.net/6MP5z Я думаю, что это будет работать. Но там вы увидите, что навигационная панель слишком низкая, и я не могу переместить ее и получить фон, где я хочу.
Sherifftwinkie 02 дек. 2013, в 16:44
0

Это также портит мои эффекты наведения кнопок, как я упоминал выше.
Sherifftwinkie 02 дек. 2013, в 16:55

Показать ещё 1 комментарий

Теги:

html

css

nav

1 ответ

Ещё вопросы

Можете ли вы создать скрипку и ссылаться на изображения, чтобы мы могли видеть фактический макет?
Абсолютно, вот иди jsfiddle.net/6MP5z Я думаю, что это будет работать. Но там вы увидите, что навигационная панель слишком низкая, и я не могу переместить ее и получить фон, где я хочу.
Это также портит мои эффекты наведения кнопок, как я упоминал выше.

brouxhaha · Accepted Answer · 2013-12-02T16-41-00.000Z

Обновление для комментария:

Я обновил скрипку здесь, чтобы иметь именно то, что вы хотите. Если вы не можете использовать calc в элементах списка, и поскольку у вас установленная ширина 1000px, вы можете жестко кодировать ширину, делая это: width: (1000px - 192px)/2, который будет width: 202px

Оригинальный ответ:

Если у вас всегда будет 4 пункта меню, установите width: 25% (100%/4) в каждом #list-nav li. Здесь обновленная скрипка

Я также установил маржу и заполнение элементов li на 0.

Это то, что вы ищите?

Это очень близко. Я надеялся, что мои кнопки будут справа, пока вся панель навигации перемещается вверх под заголовком OLDNUT.COM, а левый конец фона панели навигации находится за значком грецкого ореха. Однако этого достаточно. Большое спасибо!
У меня есть еще один вопрос, можно ли мне изменить исходное сообщение, чтобы оно отражало мой новый вопрос?