Навигационная панель. Отцентрировать подпункты меню

@denys_l · Регистрация: 26.09.2011

Студворк — интернет-сервис помощи студентам

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
  <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="style/reset.css" />
        <link rel="stylesheet" type="text/css" href="style/style.css" />
        <link rel="stylesheet" type="text/css" href="style/typograph.css" />
        <link href='http://fonts.googleapis.com/css?family=Stint+Ultra+Expanded' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
        </head>
    <body>
        <div id="header">
            <div class="navigation">
                <a href=""><img src="img/home.png"></a>
                <ul>
                    <li class="first"><a href="#">&nbsp;</a></li>
                    <li><a href="#">catalogue</a></li>
                    <li><a href="#">support</a></li>
                    <li><a href="#">contact</a></li>
                </ul>
            </div>
            <div class="searchpanel">
                <form>
                    <input class ="searchfield" placeholder="Search..." name="search" value="" type="text" />
                </form>
            </div>
            
        </div>
    </body>
  </html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
div#header {
    width: 100%;
    overflow: hidden;
    background: #0081b8;
    padding: 5px 0;
    min-width: 1000px;
}
img {
    float: left;
    margin-left: 100px;
}
div.navigation {
    float: left;
    line-height: normal;
    min-width: 600px
}
div.navigation ul {
    overflow: hidden;
    height: 100%;
}
div.navigation ul li{
    float: left;
    overflow: hidden;
    height: auto;   
    padding: 2px 0;
}
div.navigation ul li a{
    float: left;
    overflow: hidden;
    height: auto;
    text-decoration: none;
    text-transform: capitalize;
    padding: 0 20px;
    border-right: solid 2px white;
}
div.navigation ul li a:hover{   
    text-decoration: underline;
    color: #FFF;
}
div.navigation ul li a.first{   
    padding-left: 0;
}
 
form {
    float: right;
    margin-right: 100px;
}
.searchfield {
    border-radius: 5px;
    resize: none;
    width: 180px;
    height: 20px;
}

Не получается отцентрировать подпункты меню относительно изображения. Получается, что я задаю обтекание картинки справа и следующий бокс сдвигается влево и вверх к картинке. Хочется, чтобы это было посередине... второе: как с этой картинкой лучше поступить? Когда я её вносил в элемент списка, то оно разносило мне по высоте блок, при этом увеличивая правую границу. Так не очень хорошо, хочется, чтоб эта граница сохраняла высоту шрифта. Поэтому я её вынес. Но теперь пропала правая граница от картинки, потому пришлось вставить неразрывный пробел в листайтем. Но при этом этот пробел при наведении курсора светится ссылкой. Такого быть не должно....
Собсно прошу помощи

Во вложении набросанное задание, кому интересно

@denys_l · 08.09.2012, 19:33 **[ТС]**

помощь все ещё нужна

@panicwassano · 10.09.2012, 15:50

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
div#header {
    width: 100%;
    overflow: hidden;
    background: #0081b8;
    padding: 5px 0;
    min-width: 1000px;
}
img {
    display: inline-block;
    margin-left: 100px;
}
div.navigation {
    float: left;
    line-height: normal;
    min-width: 600px
}
div.navigation ul {
    display: inline-block;
    overflow: hidden;
    height: 100%;
}
div.navigation ul li{
    display: inline-block;
    overflow: hidden;
    height: auto;   
    padding: 2px 0;
    vertical-align: -5px;
}
div.navigation ul li a{
    float: left;
    overflow: hidden;
    height: auto;
    text-decoration: none;
    text-transform: capitalize;
    padding: 0 20px;
    border-right: solid 2px white;
}
div.navigation ul li a:hover{   
    text-decoration: underline;
    color: #FFF;
}
div.navigation ul li a.first{   
    padding-left: 0;
}
 
form {
    float: right;
    margin-right: 100px;
}
.searchfield {
    border-radius: 5px;
    resize: none;
    width: 180px;
    height: 20px;
}
.searchfield:focus{
    border-radius: 5px;
}

как то так

но мне кажется это не решение, а говновыход

@denys_l · 10.09.2012, 16:15 **[ТС]**

все равно спасибо )

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .

@denys_l 54 / 54 / 10 Регистрация: 26.09.2011 Сообщений: 186
	08.09.2012, 19:33 [ТС]
	помощь все ещё нужна 0

@denys_l 54 / 54 / 10 Регистрация: 26.09.2011 Сообщений: 186
	10.09.2012, 16:15 [ТС]
	все равно спасибо ) 0