кривое отображение

@Unick · Регистрация: 03.05.2009

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

у меня есть динамичный сайт, в верху панель с кнопками, мне надо, чтобы пару кнопок передвигались вместе с картинкой

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 <div style=\"position: absolute; top:0px; height:75px; width:100%;\">
 <center>
 <div style=\"position: relative; top: 27px; left:-280px; \"><a href='?page=1'><img src='img/b1.png' onmouseover=\"this.src='img/b11.png'\" onmouseout=\"this.src='img/b1.png'\" ALT='подготовка' border=0></a></div>
 </center>
 </div>
 
  <div style=\"position: absolute; top:0px; height:75px; width:100%;\">
 <center>
 <div style=\"position: relative; top: 27px; left:-95px; \"><a href='?page=2'><img src='img/b2.png' onmouseover=\"this.src='img/b22.png'\" onmouseout=\"this.src='img/b2.png'\" ALT='справочник' border=0></a></div>
 </center>
 </div> 
 
  <div style=\"position: absolute; top:0px; height:75px; width:100%;\">
 <center><div style=\"position: relative; top: 27px; left:105px; \"><a href='?page=3'><img src='img/b3.png' onmouseover=\"this.src='img/b33.png'\" onmouseout=\"this.src='img/b3.png'\" ALT='тестирование' border=0></a></div>
  </center>
 </div>
 
  <div style=\"position: absolute; top:0px; height:75px; width:100%;\">
 <center><div style=\"position: relative; top: 27px; left:277px; \"><a href='?page=4'><img src='img/b4.png' onmouseover=\"this.src='img/b44.png'\" onmouseout=\"this.src='img/b4.png'\" ALT='сервера' border=0></a></div>
  </center>
</div>

но в мазиле так только последняя кнопка юзается
еще делал в одинарном div, но тогда кнопка падала на "ступень вниз"
Чтоб сделать?

p.s. еще откуда-то отступ появился по ширине

Vovan-VE · 13.07.2010, 18:29

Потому что они все друг друга перекрывают, последний сверху. Попробуй ширину не 100%, чтобы каждому было свое место.

@Unick · 13.07.2010, 19:42 **[ТС]**

Сообщение от Vovan-VE

Потому что они все друг друга перекрывают, последний сверху. Попробуй ширину не 100%, чтобы каждому было свое место.

а как мне тогда от центра ставить?
p.s. В опере и эксплоере норм)

Добавлено через 23 минуты
понятно, из за <center></center> у меня отступ шёл, и я не мог в ряд построить, щас придумаю что-то

Добавлено через 24 минуты
вот как я написал

HTML5
1
2
3
4
5
6
7
8
<!--Кнопки-->
 <div style=\"position: absolute; top:0px; height:75px; width:100%;\" align=center>
 <a href='?page=1'><img src='img/b1.png' onmouseover=\"this.src='img/b11.png'\" onmouseout=\"this.src='img/b1.png'\" ALT='подготовка' border=0 style=\"position: relative; top: 25px; left:-54px; \"></a>
 <a href='?page=2'><img src='img/b2.png' onmouseover=\"this.src='img/b22.png'\" onmouseout=\"this.src='img/b2.png'\" ALT='справочник' border=0 style=\"position: relative; top: 27px; left:-26px; \"></a>
 <a href='?page=3'><img src='img/b3.png' onmouseover=\"this.src='img/b33.png'\" onmouseout=\"this.src='img/b3.png'\" ALT='тестирование' border=0 style=\"position: relative; top: 27px; left:2px; \"></a>
 <a href='?page=4'><img src='img/b4.png' onmouseover=\"this.src='img/b44.png'\" onmouseout=\"this.src='img/b4.png'\" ALT='сервера' border=0 style=\"position: relative; top: 27px; left:29px;\"></a>
 
</div>

Vovan-VE · 14.07.2010, 14:28

Вот две штуки для изучения

. Одна фиксированная, другая резиновая.

HTML5
1
2
3
4
5
6
<div class="cp cp1 buttons">
    <span class="b">1</span><span class="b">2</span><span class="b">3</span><span class="b">4</span>
</div>
<div class="cp cp2 buttons">
    <span class="b">1</span><span class="b">2</span><span class="b">3</span><span class="b">4</span>
</div>

CSS
1
2
3
4
5
6
7
8
.cp {position:absolute; top:0; border:#ddd solid 1px; background:#f0f0f0;}
.cp1 {width:400px; left:100px;}
.cp2 {left:20%; right:20%; top:50px;}
 
.buttons {text-align:center;}
.buttons .b {display:inline-block; vertical-align:middle; height:24px; border:#ccc solid 1px; line-height:24px;}
.cp1.buttons .b {width:40px; margin:0 10px;}
.cp2.buttons .b {width:10%; margin:0 4%;}

Новые блоги и статьи Все статьи Все блоги /
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 на бесплатный. . .
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 Использованы. . .

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	13.07.2010, 18:29
	Потому что они все друг друга перекрывают, последний сверху. Попробуй ширину не 100%, чтобы каждому было свое место. 0