Создание панели навигации, которая включает в себя панель поиска - PullRequest
Новая
       3

Создание панели навигации, которая включает в себя панель поиска

0 голосов
/ 27 июля 2011

Я работаю над панелью навигации для моего сайта и хочу добавить в нее окно поиска. Я использую текстовое поле, и я разместил его с помощью CSS, чтобы он идеально выровнялся, за исключением того, что в зависимости от разрешения он перемещается. Как я могу убедиться, что он остается в одной позиции? Для справки, вроде как на сайте Apple, только больше.

Вот часть моего HTML-кода в виде панели навигации: 

<img id="navbar" src="images/Navbar.png" alt="Navigation"/>
<form method="get" action="" class="search">
    <input class="msb" maxlength="2048" id="searchBox" size="40" title="Search" value="" lang="en" />
    <input value="Search" id="submitButton" type="submit" />
</form>
<ul id="navlinks">
    <li id="navHome"><a href="index.php">Home</a></li>
    <li id="navSubmit"><a href="submit.html">Submit</a></li>
    <li id="navArchive"><a href="archive.html">Archive</a></li>
    <li id="navApps"><a href="apps.html">Apps</a></li>
    <li id="navContact"><a href="contact.html">Contact</a></li>
</ul>

и вот мой CSS (обратите внимание, что навигационные ссылки тоже не выстроены в очередь, поэтому раздел #navlink на самом деле не актуален: 

div#adholder
{
    width:728px;
    height:90px;
    align:center;
}

ul#navlinks
{
    postition: absolute;
    right: 280px;
    margin:20px;
    padding:0;
    list-style:none;
    width:525px;
}

#searchBox
{
    position: fixed;
    left: 890px;
    top: 250px;
    height: 30px;
}
/*#searchBox
{
    position:absolute;
    right:150;
    top:150;
    width: 300px;
    height: 35px;
}*/

#submitButton
{
    display: none;
}
ul#navlinks li
{
    display: inline;
}

ul#navlinks li a
{
    text-decoration: none;
    padding: 5px 0;
    width:100px;
    background: none;
    color:#000;
    float:left;
}

(По какой-то причине форматировщик кода не работает ...)

Вот как это выглядит на экране моего ноутбука 1366x768: This is how it looks on my 1366x768 laptop screen.

1 Ответ

0 голосов
/ 27 июля 2011

используйте position:absolute; и установите все четыре параметра top: bottom: right: left: в стиле

...