Jump to content

Kat

Newbie
  • Posts

    16
  • Joined

  • Last visited

Everything posted by Kat

  1. вместо img имеем div c img внутри, и вот этому внешнему диву можно приписывать что угодно, например max-width, max-height задать, или вписать в еще один див. Но картинка все равно выпирает (а самой картинке нельзя ничего задать).
  2. А можно как-нибудь вписать 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 я задать не могу, только для внешнего дива, отсюда такое странное условие задачи.
  3. ARA, спасибо, ты мне очень помог. И спасибо за идею с окошками появляющимися.
  4. Синий блок по ширине - 80% от ширины экрана По высоте синий блок= высота экрана -X-Y На сером фоне будет логотип слева вверху и картинка справа вверху (как нарисовано), но расположение картинок привязано к синему блоку DOCTYPE - не важно какой, наверно.
  5. нет конечно, не обязательно. X, Y - разной высоты, заданы в px
  6. Ладно, или просто подскажите, как сверстать такой макет, чтоб нормально во всех браузерах выглядел: Или хотя бы скажите, что брать за таблицу, а что за див
  7. не от экрана Пусть имеется таблица, 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>
  8. да вроде можно верх и низ тоже в пикселах задать, а среднюю tr как 100%. вроед работает, правда не знаю, во всех ли браузерах
  9. отлично! а как тогда правильно, то есть какой подход выбрать? с интересом выслушаю (на самом деле!) Есть еще табличный вариант <!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)
  10. Вот макет страницы (условный): - вот тот самый блок, как видите расстояние снизу фиксированно (сверху тоже). X,Y - задано в пикселях Высота всей страницы должна точно вписываться в высоту браузера.
  11. height:expression(body.offsetHeight-200 + 'px'); - Это вычисляется с использованием JavaScript? А если JavaScript в браузере отключен? Это не опасно к употреблению?
  12. В том то и дело, что высоту блока я не знаю!!! я только знаю, на сколько он должен отступать сверху и снизу страницы (в абсолютном значении, в px). Если задать высоту, то и у меня все работает. Но я знаю только расстояние снизу и сверху.
  13. не помогает, то же самое ( а у вас ie6 нет?
  14. не помогает. если задать высоту - все ок, но я не знаю какая высота будет, даже в 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> надо именно что отступы определенные снизу и сверху, потому что там фиксированные картинки, которые должны к границам экрана и к этому слою прилегать.
  15. Ну а во вторых, если нужно чтобы от прямоугольника были отступы, то нада вместо 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..) вроде делают высоту.
  16. Нужно просто поместить прямоугольник на страницу, но не на всю высоту, а чтобы сверху и снизу были фиксированные отступы, скажем по 100px. Рисуем div и делает для него #list{ background-color:#FFFFFF; position:absolute; width:80%; top:100px; bottom:100px; } Так вот, в Opera и Mozilla все нормально отрабатывает, а в IE6 высота блока сжимается. Прочитала, что можео задавать для IE так: height:expression(document.body.offsetHeight-200); Да, вроде отрабатывает, но я боюсь это использовать, потому что JavaScript может быть отключен и тогда весь дизайн полетит...Я права? Помогите, please, верстаю слоями первый раз и не знаю, как это правильно делается...
×
×
  • 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