|
|
Знаете ли Вы, что ... | |
...инструкция по установке аватара описана в Правилах форума. | |
<< Предыдущий совет - Случайный совет - Следующий совет >> |
Веб программирование Вопросы WEB программирования (Java Script и т.д.) |
Ответить |
|
Опции темы | Опции просмотра |
27.04.2010 11:14 | #11 | ||
Решение при помощи expression [HTML] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title>Vertical align MIDDLE</title> <style type="text/css"> body {font: 11px Arial, Helvetica, sans-serif;} ul, li { list-style: none outside none;} ul {padding: 0;} li {float: left; background-color:#FFCC99; margin: 0 10px 0 0; width:130px; height: 46px; border:1px solid; overflow:hidden;} a { display: block; cursor: pointer; } .box { display: table-cell; vertical-align: middle; height: 46px; background-color: #FF9900; } p{ margin-top:expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px"); background-color:#FFFFCC; text-align: center; margin: 0 auto; width: 110px; } .left {padding-left: 10px;} .right {padding-right: 10px;} </style> </head> <body> <ul> <li> <div class="left"> <div class="right"> <a href="#"> <div class="box"> <p>Main page</p> </div> </a> </div> </div> </li> <li> <div class="left"> <div class="right"><a href="#"> <div class="box"> <p>Products</p> </div> </a></div> </div> </li> <li> <div class="left"> <div class="right"><a href="#"> <div class="box"> <p>Interesting article about Mr. Brown</p> </div> </a></div> </div> </li> <li> <div class="left"> <div class="right"><a href="#"> <div class="box"> <p>Hallo! How are You?</p> </div> </a></div> </div> </li> <li> <div class="left"> <div class="right"><a href="#"> <div class="box"> <p>Feedback</p> </div> </a></div> </div> </li> </ul> </body> </html> [/HTML].left, .right - нужны мне для дополнительного оформления. PS. Думаю код можно будет еще упростить. Последний раз редактировалось Maxim Kopytov; 27.04.2010 в 11:28. |
|||
|
Ответить |
27.04.2010 22:38 | #15 | ||
Цитата:
Mozilla FF 3.5.2, естественно Safari, Opera. Всю историю браузеров не проверял конечно Но и этого уже думаю достаточно. Короче меня устраивает это решение. |
|||
|
Ответить |
17.05.2010 12:46 | #16 |
[HTML] <!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>Dinamic height</title> </head> <style type="text/css"> body { font-family:Arial, Helvetica, sans-serif; font-size: 0.8em; } #box { background-color:#FFFFCC; padding:10px; border:1px solid #FFCC99; display: table-cell; vertical-align: middle; } #left_block { background-color:#00CCFF; float:left; width: 70%; } #right_block { background-color:#FF9999; float:right; width: 30%; height: auto; } </style> <body> <div id="box"> <div id="left_block"> <h1>left_block</h1> <p>The licenses for most software are designed to take away your freedom to share and change it. By contrast, the GNU General Public Licenses are intended to guarantee your freedom to share and change free software--to make sure the software is free for all its users.</p> <p>This license, the Lesser General Public License, applies to some specially designated software packages--typically libraries--of the Free Software Foundation and other authors who decide to use it. You can use it too, but we suggest you first think carefully about whether this license or the ordinary General Public License is the better strategy to use in any particular case, based on the explanations below.</p> <p>When we speak of free software, we are referring to freedom of use, not price. Our General Public Licenses are designed to make sure that you have the freedom to distribute copies of free software (and charge for this service if you wish); that you receive source code or can get it if you want it; that you can change the software and use pieces of it in new free programs; and that you are informed that you can do these things. </p> </div> <div id="right_block"> <h1>right_block</h1> <p>The licenses for most software are designed to take away your freedom to share and change it. By contrast, the GNU General Public Licenses are intended to guarantee your freedom to share and change free software--to make sure the software is free for all its users.</p> </div> </div> <strong>Задача:</strong> Выровнять красный правый блок относительно голубого левого, вертикально по центру </body> </html> [/HTML] |
|
|
Ответить |
18.05.2010 09:59 | #17 |
Сложность блочной верстки вынуждает воспользоваться стандартными таблицами.
Блочная верстка получилась такой: [HTML] <!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>Dinamic height</title> </head> <style type="text/css"> body { font-family:Arial, Helvetica, sans-serif; font-size: 0.8em; } h1 { margin:0; padding:0; font-size: 12px; } #box { background-color:#FFFFCC; padding: 10px; border:1px solid #FFCC99; } #left_block { width: 70%; display: table-cell; vertical-align: middle; } #right_block { width: 30%; display: table-cell; vertical-align: middle; } #left_block #center { background-color:#00CCFF; height:100%; } #right_block #center { background-color:#FF9999; height:100%; } .clear { clear: both; } </style> <!--[if lt IE 8]> <style type="text/css"> #box { display: block; height: 100%; padding-top: -10px;} #left_block, #right_block { overflow: hidden; margin-top:expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");} #left_block { background-color:#00CCFF; width: 70%; float:left; } #right_block { background-color:#FF9999; width: 30%; float:right; } </style> <![endif]--> <body> <div id="box"> <div id="left_block"> <div id="center"> <h1>left_block</h1> The licenses for most software are designed to take away your freedom to share and change it. By contrast, the GNU General Public Licenses are intended to guarantee your freedom to share and change free software--to make sure the software is free for all its users.</br> This license, the Lesser General Public License, applies to some specially designated software packages--typically libraries--of the Free Software Foundation and other authors who decide to use it. You can use it too, but we suggest you first think carefully about whether this license or the ordinary General Public License is the better strategy to use in any particular case, based on the explanations below.</br> When we speak of free software, we are referring to freedom of use, not price. Our General Public Licenses are designed to make sure that you have the freedom to distribute copies of free software (and charge for this service if you wish); that you receive source code or can get it if you want it; that you can change the software and use pieces of it in new free programs; and that you are informed that you can do these things. </br> </div> </div> <div id="right_block"> <div id="center"> <h1>right_block</h1> The licenses for most software are designed to take away your freedom to share and change it. By contrast, the GNU General Public Licenses are intended to guarantee your freedom to share and change free software--to make sure the software is free for all its users.</br> </div> </div> </div> </body> </html> [/HTML] условные комментарии + expression Последний раз редактировалось Maxim Kopytov; 18.05.2010 в 10:02. |
|
|
Ответить |
|