Jump to content

clavin

User
 View Profile  See their activity

  • Posts

    200

  • Joined

  • Last visited

  • Days Won

    2

 Content Type 

Everything posted by clavin

  1. clavin
    Куда мои близорукие глаза смотрели? Уже поправил. Там в #footer li стоял нижний margin в 20px. Замечено мною, что IE глючно работает с нижними полями. Исправил задав #footer li {margin:20px 3px 0 3px;} #footer li { float:left; color:#cc99cc; margin:20px 3px 0 3px; display:inline; float:left; font:100%/20px "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 10px !important; }
  2. clavin
    Помогите, пожалуйста. Верстаю страницу. В футере есть две строчки, одна над другой. Я их сделал дивами определённой высоты (их общая ширина такая, что не превышает высоту футера). Во всех браузерах что-то не так. Только в ie7 строчки не уезжают за границы футера. В остальных есть смещение вниз дива #copyright. Если ставлю line-height:0, то во всех браузерах исправляется, а в ie7 текст пропадает. Что здесь не так? С помощью Firebug-а в fitefox попробовал поотключать свойства у дива #copyright, так если у него убрать ширину, то всё исправляется <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <title>В футере последний див в IE7 отображается не так</title> <style type="text/css" media="all"> * { margin: 0; padding: 0; border: 0; } body { padding: 0; color: #000; width:100%; } #footer { height:69px; width:1000px; } #footer ul { height:50px; list-style:none; width:380px; margin:0 auto; } #footer li { float:left; color:#cc99cc; margin:20px 3px; display:block; float:left; font:100%/20px "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 10px !important; } #footer li.cutter { font-size:10px; } #footer li a{ color:#cc99cc; text-decoration:none; text-align:center; } #copyright { clear: both; float:none; height:18px; font-size: 12px !important; color:#cc99cc; width:350px; margin:0 auto; } </style> </head> <body> <div id="footer"> <ul> <li><a href="index.html">ITEM 1</a></li> <li class="cutter">|</li> <li><a href="index.html">ITEM 2</a></li> <li class="cutter">|</li> <li><a href="index.html">ITEM 1</a></li> <li class="cutter">|</li> <li><a href="index.html">ITEM 1</a></li> <li class="cutter">|</li> <li><a href="index.html">ITEM 1</a></li> </ul> <div id="copyright">Копирайт здесь!</div> </div> </body> </html>
  3. clavin

    font:100%/40px

    clavin replied to clavin's question in HTML Coding

    Спасибо за ответы
  4. clavin

    font:100%/40px

    clavin posted a question in HTML Coding

    Встретил такую запись для обозначения шрифта: font:100%/40px "Trebuchet MS", Arial, Helvetica, sans-serif; Что значит font:100%/40px? Это ошибка или хак?
  5. clavin
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=cp1251" /> <meta http-equiv="Content-Language" content="ru" /> <title></title> <style type="text/css" media="all"> * {margin: 0; padding: 0;} * html #main {height: 100%;} html {height:100%;} body {height: 100%; background-color:#ccc;} #main {min-height: 100%; margin-bottom: -30px; background-color:red;} #footer {height: 30px; background-color:yellow; clear: both;} #main-empty {height: 40px; clear: both;} </style> </head> <body> <div id="main"> #main <br /> #main <br /> #main <br /> #main <br /> #main <br /> #main <br /> <div id="main-empty"></div> </div> <div id="footer">#footer</div> </body> </html> В Opere 9 и 10 данный макет при загрузке не будет на всю высоту окна. При ресайзе окна происходит исправление и получается как и в бругих браузерах. Подскажите, пожалуйста, лекарство от этой причуды конкретно для браузера Opera. p.s. в старых версиях оперы (7 версия) почему-то такого явления нет.
  6. clavin
    в теге <style> не надо применять комментарии вида <!-- -->. Они источник глюков.
  7. clavin
    Если для внутреннего дива указать 100%, то ширина будет по размеру окна браузера, если не ошибаюсь. Может есть способ указать размер относительно родительского элемента?
  8. clavin
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=cp1251" /> <meta http-equiv="Content-Language" content="ru" /> <style type="text/css" media="all"> * {padding:0; margin:0;} #gor1 {border:3px solid green;} #gor2 {border:3px solid red; overflow:auto;} </style> </head> <body> <div id="gor1"> <h1><nobr>Длинный текст заголовка</nobr></h1> <div id="gor2">text text</div> </div> </body> </html> во всех w3c-браузерах див #gor2 имеет ширину родительского контейнера, если уменьшить размер окна. В ie6 этот див уменьшается вместе с размером окна. Есть ли способ (или может хак), чтобы в интернет эксплорере было как в других браузерах?
  9. clavin
    Ширина не может зависеть от содержимого, особенно если она установлена как width:496px; В других браузерах всё нормально. Это баг.
  10. clavin
    Почему при изменении шрифта для тега body таким способом font-family:Comic Sans MS, sans-serif, Arial, Tahoma, Helvetica; в IE6 разметка портится из-за того, что некоторые дивы меняют ширину? Конкретно: на 3-4 пикселя увеличиваются ширины width дивов с текстом, если установлен шрифт Comic Sans MS. DOCTYPE стоит как xhtml transition. Это баг?
  11. clavin
    А что об этом говорит w3c? Это стандарт?
  12. clavin
    Ржунимагу Тестирую в IE6, FF, Opera. Chrome, Safari По ссылке на страницу, которую я дал, наверное, удачная реализация, не заметил, что этот лайтбокс работает и в FF и IE8. Но в Chrome не работает. Ищу универсальное решение, которое работало бы во всех браузерах. Вообще реализаций лайтбокса очень много, возможно какой-то из них полностью кроссбраузерный. Хочется самостоятельно узнать эту фичу %) Возможно этой теме место в разделе про Javascript
  13. clavin
    Так я о том и спрашиваю. Каким образом определить ширину этого затемнённого фона на Javascript. Второй вопрос: можно ли это сделать без javascript, сделав такую хитрую разметку и задав такие свойства для mbOverlay, чтобы тёмный фон был на всю ширину страницы с прокруткой. Считаю, что данная тема стоит на стыке и разметки и javascript
  14. clavin
    Здравствуйте. Хотел бы выяснить один вопрос, стоящий на грани разметки и javascript. Есть такой эффект на javascript, называемый lightbox, и служащий для того, чтобы при щелчке на миниатюру изображения открывалось изображение в реальном размере. Пример такого эффекта можно посмотреть, например, на этой странице http://rostovstrojtorg.tiu.ru/p176712-gips...agostojkij.html (кликните на изображение) или же скачайте данный архив http://ifolder.ru/17079448, распакуйте все файлы и откройте страницу index.html Эффект работает нормально, но есть одна некрасивость. Когда эффект запущен и в центре появилось изображение, то если уменьшить размеры окна до появление горизонтальных полос прокрутки, а потом прокрутить бегунок направо, мы увидим, что эта область осталась незатемнённой. Это не очень красиво. Вот как делается затемнение страницы: Где-то внизу перед закрывающим тегом </body> размещается элемент div, служащий тёмным экраном, который после запуска эффекта делается видимым, а его высота задаётся высоте всей страницы вместе с прокруткой. В html это выглядит примерно так <body> <div id="content"> <!-- здесь находится весь контент и разметка страницы--> </div> <div id="mbOverlay" style="overflow: hidden; visibility: hidden; opacity: 0; height: 0px;" /> </body> После щелчка по ссылке и открытия большой картинки код выглядит примерно так <body> <div id="content"> <!-- здесь находится весь контент и разметка страницы--> </div> <div id="mbOverlay" style="overflow: hidden; visibility: visible; opacity: 0.7; height: 3541px; top: 0px;" /> </body> Элемент mbOverlay имеет более сложную таблицу стилей, которая задаётся из javascript. Тут возникает вопрос по разметке на html. Хотелось бы, чтобы тёмный экран корректно распространялся на всю ширину при любой разметке: и дивами и таблицами. Наверное вопрос решается только с помощью javascript. Т.е. для ширины элемента mbOverlay необходимо будет указать значение в пикселях при ресайзе окна. Размер окна меняется, на javascript подсчитывается нужная ширина и подставляется как ширина для элемента mbOverlay. Кстати, всю высоту страницы вместе с прокруткой можно определить таким образом: document.body.scrollHeight. А вот с шириной у меня ничего не получается. Может кто знает как решается данная задача? Самый оптимальный вариант будет, если при ресайзе окна не надо применять javascript и ширина затемнённого блока mbOverlay будет подгоняется автоматически html-разметкой.
  15. clavin
    padding и margin не работают как надо Посмотрел на форуме разные решения, может что-то универсальное получится сверстать
  16. clavin
    Здравствуйте все те, кто борется с браузерами ради корректной разметки. Есть задача сделать в браузере рамку на весь тег <body>. Эта рамка со всех четырёх сторон должна примыкать к окну документа и при изменении размеров окна должна оставаться примыкать. Т.е. желательно, чтобы полос прокрутки не возникало и практически при любом размере окна мы видили рамку. Сделал такую разметку. body имеет цвет lime, чтобы его проще можно было различить на странице. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Test</title> <style type="text/css"> * {padding:0; margin:0;} body {padding:0; margin:0; background-color: lime;} #main {width:100%; height:100%; border:0px; background-color: red;} #main2 {margin: 10px; background-color: blue; height:100%;} </style> </head> <body> <div id="main"> <div id="main2"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> </div> </body> </html> Нормально разметка оторажается в ie6, в остальных браузерах сверху нет красной рамки. В Firefox и снизу рамка не получается. Как это можно исправить?
  17. clavin
    Старая... год не знаю
  18. clavin
    В библии Javascript говорится, чтобы обеспечить совместимость с будущими версиями javascript, лучше назначать два атрибута id и name. Хотя ещё не разу не проверял свой код на валидность javascript (если есть такие валидаторы).
  19. clavin
    1. Для кроссбраузерности рекомендуется назначать атрибутам name и id одинаковые имена. Лишним не будет... 2. А у меня разве не так? Этот блок отображается как блочный элемент и затем, я думаю, должен оставаться блочным. Просмотрел кучу скриптов выпадающих меню и у всех почему-то работает как надо
  20. clavin
    Делаю такое простое меню для выбора города. В элементе div с названием gorod_div содержится само всплывающее меню. Изначально оно у меня скрыто и появляется только при клике на соответствующий текст. <div style="font-weight: bold; color: rgb(255, 255, 255); background-color:red;"> <span style="background-color:blue;" name="gorod_all" id="gorod_all" onclick="func_gorod_all();"> выбрать город </span> </div> <div style="display:none; width:100px; height:100px; position:absolute; left:600px; background-color:red;" name="gorod_div" id="gorod_div" onmouseout="func_gorod_hide();"> <a href="" style="display:block;">Москва</a> <a href="" style="display:block;">Санкт-Петербург</a> <a href="" style="display:block;">другие города</a> </div> Это функции, убирающие и показывающие меню. function func_gorod_all() { var left_pos=document.getElementById('gorod_all').offsetLeft; document.getElementById('gorod_div').style.display="block"; document.getElementById('gorod_div').style.left=left_pos; } function func_gorod_hide() { document.getElementById('gorod_div').style.display="none"; } Возникает проблема при убирании этого меню. По нормальному надо, чтобы при любом положении мыши над этим выпадающим меню (div с id="gorod_div") меню отображалось, а убиралось только тогда, когда мышь уходит за пределы элемента div. Но на самом деле меню скрывается, когда указатель мыши отводится от теста (я это исправил, введя для ссылок style="display:block;"). Но все равно получается браузеры "считают", что событие onmouseout назначено для каждой ссылки в отдельности. Не получается свободное перемещение указателя мыши по всем ссылкам меню. Меню закрывается при событии onmouseout для каждой ссылки в отдельности. Как делаются меню в таких случаях?
  21. clavin
    Я сделал нормальную форму, в которой при выборе кнопки типа type="radio" появляются новые поля формы. Реализовал всё с помощью DHTML. Сначала скрыл поля, чтобы они не отображались (задал с помощью CSS свойство display:none;). При выборе нужного переключателя задействуются функции javascript, которые назначают полям свойства display:none или display:block в зависимости от того, что надо отобразить в браузере. Всё работает отлично, но чисто визуально резкая смена полей выглядит как-то не очень. Хотел бы сделать более привлекательно, чтобы поля постепенно проявлялись, примерно как сделано на сайте www.localhome.ru. Там есть элементы на странице, которые сменяются в зависимости от того, какую ссылку нажали. И сменяются они не мгновенно, а медленно провяляются на своём месте. Наверное, это сделано на Ajaxе. Может подскажите какой код надо вставить на страницу, чтобы иметь такой же эффект?
  22. clavin
    А почему бы и нет? Как по другому их прятать предлагаете?
  23. clavin
    Спасибо за пример. Я так понимаю надо просто назначить переключателям radio реакции на события, а на странице написать блоки формы, которые будут скрываться и отображаться в зависимости от этих событий. Здесь ещё не хватает события, когда с элемента <input> убирается переключатель. Всё просто оказывается Читал на сайтах, что есть разновидности JavaScript, которые по разному поддерживаются браузерами. Тут главный вопрос: как сделать кроссбраузерность для такой несложной вещи. Имею общее представление Может кто подскажет cссылки о различиях в разных версиях JavaScript, а также об устаревшем JavaScript (читал про устаревшие элементы в языке), чтобы новичку было просто разобраться в этом вопросе и посмотреть только самое необходимое? Делаю кроссбраузерный сайт на xhtml1.0 transitional.
  24. clavin
    Как сделать интерактивную форму, чтобы при выборе какого-то элемента (например <input type="radio">) в форме появилось новое поле (например текстовое или ещё какое - это не очень важно). Посетитель сайта может в это новое поле ввести значение и вместе с остальными параметрами отправить на сервер. Т.е. форма таким образом интерактивно изменяется. JavaScript совсем не знаю, поэтому спрашиваю, как можно реализовать такое.
  25. clavin
    Это не снег, а пепел какой-то... :-)
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept