Меню на CSS

28.10.2009, 21:56. **Показов** 2077. **Ответов** 2

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

Делаю меню:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style> 
.gphoto-topnav-tab{float:left;} 
.gphoto-notch i,.gphoto-notch b{border-width:0; border-style:solid; display:block; height:1px; font-size:1px; line-height:1px; overflow:hidden; margin:0; padding:0;} 
.gphoto-topnav-tab .gphoto-notch i{margin:0 2px; background:#d8d9dd; }.gphoto-topnav-tab .gphoto-notch b{border-color:#d8d9dd; background-color:#f3f4f5; border-right-width:1px; border-left-width:1px; margin:0 1px;} 
.menu_a{display:block;vertical-align:middle; border-style:solid; border-color:#d8d9dd; background-color:#f5f5f5; border-width:0px 1px 1px 1px; padding:4px 5px 5px 5px;margin:0; color:#6699CC; font-weight:bold; height:13px; } 
.menu_a:hover{background:#EAF0FD;}.gphoto-topnav-tab a:hover{text-decoration:none; color:#006699; font-size:11px} 
.gphoto-topnav-tab a{color:#6699CC; font-weight:bold; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; padding:0} 
.gphoto-topnav-tab span{color:#6699CC; font-weight:bold;} 
.gphoto-topnav-tab span:hover{background:#EAF0FD; text-decoration:none; color:#006699;} 
.gphoto-topnav-tab-active a{background:#FFFFFF;border-bottom-color:#FFFFFF;} 
.gphoto-topnav-tab-active a:hover{background:#FFFFFF;border-bottom-color:#FFFFFF} 
.gphoto-topnav-tab-active span{background:#FFFFFF;border-bottom-color:#FFFFFF;} 
.gphoto-topnav-tab-active span:hover{background:#FFFFFF;border-bottom-color:#FFFFFF;} 
</style>

Вариант 1 - работающий:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<table cellspacing="0" cellpadding="0" border="0"> 
<tr> 
<td class="gphoto-topnav-tab" nowrap> 
<div class="gphoto-notch"><i>&nbsp;</i><b>&nbsp;</b></div> 
<span class="menu_a"><a href="">Главная</a></span> 
</td> 
<td class="gphoto-topnav-tab" nowrap> 
<div class="gphoto-notch"><i>&nbsp;</i><b>&nbsp;</b></div> 
<span class="menu_a"><a href="">Обмен Вещами</a></span> 
</td></tr> 
</table>

Вариант 2 - пытаюсь реализовать тоже, но без таблиц - неработает а Эксплорере :

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<ol style="list-style:none; margin:0; padding:0;" > 
<li class="gphoto-topnav-tab"> 
<div class="gphoto-notch"><i>&nbsp;</i><b>&nbsp;</b></div> 
<span class="menu_a"> 
<a href="">Главная</a></span> 
</li> 
<li class="gphoto-topnav-tab"> 
<div class="gphoto-notch"><i>&nbsp;</i><b>&nbsp;</b></div> 
<span class="menu_a"> 
<a href="">Обмен Вещами</a></span> 
</li> 
</ol>

Вопрос: Как сделать чтоб второй вариант работал корректно?

@Vanstorm · 29.10.2009, 00:21

Во - первых, во втором варианте используются списки а не слои. Во вторых в стиле css везде используется display:block - это создаёт "переносы", замените это на display:inline для "вкладок".

Добавлено через 35 минут
Хм. Посмотрел. То что я предложил не работает. Если указать значения inline-block для заданных 2 классов, то можно убрать перевод строки, но пропадёт обрамление.

@tsj3amttaf · 01.09.2014, 09:59

HTML5
1
2
3
4
<ul id="menu">
    <li><a href="#">Главная</a></li>
    <li><a href="#">Обмен Вещами</a></li>
</ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul, ol {list-style:none;} 
body, ul, ol {padding:0;margin:0;}
 
#menu {margin:10px;} /* demo */
 
#menu a:hover {text-decoration:none;color:#006699;}
#menu a {color:#6699CC;font-weight:bold;font-size:85%;}
#menu li {
    padding:6px 8px 1px 8px;
    background:#f5f5f5;
    float:left;
    border:1px solid #d8d9dd;
    border-radius:5px 5px 0 0;
}
#menu li:hover {background:#EAF0FD;}

JSFiddle

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@Vanstorm 2773 / 341 / 22 Регистрация: 15.01.2008 Сообщений: 2,614
	29.10.2009, 00:21
	Во - первых, во втором варианте используются списки а не слои. Во вторых в стиле css везде используется display:block - это создаёт "переносы", замените это на display:inline для "вкладок". Добавлено через 35 минут Хм. Посмотрел. То что я предложил не работает. Если указать значения inline-block для заданных 2 классов, то можно убрать перевод строки, но пропадёт обрамление. 0