Jump to content

hmelii

User
  • Posts

    31
  • Joined

  • Last visited

hmelii's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Untitled Document</title> <style type="text/css"> ul, li{ margin:0; padding:0; list-style:none; } ul{ float:left; border-left:1px solid red; border-right:1px solid red; padding:0 2px; } li{ background:red; float:left; color:blue; position:relative; padding:2px; border:1px solid black; margin:0 2px -2px; } </style> </head> <body> <ul> <li>пункт 1</li> <li>пункт 2</li> <li>пункт 3</li> <li>пункт 4</li> </ul> </body> </html>
  2. <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .bg{ margin:100px auto 0; background:#0f9; overflow:hidden; width:600px;} .left{ float:left; background:#933; width:100px;} .right{float:right; background:#36f; width:500px;} </style> </head> <body> <div class="bg"> <div class="left">menu</div> <div class="right">content<br />content<br />content<br />content<br />content<br />content<br /></div> </div> </body> </html>
  3. А теперь послушай меня Во первых я больше чем уверен что из этих 17 процентов 15 такие же тестеры как и ВЫ уверенные в том что 17 процентов пользователей пользуются ff2 Во вторых -moz-inline-block это такой же грязый хак как и условные комментарии в ie которые ВЫ используете Просто ie из за некоторой привилегии что ли узаконили валидность этого хака В третьих эмуляция таблиц через display:table и тд это тажа табличная верстка В четвертых если пользователь ff2 увидет сайт чуть в ином свете суть от этого не поменяется
  4. Ну так Я еще и не такое умею
  5. Привет Заценика мой способ решения Мне кажется все остальные перед ним отдыхают <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Untitled Document</title> <style type="text/css"> *{ margin:0; font-size:10px; padding:0;} ul li{ width:30%; padding-right:3%; float:left; list-style:none;} ul li span.img{ width:40px; height:40px; background:red; vertical-align:middle; margin-right:-40px; display:inline-block;} ul li span.txt{ display:inline-block; vertical-align:middle;padding-left:50px; } </style> </head> <body> <ul> <li><span class="img"></span><span class="txt">текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </span></li> <li><span class="img"></span><span class="txt">текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </span></li> <li><span class="img"></span><span class="txt">текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </span></li> </ul> </body> </html> Вместо тега "span" с классом "img" можно вставить картинку Мой сайт
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Untitled Document</title> <style> html, body { margin:0; padding:0; color:#fff; } </style> </head> <body> <div style="float:left; width:50%; margin-right:-100px; background:green; height:200px;"> <div style="padding-right:100px;">Левая тянущаяся колонка</div> </div> <div style="float:right; width:50%; margin-left:-100px; background:blue; height:200px;"> <div style="padding-left:100px;">Правая тянущаяся колонка </div> </div> <div style="background:red; z-index:1; position:relative; overflow:hidden; display:block!important; /*ie6*/display:inline-block;"> <div style="float:left; width:50px; height:200px; background:#600;">width: 50px</div> <div style="float:right; width:50px; height:200px; background:#600;">width: 50px</div> <div style=" overflow:hidden; height:200px; background:red;">width: 100px</div> </div> </body> </html>
  7. Я тебе предложил идею Я за тебя твою работу делать не буду Если тебе надо то код можно заточить и спозиционировать до совершентсва Все там работает четко !
  8. Ни кого не слушай Реально!!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Untitled Document</title> <style type="text/css"> a{ position:relative; cursor:pointer; display:inline-block;} a:focus span{display:block;} a span{display:none; left:0; top:100%; position:absolute; background:green; border:1px solid red; color:#fff;} a:active span{ display:block;} </style> </head> <body> <div> <a href="#"> Кликаем чтоб увидеть скрытый слой! <!--[if lte IE 7]><table><tr><td><![endif]--> <span>скрытый слой</span> <!--[if lte IE 7]></td></tr></table><![endif]--> </a> </div> <div>cлой ниже следующий</div> </body> </html> Посетить мою домашнюю страницу
  9. Да действительно забыл протестировать в опере Там не множко касячит Твой лечение подходит но Если мы хотим чтоб при уменьшении разрешения картинки перекатывались на другую строку то наверное лучше так <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Untitled Document</title> <style type="text/css"> .sub{width:100%; display:inline-block; font-size:0; line-height:0;} .over{border:1px solid red; text-align:justify; line-height:0;} /*IE6*/* html .sub{display:inline;} /*IE7*/* + html .sub{display:inline;} </style> </head> <body> <div class="over"> <img width="50" height="50" src="bg.png" alt="" /> <img width="50" height="50" src="bg.png" alt="" /> <img width="50" height="50" src="bg.png" alt="" /> <img width="50" height="50" src="bg.png" alt="" /> <img width="50" height="50" src="bg.png" alt="" /> <div class="sub"></div> </div> </body> </html> Теперь работает во всех ультро модных браузерах opera9.6 mozilla3.0 safari3.0 crome и в классических ie6 ie7
  10. Возможно только так <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Untitled Document</title> </head> <body> <a href="#" onmouseover="this.style.color='red'" onmouseout="this.style.color=''">ссылка</a> </body> </html> Посетить мою домашнюю страницу
  11. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Untitled Document</title> <style type="text/css"> .sub{width:100%; display:inline-block; height:0; line-height:0; font-size:0; } .over{border:1px solid red; font-size:0; line-height:0; text-align:justify;} /*IE6*/* html .sub{display:inline;} /*IE7*/* + html .sub{display:inline;} </style> </head> <body> <div class="over"> <img width="50" height="50" src="bg.png" alt="" /> <img width="50" height="50" src="bg.png" alt="" /> <img width="50" height="50" src="bg.png" alt="" /> <img width="50" height="50" src="bg.png" alt="" /> <img width="50" height="50" src="bg.png" alt="" /> <div class="sub in"></div> </div> </body> </html> Зацени мое решение Врят ли кто нибуть придумает лучше !!! Посетить мою домашнюю страницу
  12. Сам понял что сказал Ты сначало попробуй а потом пиши Ничего там не слетает inline-block включает has-layout для внешнего контейнера Чтобы он не сворачивался при содержании в себе плавающих блоков Пример работает во всех браузерах Все четко и стабильно
  13. Для этих блоков с 25% шириной задай clear:right <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Untitled Document</title> <style type="text/css"> .over{overflow:hidden; display:block!important; /*IE6*/display:inline-block;} .bl{float:left; width:25%; clear:right; border:1px solid red;} html,body{ margin:0; padding:0;} </style> </head> <body> <div class="over"> <div class="bl">1</div> <div class="bl">2</div> <div class="bl">3</div> <div class="bl">4</div> </div> </body> </html> Мой сайт
×
×
  • 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