[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: поле воода с счетчиком
Basili4
Есть поле вода <input type="text" /> к нему с права на до приделать две стрелочки одна под другой. делаю так



<input class="Edit" type="text" />

<table
class="counter">
<tr>
<td>
<img
src="img/up.png">
</td>
</tr>
<tr>
<td>
<img
src="img/down.png" />
</td>
</tr>
</table>



Но таблица не хочет не как к правому краю лепится все под input лезет



Спустя 5 минут, 22 секунды (22.07.2010 - 14:12) Guest написал(а):
при float:right не лепица к правому краю?)

(трамантана..пароль забыл и бумашку патирял)

Спустя 3 минуты, 50 секунд (22.07.2010 - 14:15) Self написал(а):
<table class="counter">
<tr>
<td><input
class="Edit" type="text" /></td>
<td><img
src="img/up.png"></td>
</tr>
<tr>
<td></td>
<td><img
src="img/down.png" /></td>
</tr>
</table>

Спустя 10 секунд (22.07.2010 - 14:16) Basili4 написал(а):
вот правила для
класса counter

.counter
{
float:right;
border: 0;
margin: 0px;
}

не лепица sad.gif

Спустя 2 минуты, 58 секунд (22.07.2010 - 14:19) Basili4 написал(а):
Self
так конечно прилепится только рисунок down.png будет на другой строке не красиво мне надо чтобы обе стрелочки были напротив input-a

Спустя 5 минут, 24 секунды (22.07.2010 - 14:24) Self написал(а):
Цитата
на до приделать две стрелочки одна под другой

?
<table class="counter">
<tr>
<td><input
class="Edit" type="text" /></td>
<td><img
src="img/up.png"></td>
<td><img
src="img/down.png" /></td>
</tr>
</table>

Спустя 3 минуты, 39 секунд (22.07.2010 - 14:28) Basili4 написал(а):
вот как получилось

<table class="counter">
<tr>
<td
rowspan=2><input class="Edit" type="text" /></td>
<td><img
src="img/up.png"></td>
</tr>
<tr>
<td><img
src="img/down.png" /></td>
</tr>
</table>


Спустя 14 минут, 18 секунд (22.07.2010 - 14:42) Basili4 написал(а):
были косяки с версткой так получилось вопще блеск

<table>
<tr>
<td>
<input
type="text" />
</td>

<td>
<table>
<tr><td><img
src="up.png"></td></tr>
<tr><td><img
src="down.png"></td></tr>
</table>
</td>
</tr>
</table>




Спустя 9 минут, 46 секунд (22.07.2010 - 14:52) sergeiss написал(а):
Basili4 - с точки зрения здравого смысла ты прав smile.gif Но сейчас прибегут противники таблиц и сторонники ДИВов и скажут, что ты был не прав wink.gif

А на самом деле, есть еще один вариант. Достаточно "красивый" как с точки зрения верстки, так и с программерской.
Делаешь не 2 картинки, а одну. На которой рисуешь обе кнопки. И делаешь МАПы для этой картинки. Которые можешь использовать, например, для создания ссылок или работы с JS.
Большой плюс в этом подходе тот, что тебе нужно позиционировать только одну картинку, а не две. А это проще сделать. Хоть таблицами, хоть ДИВами.

Спустя 2 минуты, 1 секунда (22.07.2010 - 14:54) Basili4 написал(а):
sergeiss
Да я вот мапы к картинкам не когда не делал sad.gif вот

Спустя 5 минут, 29 секунд (22.07.2010 - 14:59) inpost написал(а):
Float ты делай именно для дивов, там он работает красиво !
для колонки с текстом: <td valign="middle">
а вообще, зачем лишний код? Вместо целой второй таблицы можно просто:
<img src="up.png"><br><img src="down.png">
Собственно, вот и код:
<table><tr>
<
td valign="middle"><input type="text"></td>
<
td><img src="up.png"><br><img src="down.png"></td>
<
tr></table>

Спустя 2 минуты, 49 секунд (22.07.2010 - 15:02) sergeiss написал(а):
Цитата (Basili4 @ 22.07.2010 - 15:54)
Да я вот мапы к картинкам не когда не делал

Это намного проще, чем ты думаешь biggrin.gif
Вот иди сюда, например: http://phpforum.ru/index.php?showtopic=22888&hl=. Там найдешь по ссылкам картинки красивые. Посмотри код страниц и сделай что-то подобное... Один раз сделаешь руками - помнить будешь уже всегда.

Спустя 1 минута, 17 секунд (22.07.2010 - 15:03) inpost написал(а):
sergeiss Дорогой эксперт, зачем Вы жизнь себе утруждаете? Тут ведь вообще легко все smile.gif

Спустя 3 минуты, 24 секунды (22.07.2010 - 15:07) sergeiss написал(а):
Цитата (inpost @ 22.07.2010 - 16:03)
sergeiss Дорогой эксперт, зачем Вы жизнь себе утруждаете?

Я, утруждаю? Нисколько smile.gif Я просто предлагаю более универсальное решение. Тем более, что человек не знает про МАПы. И не будет их использовать даже там, где с ними проще.
Так что пусть попробует разные варианты и решит, что лучше.

А в другом случае надо будет сделать нечто типа 4-х стрелок (влево, вправо, вверх, вниз) плюс кнопку в центре между ними... И что - ты будешь позиционировать 5 объектов? А не проще ли (и не красивее ли) будет сделать одну картинку и разметить её МАПами?

PS. Кстати. А что сложного в МАПах, чтобы "утруждаться"? Плюсов много, а какие сложности?

Спустя 4 минуты, 11 секунд (22.07.2010 - 15:11) inpost написал(а):
sergeiss Ученье - свет! Но я больше склонен к решению проблем по мере их появления =)
А сложности в определении координат, а далее в создании условий. Я быстрее вставлю картинку и попью чайку, чем мапу отредактирую, а потом ещё и проверять в каждом браузере, чтоб ровно было, а они все такие кривые, конечно кроме моего ИЕ7...
Basili4 http://www.htmlbook.ru , мне нравится этот сайт, там многое есть про html, css, js.

Спустя 3 минуты, 37 секунд (22.07.2010 - 15:14) Basili4 написал(а):
sergeiss
Мапы действительно отличный инструмент. Единственно что мне не подходит в них нельзя заменять только выбранную часть. картинки а хотелось ты создать эффект нажатия. А при использовании диаграмм использовать мап самое то. Спасибо за ссылку

Спустя 5 минут, 38 секунд (22.07.2010 - 15:20) sergeiss написал(а):
Цитата (inpost @ 22.07.2010 - 16:11)
Я быстрее вставлю картинку и попью чайку, чем мапу отредактирую...

А ты не поленись разок, сделай smile.gif И в другой раз сделаешь МАПу и будешь пить чаёк, еще более удовлетворённый собой wink.gif
И кстати. Если пользоваться "правильными" редакторами, то там эти МАПы для готовых картинок можно нарисовать реально за несколько секунд. По той ссылке, что я дал (на свою тему), МАПы рисуются динамически, в зависимости от содержания картинки, с автоматическим определением местоположения. И всё равно быстро это делается.

И еще - в разных браузерах они будут одинаково правильно работать.

Basili4 - всё можно заменить.... Можно сделать супер-красивые эффекты нажатия! У тебя же есть обработчик для каждого МАПа. Вот там и меняй картинку (в обработчике нажания), единую для всех кнопок, сколько бы их ни было... Для нажатия одной кнопки - одна картинка, для нажатия второй кнопки - вторая картинка. Ты же можешь заодно и "затемнить" ненажатую кнопку. Да и "объемные" кнопки можешь нарисовать. И можешь сделать эффект плавного возврата нажатой кнопки в исходное состояние, скажем, через 1-1,5 секунды.
Только это уже не к ПХП имеет отношение больше, а к работе в графическом редакторе и работе с JS.

Спустя 9 минут, 13 секунд (22.07.2010 - 15:29) Basili4 написал(а):
sergeiss
А можно ссылку на то как это сделать очень мне прям нужно порой кучу картинок рисовать
Цитата (sergeiss @ 22.07.2010 - 16:20)
Можно сделать супер-красивые эффекты нажатия!


Спустя 15 минут, 20 секунд (22.07.2010 - 15:45) sergeiss написал(а):
Ну вот смотри, я набросал "с ходу" примерчик, с небольшой помощью DreamWeaver 8.

<img id="testclick" src="../Pictures/RMS-BFI.jpg" width="120" height="76" border="0" usemap="#Map" />
<map
name="Map" id="Map">
<area
shape="rect" coords="2,0,60,75" onclick="showpict('pressed_left')" /><area shape="rect" coords="62,0,118,75" onclick="showpict('pressed_right')" />
</map>



Есть картинка, есть 2 МАПа: справа и слева. Оба прямоугольные. При клике на каждый из них вызывается некая функция. Которая выполняет некоторое действие, а перед этим меняет картинку для именно этого IMG на какую-то другую. Только - того же размера!!!
Что на другой картинке? Допустим, нажата левая кнопка. Тогда на 2-й картинке нарисована нажатая левая кнопка. Правая может оставаться такой же, либо мы ее тоже можем изменять. Затем можно сделать таймер, который через небольшой интервал времени восстановит начальную картинку.
При нажатии правого МАПа вызываем 3-ю картинку. Где нарисована нажатой правая кнопка. Которая также будет заменена на начальную через некоторый интервал времени.
Можно сделать подобным образом, например, радиокнопки smile.gif Целый ряд, либо расположить их по кругу или по синусоиде... Всё будет ограничено только фантазией автора.

Далее. Можно сделать события типа onmouseover и также выводить еще какие-то картинки... И не обязательно картинки, между прочим. При прохождении мышки над МАПом ты можешь выводить какой-то текст рядом с инпутом (см. по моей ссылке - там сделано подобное в упрощенном варианте).

Короче говоря... Идею ты понял, я думаю. А дальше - дерзай, твори, экспериметируй.

Спустя 3 минуты, 51 секунда (22.07.2010 - 15:49) Basili4 написал(а):
sergeiss
Да понял еще раз Спасибо буду разбираться


_____________
Цитата
От постоянного сидения рядом с клавиатурой начинает болеть спина.


Делаю сайты, пишу скрипты php, js.
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.