Jump to content

smoke1

Newbie
 View Profile  See their activity

  • Posts

    12

  • Joined

  • Last visited

smoke1's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. smoke1
    Немного изменил код и получилось следующее http://demo.oceanit.ru/csstest2.html Работает в FF2, IE6, O9. К сожалению нету возможности проверить в IE7 Без использования javascript, только css. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <style type="text/css"> .ellipsis div { white-space:nowrap; text-overflow:ellipsis; /* for internet explorer */ -o-text-overflow:ellipsis; /* for opera */ overflow:hidden; width:190px; } html>body .ellipsis { line-height: 1.2em; height: 1.2em; white-space: nowrap; overflow: hidden; } .ellipsis > DIV:first-child { overflow: visible !important; width: auto !important; float: left; } .ellipsis > DIV + SPAN { display: block; float: right; margin-top: -1.2em; } .ellipsis > DIV + SPAN::after { background-color: white; content: '...'; } </style> </head> <body> <div style="width: 190px; border: 1px solid black;"> <div class="ellipsis"> <div></div> <span></span> </div> <div class="ellipsis"> <div>0123456789 abcdefg</div> <span></span> </div> <div class="ellipsis"> <div>0123456789 abcdefgh</div> <span></span> </div> <div class="ellipsis"> <div>0123456789 abcdefghi</div> <span></span> </div> <div class="ellipsis"> <div>0123456789 abcdefghij</div> <span></span> </div> <div class="ellipsis"> <div>0123456789 abcdefghijk</div> <span></span> </div> <div class="ellipsis"> <div>0123456789 abcdefghijkl</div> <span></span> </div> <div class="ellipsis"> <div>0123456789 abcdefghijklm</div> <span></span> </div> <div class="ellipsis"> <div>0123456789 abcdefghijklmn</div> <span></span> </div> <div class="ellipsis"> <div>0123456789 abcdefghijklmno</div> <span></span> </div> <div class="ellipsis"> <div>0123456789 abcdefghijklmnop</div> <span></span> </div> <div class="ellipsis"> <div>0123456789 abcdefghijklmnopq</div> <span></span> </div> <div class="ellipsis"> <div>0123456789 abcdefghijklmnopqr</div> <span></span> </div> <div class="ellipsis"> <div>0123456789 abcdefghijklmnopqrs</div> <span></span> </div> </div> </body> </html>
  2. smoke1
    Финальный вариант в этой статье всетаки использует javascript. Но главное, там есть решение для firefox c использованием чистого css. Спасибо за ссылку!!
  3. smoke1
    При таком варианте троеточие будет всегда. А надо, чтобы оно появлялось только при обрезании строки. Похоже, что в Firefox, если сторока обрезается, то не показывается и элемент ":after". Получается что этот метод вообще не должен работь.. ???!.
  4. smoke1
    Мой пример?? Чудеса.... у меня тоже версия 2.0.0.11. И где я не проверял, нигде нет троеточия в конце...
  5. smoke1
    Если не сложно, можно ссылку на работающий пример? Я на трех машинах проверял - не работает P.S. Мой пример вчера не работал - ошибся со ссылкой. Исправил
  6. smoke1
    Решил разобраться со следующей темой - как реализовать в Firefox обрезание строки при переполнении с добавлением троеточия. В Эксплорере с этим нет проблем. Нужно только прописать в css "text-overflow:ellipsis;". Опера тоже проявила "оригинальность" - там можно добиться того же эффекта используя "-o-text-overflow:ellipsis;". Нашел следующую страничку в интернете http://www.jide.fr/emulate-text-overflowel...irefox-with-css , где заявляется о решении данной проблемы в Firefox, используя только CSS. Но заставить это работать не получается. Вот мой пример: http://demo.oceanit.ru/csstest.html Помогите пожалуйста разобраться. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- body {width:200px;} .ellipsis span { white-space:nowrap; text-overflow:ellipsis; /* for internet explorer */ overflow:hidden; width:190px; display:block; } html>body .ellipsis { clear:both; } html>body .ellipsis span:after { content: "..."; } html>body .ellipsis span { max-width:180px; width:auto !important; float:left; } --> </style> </head> <body> </body> <div class="ellipsis"> <span>A very, very, very, very, very, very, very, very, very long text</span> </div> </html> PS. Варианты с использованием javascript просьба не предлагать.
  7. smoke1
    Вопрос снимается. Помогло указание ширины для слоев 1, 2, 3 как 100%. http://demo.oceanit.ru/karfm/index1234.html
  8. smoke1
    нужно выровнять элемент относительно нижнего края блока с нефиксированной высотой с FF проблем нет, а IE не выравнивает пока высота явна не задана. пример http://demo.oceanit.ru/karfm/index123.html У слоя 1 высота задана 60px, а у 2 и 3 определяется содержимым. Соответственно элемент "100" в IE выравнивается правильно, а "200" и "300" нет. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css" media="screen"><!-- #main {width:200px; background-color:#e0e0e0; padding:50px;} #box {height:200px; border: 1px solid white;} #box div {position:relative; border: 1px solid black;} .left {position:absolute; left: -30px;} .right {position:absolute; right: -30px; bottom: 0;} --></style> </head> <body> <div id="main"> <div id="box"> <div id="1" style="height: 60px;"> <span class="left">1</span> <span class="right">100</span> <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</span> </div> <div id="2"> <span class="left">2</span> <span class="right">200</span> <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</span> </div> <div id="3"> <span class="left">3</span> <span class="right">300</span> <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</span> </div> </div> </div> </body> </html> Есть ли пути решения этой проблемы?
  9. smoke1
    Opera в принципе overflow-x/y не понимает Что делать?
  10. smoke1
    Огромное спасибо!!! Помогла вставка DOCTYPE для верхнего фрейма. Если же еще и нижнему его указать то все колбасит и нижний фрейм практически не отображается... Надо теперь в других браузерах протестировать...
  11. smoke1
    Каюсь, больше не повторится. Собеседников что-то пока не наблюдается....
  12. smoke1
    Есть необходимость сделать сайт с двумя фреймами (один над другим) причем дизайн (не резиновый) предполагает, что между фреймами не должны быть заметны границы. Поэтому в верхнем фрейме не должно быть горизонтального скроллинга. Нижний фрейм всегда больше видимой части страницы - поэтому всегда есть вертикальный скроллинг. Основные блоки страницы должны быть выровнены по центру. Тк нижний фрейм всегда имеет вертикальный скроллинг для выравнивания верхнего тоже пытаюсь включить ему вертикальный. В результате в Мозилле все ок, в Експлорере скроллинга нет и блоки при изменении размеров окна съезжают пример кода: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><title>Test</title> <frameset frameborder=0 framespacing="0" framepadding="0" rows="146,*"> <frame name="top" target="mainWindow" src="test_t.htm" scrolling="no" style="overflow-y: scroll;"> <frame name="bottom" target="mainWindow" src="test_b.htm" scrolling="auto"> </frameset> </html> где test_t.htm: <body style="background-color:#FFFFFF; margin: 0px; text-align: center; width:100%;"> <div style="height:146px; width:1000px; margin: auto; background-color:#2B022A;"> </div> </body> а test_b.htm <body style="background-color:#FFFFFF; margin: 0px; text-align: center; width:100%;"> <div style="height:120%; width:1000px; margin: auto; background-color:#30072F;"> </div> </body> результат можно посмотреть здесь http://oceanit.ru/smoke/testframes.htm
×
×
  • 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