Jump to content

Rossi25

User
 View Profile  See their activity

  • Posts

    36

  • Joined

  • Last visited

 Content Type 

Everything posted by Rossi25

  1. Rossi25
    Привет! Может поможете и мне с версткой=) Мучаюсь в этой теме. Вообще тоже хочется резиновость: шапка (% от окна) - две колонки(% от окна, левая фиксированная по ширине)-подвал(% от окна), прижалый к низу окна при малом контенте. И левая колонка чтобы продолжалась до подвала. Плюс желание обернуть все блоки картинкой-бордюром, причем левые и правые прятать при минимальной ширине окна. Буду признателен
  2. Rossi25
    Что-то не пойму все-равно, как дальше то написать код, чтобы подвал уехал к низу окна. И не понимаю, где задается сколько именно процентов от ширины окна будет занимать контент. Помогите, пожалуйста. UPD: подвал уезжает к низу при задании html {height: 100%;}, но фон контента не продолжается до подвала =( Картинка: <!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=utf-8" /> <title>Test</title> <style type="text/css"> html { height: 100%; } body { margin:0; background:#ccc; /*min-width:950px;*/ } .container { position:relative; width:100%; overflow:hidden; height: 1%; padding: 0 0 100px; } .holder { position:relative; left:50%; min-width:1030px; } .frame { position:relative; left:-50%; margin:0 20px; padding-left:20px; background:#0f0 url(http://img89.imageshack.us/img89/360/kanatvert1.png) repeat-y; } .content { padding:10px 30px 10px 10px; background: url(http://img89.imageshack.us/img89/360/kanatvert1.png) repeat-y 100% 0; } #wrapper { /*width: 950px; */ width: 90%; min-width: 950px; margin: 0px auto; min-height: 100%; height: auto !important; height: 100%; border: #000 solid 1px; } #footer { width: 90%; min-width: 950px; margin: -100px auto 0px; height: 100px; background: #BFF08E; } </style> </head> <body> <div id="wrapper"> <div class="container"> <div class="holder"> <div class="frame"> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas, est at malesuada semper, erat ipsum iaculis ante, sed sollicitudin arcu tellus non magna. Fusce lectus nisl, rhoncus sit amet mollis sed, lobortis id sem. Morbi quis elit nec purus suscipit mollis in quis arcu. Aenean hendrerit, urna ut adipiscing dapibus, purus dui suscipit ipsum, quis sollicitudin lorem enim nec elit. Vestibulum nec ante at metus egestas tristique et ut metus. Nulla laoreet orci posuere tortor semper condimentum. Aliquam non felis at eros feugiat porta. Nullam rutrum malesuada euismod. Mauris ultrices sodales odio eget ornare. Nunc et sagittis elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec fringilla luctus purus, ut molestie neque cursus vel. Phasellus justo velit, hendrerit vitae molestie vel, feugiat eu purus. Suspendisse elementum vestibulum ullamcorper.</p> </div> </div> </div> </div> </div><!-- #wrapper --> <div id="footer"> <strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula. </div><!-- #footer --> </body> </html>
  3. Rossi25
    Во! уже ближе.. Спасибо!
  4. Rossi25
    Привет! Конечно неплохо, но где же изображение-бордюр? Нужно, чтобы слева и справа от контента было тянущееся по вертикали (типа repeat) изображение, а не solid border. Разве это не видно из моей картинки, как хотелось бы получить? В любом случае спасибо за отзыв.
  5. Rossi25
    Здравствуйте! Чем-то напоминает соседнюю тему с "ушами". Нужно, чтобы вокруг резинового блока, позиционированного по центру по горизонтали, была картинка-бордюр, но при минимальной ширине экрана, этот бордюр (по горизонтали) обрезался, т.е. чтобы его не было видно и не появлялась горизонтальная полоса прокрутки. Если бы ширина блока была фиксированной, то можно было бы повесить бэкграунд на боди, например как тут (при ширине окна 950рх не появляется горизонтальной полосы прокрутки, и рамку не видно). Но как это реализовать при резиновой ширине блока? Вот примерная картинка: . Пока представляю, только как это можно сделать таблицами, и то не совсем. Этот код совсем не работает (даже неверно работает центрирование): UPD: Вот вообще как в результате нужно (толстая пунктирная - изображение-бордюр, в тонких пунктирных прямоугольниках - как его можно нарезать на повторяющиеся и неповторяющиеся части). Видимо нужно три div'а по вертикали (шапка, подвал и центральная часть, внутри которой таблица). Помогите, пожалуйста, какие идеи.
  6. Rossi25
    Может есть у кого-нибудь ещё идеи на эту тему, кроме js?
  7. Rossi25
    Спасибо, опять за идею, tius. Но в Вашем примере ширина у желтого и серого блока получилась заданной в процентах, когда их ширина имеет фиксированное значение. Кроме того, задание margin у серого блока не позволяет придвинуть серый блок вплотную к желтому при минимальной ширине (или происходит "спрыгивание" желтого блока вниз). Да, а обязательно изменять сво-во div'ам на display: inline-block;, это во всех браузерах работает? Вот немного, изменил, добавив ещё wrapper'ов, но не идеально получилось (например, серый блок в черной рамке не ровно по центру располагается относительно красной рамки и правого края браузера) <!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=utf-8" /> <title>Слои по горизонтали</title> <style type="text/css"> .layer1 { background-color: #fc0; float: right; width: 54%; display: inline-block; /* работает ли это в IE6,7? */ /* здесь, к сожалению, нельзя добавить min-width, иначе блок "уползает" вниз, под серый */ } .layer2 { background-color: #c0c0c0; margin: 0; float: right; display: inline-block; /* работает ли это в IE6,7? */ min-width: 240px; width: 46% !important; /* для IE6 */ width: 240px; /* для IE6 */ } .wrapper { min-width: 560px; width: 100% !important; /* для IE6 */ width: 560px; /* для IE6 */ } .fixed-wrapper1 { border: 1px solid red; width: 300px; } .fixed-wrapper2 { border: 1px solid black; width: 240px; } .clear { clear: left; /* Отмена обтекания */ } img {border:0px; background-color: #0f8;} </style> </head> <body> <div class="wrapper"> <div class="layer2"> <div class="fixed-wrapper2"> Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilis.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilis.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipi... </div> </div> <div class="layer1"> <div class="fixed-wrapper1"> <img width="300" height="300" src="div4img.png" alt="изображение 300x300" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit... </div> </div> <p>Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat. amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna utem dolor in hendrerit in vulputate velit esse molestie consequat. amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aaliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed d</p> </div> </body> </html> Рис.1. Ширина экрана увеличивается... Рис.2. Минимальная ширина.
  8. Rossi25
    Спасибо, большое, tius ! У меня не было такой идеи, ограничить шириной обертки. Но все-же планировалось, что нижний текст не будет ограничен по ширине верхними двумя блоками (см. рис.1), а продолжится под серой линией. Т.е. использовать не width, а min-width, как в замечательном примере на сайте. В идеале хотелось, чтобы серый блок располагался по ширине по центру между желтым блоком и правой границей браузера (рис. 2). Как-то можно это реализовать без js? Я думал, что придется "играться" с margin,padding, возможно также position... но, к сожалению, не получается добиться нужного. рис. 1 —————————————— рис. 2 PS: к сожалению, я не могу пользоваться личными сообщениями (видимо как новичок), даже прочитать присланное, так что пишите все тут.
  9. Rossi25

    align в ie7

    Rossi25 replied to Ritter's question in HTML Coding

    а для тэга img стиль display: inline. Вообще покажите всю таблицу, желательно со скриншотом, у Вас в остальных ячейках хватает места под контент?
  10. Rossi25

    align в ie7

    Rossi25 replied to Ritter's question in HTML Coding

    а не пробовали для td установить сво-во text-align: center; а для тэга img margin: 0 auto; ?
  11. Rossi25
    Здравствуйте! Вот здесь на сайте есть такой пример - http://htmlbook.ru/faq/kak-razmestit-dva-sloya-po-gorizontali. Мне хотелось бы сделать, чтобы текст внизу "Duis te feugifacilisi..." шел сразу под желтым блоком, а при увеличении содержимого серого, обтекал бы серый. Да, и самое главное, чтобы сохранилось у серого блока "прилипание" левого края к желтому при растягивании ширины браузера, т.е. float: right; для .layer2 не совсем подходит. Кто-нибудь знает, как это реализовать блоками, может по-другому сверстать нужно? Вот картинка, как должно выглядеть:
×
×
  • 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

  I accept