maleficmax
-
Posts
19 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by maleficmax
-
-
У меня похожая проблема.
Есть изображение - назовем его Карта, - на которое наносятся пометки (города). Выглядит это вот так:
<div style="">
<img src="map.jpg" />
</div>
<div style="position:relative; left:305px; top:-460px;">
<img src="dot.png" alt="First Dot" />
</div>
<div style="position:relative; left:872px; top:-100px;">
<img src="dot.png" alt="Second Dot" />
</div>
<div style="position:relative; left:-300px">
<img src="way_1.png" alt="First way" />
</div>Последний див - это спрятанный за экран блок, который я как-то хочу потом показывать (менять его местоположение) при наведении на одну из точек. Но пока не в этом вопрос.
После всего этого безобразия, естественно остаётся пробел, равный высоте трех элементов, у которых я сменил позицию.
Ну да и с этим справился, добавив вот этот обрамляющий див:
<div id="map" style="margin-bottom:-260px; margin-right: 872px;">
............
............
</div>как видно, есть еще margin-right: 872px;, так вот его я вставил чтоб убрать огромный пустой блок справа, который я не совсем понимаю как образовался (хотя догадываюсь)...
Итак, вопрос. Судя по всему, этот выход не оптимален, так как ИЕ margin-right: 872px; воспринимать отказывается.
Где я ошибся?
-
Влад, большое спасибо!
-
Да, это я заметил, спасибо! Ну а как мне поднять текст над изображениями тогда? з-индексы не помогли (
-
Вот код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang=ru>
<head>
<title>New Land</title>
<META NAME="Keywords" CONTENT="—————-">
<META NAME="Description" CONTENT="————--">
</head>
<style type="text/css">
body {background-color: black;
margin: 0 0 0 0;}
.text {position: fixed;
top: 20px;
margin-left: 150px;
margin-right: 150px;
font-family: Arial;
font-size: 12pt;
color: white;
text-align: justify;"}
</style>
<body>
<div style="position: fixed; left: 0; top: 0;">
<img src="l.png"><br><img src="l.png">
</div>
<div style="position: fixed; right: 0; top: 0;">
<img src="r.png"><br><img src="r.png">
</div>
<div class=text>
авырол вырыаовлы ырвоыл ы ылв оыр оыл ыл ыовлыавырол вырыаовлы ырвоыл ы ылв оыр оыл ыл ыовлыавырол вырыаовлы ырвоыл ы ылв оыр оыл ыл ыовлыавырол вырыаовлы ырвоыл ы ылв оыр оыл ыл ыовлы
<br><br>
авырол вырыаовлы ырвоыл ы ылв оыр оыл ыл ыовлыавырол вырыаовлы ырвоыл ы ылв оыр оыл ыл ыовлыавырол вырыаовлы ырвоыл ы ылв оыр оыл ыл ыовлыавырол вырыаовлы ырвоыл ы ылв оыр оыл ыл ыовлыавырол вырыаовлы ырвоыл ы ылв оыр оыл ыл ыовлыавырол вырыаовлы ырвоыл ы ылв оыр оыл ыл ыовлы
</div>
</body>
</html>Собственно, по сторонам экрана - картинки, на которые немного заезжает отцентраленная надпись...
Ничего сложного, но такой вот косяк: в ИЕ (только в нем!) нет отступа текста от правой стороны браузера. Даже более того, текст немного заезжает за границу экрана.
-
<select onchange='document.getElementById("to_inviz").style.display = "inline";'> laugh.gif
диву надо block задавать
Черт возьми, да! Это я виноват, крутил-вертел, вот и отвалилось (=
там по идее нужно создавать элементы, а не тупо показывать сотню из тысяч)), ведь потом это все должно как-то обрабатываться...Ну в принципе да, если селект != дефолту -- тогда начинаю читать данные с выпавшего блока... Если я не ошибаюсь, это реализуемо. Я не прав?
О, кстати... Есть ли возможность сделать что-то типа
Если Селект = "Нет значения" тогда {скрыть нафиг форму}
?
Или вариант проще, но тоже интересный... По нажатии кнопки - скрывать блок... //разобрался вроде
-
в статичном виде, когда всё видно - нет проблем ни у одного браузера
-
это упрощенно то, что скрыто и будет показываться:
<div id="to_inviz">
//тут содержимое
</div>
это - где селект:
<select onchange='document.getElementById("to_inviz").style.display = "inline";'>
вобщем оно работает... но!
1) показывается в ФФ3 некорректно. А именно, сначала идут сво-ва дива, как цвет фона, но частично, а затем и вовсе пропадают... Щас скрин попробую
2) показывается в ИЕ некорректно
должно так:
-
вешай на onchange селекта функцию отображения формы.
мда, я понимаю, что на событие изменения селекта мне нужно видимость формы ставить.
пробл именно в том, что я не знаю как этого сделать.
я не знаю джаваскрипта.
-
Собственно, я почти ноль (стремлюсь к нулю) на джаваскрипте, но появилась необходимость/желание реализовать такую весч:
Есть три селекта. При выборе в одном из них чего-то, отличного от дефолта, под селектом/где-то-еще открывается блок с более детальными вопросами.
Заранее благодарен за помощ!
-
Улыбка скоро перестанет сходить с моего лица)))
Спасибо всем, ищу решение, думаю вопросы еще будут...
А htc говорят штука тормозная страшно...
Это есть быть правда?
-
Скрипты это бяка, я хочу от них полностью отойти...
А тот вариант предусматривает скриптование с ИЕ
мне нужно чисто ЦСС...
И мне кажется что я банально торможу и не вижу очевидного
-
Или быть может кто-то подскажет где найти аналогичное (ну похожее... может без третьего уровня вкладок) меню, потому как я сдаюсь
-
Вот код меню, взятый с некоторого сайта.
Мне необходимо поместить это меню в HTML страницу, но в таком случае пропадает "выпадаемость"
Видать я еще маловат, чтоб дойти до ответа...
Ваши варианты?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Professional series drop#2</title>
<style type="text/css">
/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_drop2 */
.preload2 {background: url(prodrop2/button4.gif);}
.menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(prodrop2/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:40px;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(prodrop2/down.gif) no-repeat right top;}
.menu2 li a.top_link:hover {color:#fff; background: url(prodrop2/button4.gif) no-repeat;}
.menu2 li a.top_link:hover span {background:url(prodrop2/button4.gif) no-repeat right top;}
.menu2 li a.top_link:hover span.down {background:url(prodrop2/button4a.gif) no-repeat right top;}
.menu2 li:hover > a.top_link {color:#fff; background: url(prodrop2/button4.gif) no-repeat;}
.menu2 li:hover > a.top_link span {background:url(prodrop2/button4.gif) no-repeat right top;}
.menu2 li:hover > a.top_link span.down {background:url(prodrop2/button4a.gif) no-repeat right top;}
.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
/* Default link styling */
/* Style the list OR link hover. Depends on which browser is used */
.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}
/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu2 :hover ul.sub {left:2px; top:40px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:93px; height:auto;}
.menu2 :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub li a {display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu2 :hover ul.sub li a.fly {background:#fff url(prodrop2/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub li a.fly:hover {background:#4ab url(prodrop2/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(prodrop2/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:93px; z-index:200; height:auto;}
</style>
</head>
<body>
<span class="preload2"></span>
<ul class="menu2">
<li class="top"><a href="http://www.cssplay.co.uk" id="home" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="http://www.cssplay.co.uk" id="products" class="top_link"><span class="down">Products</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="../menu/" class="fly">Cameras<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/">Nikon</a></li>
<li><a href="../ie/">Minolta</a></li>
<li><a href="../opacity/">Pentax</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="mid"><a href="../boxes/" class="fly">Lenses<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/">Wide Angle</a></li>
<li><a href="../ie/">Standard</a></li>
<li><a href="../opacity/">Telephoto</a></li>
<li><a href="../menu/" class="fly">Zoom<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/">35mm to 125mm</a></li>
<li><a href="../opacity/">50mm to 250mm</a></li>
<li><a href="../menu/">125mm to 500mm</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../boxes/">Mirror</a></li>
<li><a href="../opacity/" class="fly">Non standard<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/">Bayonet mount</a></li>
<li><a href="../opacity/">Screw mount</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../mozilla/">Flash Guns</a></li>
<li><a href="../ie/">Tripods</a></li>
<li><a href="../opacity/">Filters</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="http://www.cssplay.co.uk" id="services" class="top_link"><span class="down">Services</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="../menu/">Printing</a></li>
<li><a href="../layouts/">Photo Framing</a></li>
<li><a href="../boxes/">Retouching</a></li>
<li><a href="../mozilla/">Archiving</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="http://www.cssplay.co.uk" id="contacts" class="top_link"><span class="down">Contacts</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="../layouts/">Support</a></li>
<li><a href="../boxes/" class="fly">Sales<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/">USA</a></li>
<li><a href="../ie/">Canadian</a></li>
<li><a href="../opacity/">South American</a></li>
<li><a href="../menu/" class="fly">European<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/" class="fly">British<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../ie/">London</a></li>
<li><a href="../menu/">Liverpool</a></li>
<li><a href="../boxes/">Glasgow</a></li>
<li><a href="../opacity/" class="fly">Bristol<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../ie/">Redland</a></li>
<li><a href="../opacity/">Hanham</a></li>
<li><a href="../menu/">Eastville</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../layouts/">Cardiff</a></li>
<li><a href="../mozilla/">Belfast</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../opacity/">French</a></li>
<li><a href="../menu/">German</a></li>
<li><a href="../boxes/">Spanish</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../boxes/">Australian</a></li>
<li><a href="../boxes/">Asian</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../mozilla/">Buying</a></li>
<li><a href="../ie/">Photographers</a></li>
<li><a href="../opacity/">Stockist</a></li>
<li><a href="../menu/">General</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="http://www.cssplay.co.uk" id="shop" class="top_link"><span class="down">Shop</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="../ie/">Online</a></li>
<li><a href="../opacity/">Catalogue</a></li>
<li><a href="../menu/">Mail Order</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="http://www.cssplay.co.uk" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>
fsdfs
</body>
</html> -
Дублирую тему с раздела Таблицы, вдруг здесь помощи найду...
Собственно, я полагаю вопрос многим знаком, но я таки обьясню... Существует эта страничка, которая в HTML тянется в высоту за счет средней ячейки (ряда). Однако, на станице я применяю меню, которое требует XHTML. И тут начинаются проблемы. Ячейка НЕ ТЯНЕТСЯ в XHTML!!!!!! И никак я не могу этому помочь! ((( По крайней мере пока что...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>
XXXXXXXXXX
</title>
<meta http-equiv="Content-Type" content="text/html; charset=cp1251" />
<style type="text/css">
body {
height: 100%;
margin: 0 0 0 0; }
.stretch {
height: 100%;
width: 100%;
border-collapse: collapse;}
.stretch tr td {
border: 1px solid #000;}
</style>
</head>
<body>
<table class="stretch">
<tr height="50">
<td width="20%"></td>
<td width="60%"></td>
<td width="20%"></td>
</tr>
<tr>
<td> </td>
<td>I WANT TO STRETCH!!!!!!!!!!!!</td>
<td> </td>
</tr>
<tr height="50">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</HTML>Если кому-то известен ответ, произнесите его плиз!
Или хоть обматерите меня, идиота)))
-
Собственно, я полагаю вопрос многим ясен, но я таки обьясню... Существует эта страничка, которая в HTML тянется в высоту за счет средней ячейки (ряда). Однако, на станице я применяю меню, которое требует XHTML. И тут начинаются проблемы. Ячейка НЕ ТЯНЕТСЯ в XHTML!!!!!! И никак я не могу этому помочь! ((( По крайней мере пока что...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>
XXXXXXXXXX
</title>
<meta http-equiv="Content-Type" content="text/html; charset=cp1251" />
<style type="text/css">
body {
height: 100%;
margin: 0 0 0 0; }
.stretch {
height: 100%;
width: 100%;
border-collapse: collapse;}
.stretch tr td {
border: 1px solid #000;}
</style>
</head>
<body>
<table class="stretch">
<tr height="50">
<td width="20%"></td>
<td width="60%"></td>
<td width="20%"></td>
</tr>
<tr>
<td> </td>
<td>I WANT TO STRETCH!!!!!!!!!!!!</td>
<td> </td>
</tr>
<tr height="50">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</HTML>Если кому-то известен ответ, произнесите его плиз!
-
да, согласен, но стили вс? же оставлю в коде страницы, так как не всегда приятно грузятся из внешнего файла...
по крайней мере для меню
а так - спасибо
-
А можно немного конкретнее, в чем состоит хаос и в чем он выражается в ЦСС конкретно
Заранее благодарен!
Я не так давно пишу в хтмл, поэтому совету-другому буду рад.
И огромное спасибо за совет! Помогло!
-
Меню написана на стилях, ссылка ниже...
в експлорере и фоксе - вс? отлично (если не считать, что размеры блин разные), а опера начинает менять размер ячейки, в которой меню находится... или еще чего-то...:mad:
кароче:
www.autokraz.com.ua/new/main4.htm
По разному размещаются точки отнисительно карты в ИЕ ФФ и О
in JavaScript
Posted
Итак, есть карта, которая находится в контексте страницы.
На карты наносятся пометки-города.
Дабы добавить гибкости, координаты точек вычисляются джаваскриптом как "координаты до карты" + "сдвиг относительно карты"
Так вот, конструкция сия не работает в ИЕ (точки позиционирутся относительно угла окна, а не карты), отлично работает в ФФ3. А Опера первый раз сдвинула точки вообще вниз вправо (чересчур), а после обновления расположила нормально.
Вот страница: http://autokraz.com.ua/rus/service/sto_ukr.php
Имеющийся функционал - не полный, будуд всплывающие блоки, потому не судите "лишний" код.
И немного сюда:
1. функции расчета координат и расположения точки:
2. вставка точек идет так: