Garnet
-
Posts
9 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Garnet
-
Собственно статья на главной: http://htmlbook.ru/html5/video
-
Кстати в IE так и не заработало, т.к. там vertical-align только для таблиц, через expression тоже не получилось... Короче сделал таблицей и забыл.
-
swetlana - спасибо, всё верно, ещё в body помимо высоты 100% надо добавить ширину 100%, а то wrapper прижимается к левому краю, и не хочет растягиваться на весь экран. С процентами кстати тоже работает. Вот код css, если кому надо: body { height:100%; width:100%; padding:0; margin:0; display:table; } .wrapper { width:100%; height:100%; background-color:#3FC; display:table-cell; vertical-align:middle; } .center_block { width:400px; background-color:#FC3; margin:auto; }
-
Здравствуйте. Столкнулся с такой проблемой - требуется разместить div с плавающей высотой по центру экрана... погуглил, и в основном предлагают решение через display:table-cell; vertical-align:middle; у родителя, но вот как не пробовал биться головой об стенку у меня это не работает. Вот код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>div</title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <style type="text/css"> body { padding:0; margin:0; } .wrapper { width:100%; height:100%; position:absolute; background-color:#3FC; display:table-cell; vertical-align:middle; } .center_block {width:400px; margin:auto; background-color:#FC3; } </style> </head> <body> <div class="wrapper"> <div class="center_block">content content content content content content content content content content content content content content content content content content content content content </div> </div> </body> </html>
-
line-height подобрал, просто было интересно существует ли более гибкое решение...Vlad-прикольно, понравилось =)... Спасибо за ответы.
-
В общем проблема следующего рода - есть div с заданной шириной, и ограниченой высотой, содержание заранее не известно. Иногда бывает, что при обрезании текста, видна часть строки, что есть некрасиво. Хотелось бы удалить не полностью отображаемые строки, ни где не могу найти решения , вот код: <!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" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> .content{max-width:200px; max-height:200px; overflow:hidden} </style> </head> <body> <div class="content"><p>content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content</p></div> </body> </html>
-
Searcher - действительно, это всё решает, никогда б не подумал ...большое спасибо.
-
npofopr - можно одинаковой, главное чтобы резиновые по бокам были одинакового размера с максимальной центральной. Searcher - это частное решение, но данный код лишь фрагмент сайта, на самом деле там с верху и с низу ещё есть блоки.
-
Доброго времени дня...я только начал верстать div(ами) и вот столкнулся с проблемой. Есть 2 колонки фиксированной ширины выравненные по центру, длинна колонок зависит от контента - задача сделать фон от бортов колонок до края экрана определённого цвета, ширина-резиновая, высота - по максимуму высоты центральных колонок, написал такой код: <html> <head> <title>test</title> <style type="text/css"> body { padding:0px; border:0px; margin:0px } .rubber { width:100%; background-color:#F00; height:auto } .wrapper { width:780px; margin:auto; } .half_wrapper { width:390px; background-color:#9FF; float:left; height:auto } </style> </head> <body> <div class="rubber"> <div class="wrapper" style="height:auto;"> <div class="half_wrapper"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit....</p> </div> <div class="half_wrapper"> <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit...</p> </div> </div> </div> </body> </html> но свойство height:auto не срабатывает, и блок - до бортов экрана не имеет высоты, подскажите пожалуйста решение проблемы. Неужели обязательно писать скрипт?