Kat
-
Posts
16 -
Joined
-
Last visited
Kat's Achievements
Explorer (1/14)
0
Reputation
-
вместо img имеем div c img внутри, и вот этому внешнему диву можно приписывать что угодно, например max-width, max-height задать, или вписать в еще один див. Но картинка все равно выпирает (а самой картинке нельзя ничего задать).
-
А можно как-нибудь вписать image в div фиксированного размера (120x120), чтобы image сжимался, не растягивая див и укладываясь в размер 120x120 (сохраняя пропорции). То есть, если изображение маленькое, 10x20, например, чтобы выглядело как 10x20. Если изображение, 120x180, например, чтобы выглядело как ширинаx120. В общем, если картинка маленькая (меньше 120x120), пусть остается маленькой, как есть. А если большая, пусть пропорционально сжимается, не растягивая родительский div. Но при этом css непосредственно картинке задавать нельзя, только внешним дивам У меня получилось так, что див растягивается: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег STYLE</title> <style type="text/css"> .mm { background-color: blue; max-width:120px; max-height:120px; } </style> </head> <body> <div class="mm"> <img src="http://spanish-online.ru/wp-content/themes/nice-wee-theme/images/me.jpg" > </div> </body> </html> PS: я знаю, что для этой задачи идеально подойдет max-width и max-height для img, но я делаю все на тибко (generalinterface.org), где верстка преобразуется в дивы и css непосредственно для img я задать не могу, только для внешнего дива, отсюда такое странное условие задачи.
-
ARA, спасибо, ты мне очень помог. И спасибо за идею с окошками появляющимися.
-
Синий блок по ширине - 80% от ширины экрана По высоте синий блок= высота экрана -X-Y На сером фоне будет логотип слева вверху и картинка справа вверху (как нарисовано), но расположение картинок привязано к синему блоку DOCTYPE - не важно какой, наверно.
-
нет конечно, не обязательно. X, Y - разной высоты, заданы в px
-
Ладно, или просто подскажите, как сверстать такой макет, чтоб нормально во всех браузерах выглядел: Или хотя бы скажите, что брать за таблицу, а что за див
-
не от экрана Пусть имеется таблица, 2*2., последняя ячейка голубая. И в нее надо поместить div красного цвета. Делаю эту ячейку блоком relative, помещяю в нее div. При этом IE правильно понимает, что отмерять положени дива надо от ячейки, а не от границы брауза. Как заствить понять тоже самое Opera и FireFox? <html> <head> <style type="text/css"> <!-- html, body { margin:0; padding:0; width:100%; height:100%; } #card1 { background-color: red; height: 30%; width: 20%; border:5px; border-color :#336633; left:0%; top:0%; position: absolute; border-style: solid; } </style> <head> <body> <table width="80%" height="100%" border="1" style="position:relative; "> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td style="position:relative; background-color:#00FFCC "> <p style="position:absolute; left:0; top:0; "> <div id="card1" >card1Here</div> </p> </td> </tr> </table>
-
да вроде можно верх и низ тоже в пикселах задать, а среднюю tr как 100%. вроед работает, правда не знаю, во всех ли браузерах
-
отлично! а как тогда правильно, то есть какой подход выбрать? с интересом выслушаю (на самом деле!) Есть еще табличный вариант <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> html, body { margin:0; padding:0; width:100%; height:100%; } #list{ background-color:#0033CC; position:relative; width:100%; height:100%; } </style> </head> <body><table width="100%" height="100%" border="1"> <tr height="50px"> <td > </td> <td width="80%"> </td> <td> </td> </tr> <tr> <td> </td> <td> <div id="list"> content</list> </td> <td> </td> </tr> <tr height="50px"> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html> Но тут проблема в том, что внутренний див опять же в IE6 на всю среднюю ячейку таблицы не растягиватся. И высота строк таблицы неверно устанавливается (в IE6)
-
Вот макет страницы (условный): - вот тот самый блок, как видите расстояние снизу фиксированно (сверху тоже). X,Y - задано в пикселях Высота всей страницы должна точно вписываться в высоту браузера.
-
height:expression(body.offsetHeight-200 + 'px'); - Это вычисляется с использованием JavaScript? А если JavaScript в браузере отключен? Это не опасно к употреблению?
-
В том то и дело, что высоту блока я не знаю!!! я только знаю, на сколько он должен отступать сверху и снизу страницы (в абсолютном значении, в px). Если задать высоту, то и у меня все работает. Но я знаю только расстояние снизу и сверху.
-
не помогает, то же самое ( а у вас ie6 нет?
-
не помогает. если задать высоту - все ок, но я не знаю какая высота будет, даже в 100% - это зависит от разрешения экрана. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> <!-- html, body { background-color:#003399; margin:0; padding:0; width:100%; height:100%; } #list{ background-color:#FFFFFF; position:absolute; margin: 100px 0; } </style> <head> <body> <div id="list"> content </div> </body> </html> надо именно что отступы определенные снизу и сверху, потому что там фиксированные картинки, которые должны к границам экрана и к этому слою прилегать.
-
Ну а во вторых, если нужно чтобы от прямоугольника были отступы, то нада вместо position: absolute; bottom и top использовать margin: 100px 0; Не получается так в IE6. Попробовала- снова все стягивается п оразмеру контента. Вот весь код: <html> <head> <style type="text/css"> <!-- html, body { background-color:#003399; margin:0; padding:0; width:100%; height:100%; } #list{ background-color:#FFFFFF; position:absolute; top:100px; bottom:100px; margin: 100px 0; } </style> <head> <body> <div id="list"> content </div> </body> </html> (именно в IE6 не получается, остальные браузеры (Opera..) вроде делают высоту.