Резиновая верстка

Обсуждение вопросов, проблем связанных с обучением CSS

Резиновая верстка

Сообщение Колпаков Александр » 04 ноя 2012, 13:38

Алексей, приветствую. Спасибо за предыдущий совет, но все-таки пришлось воспользоваться JS.

Интересует следующий вопрос:
Необходимо сделать страницу из двух колонок. Левая шириной от 150px до 300px (при ширине экрана 1280px), правая занимает всё оставшееся пространство.

Кажется, что перепробовал уже все возможные варианты, - не получается. Сделать обратное, не составляет труда, а вот так как написано выше, не получается.
Это учебное задание.

И второй вопрос:
Какие бывают варианты центрирования резинового блока. Необходимо чтобы его ширина "плясала" от содержимого.
Я нашел только один вариант, да и тот не совсем соответствует требованию:
html
Код: Выделить всё
<div id="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
</div>

CSS
Код: Выделить всё
body, html { text-align: center; }

div {
display: inline-block;
min-width: 450px;
max-width: 1200px;
height: 80px; padding: 10px;
background: #ffffa2;
border: 1px solid red;
text-align: left;
}


Если есть еще какие-либо варианты, подскажите пожалуйста.

С уважением, Александр
Аватара пользователя
Колпаков Александр
Модератор
 
Сообщения: 78
Зарегистрирован: 03 июн 2011, 18:59
Откуда: Екатеринбург

Re: Резиновая верстка

Сообщение Алексей » 05 ноя 2012, 12:22

Или я не уловил суть первого вопроса или одно из двух.. короче вот:
Код: Выделить всё
<html>
<head>
<style>
.left {
min-width: 150px;
max-width: 300px;
float: left;
background-color: #aac
}
.right {
width: 100%;
background-color: #acd
}
</style>
</head>
<body>
<div class="left">Левая колонка.</div>
<div class="right">Правая колонка.</div>
</body>
</html>

Не пойму в чем проблема? :)?

По поводу второго вопроса что то никаких светлых идей не возникает.. :( походу действительно делать блок строковым элементом это единственный выход в данном случае..
Аватара пользователя
Алексей
Администратор
 
Сообщения: 834
Зарегистрирован: 03 апр 2010, 09:12
Откуда: Солнечный Геленджик :)

Re: Резиновая верстка

Сообщение Колпаков Александр » 05 ноя 2012, 16:07

Нет, так не работает. Я тоже думал, что проблем не возникнет, а оно сразу определяет размер 150px и все... о 300px можно и не мечтать.

Кстати по поводу второго вопроса, нашел вот такой вариант:
Код: Выделить всё
div {
   display: table;
   margin: 0 auto;
}

И все работает отлично.
Аватара пользователя
Колпаков Александр
Модератор
 
Сообщения: 78
Зарегистрирован: 03 июн 2011, 18:59
Откуда: Екатеринбург

Re: Резиновая верстка

Сообщение Алексей » 05 ноя 2012, 18:43

Нет, так не работает. Я тоже думал, что проблем не возникнет, а оно сразу определяет размер 150px и все... о 300px можно и не мечтать.

Ну так появится содержание растянется до 300px.. А если нужно что бы колонка ползала в зависимости от расширения монитора то просто указывать в процентах и все.. если нужно то при условиях max-width: 300px; min-width: 150px;
Код: Выделить всё
.left {
min-width: 150px;
max-width: 300px;
width: 15%;
float: left;
background-color: #aac
}


display: table;
margin: 0 auto;


по моему так не сильно кроссбраузерно.. если уж на то пошло то почему бы тогда этот блок простой таблицей не сделать?
Аватара пользователя
Алексей
Администратор
 
Сообщения: 834
Зарегистрирован: 03 апр 2010, 09:12
Откуда: Солнечный Геленджик :)

Re: Резиновая верстка

Сообщение Колпаков Александр » 06 ноя 2012, 17:08

В общем, вроде нашел решение:

Код: Выделить всё
aside {
   float: left;
   min-width: 130px;
   max-width: 280px;
   min-height: 300px;
   padding: 10px;
   margin-right: 10px;
   background: red;
   color: #fff;
   text-align: justify;
  }

article {
      background: #ececec;
      min-height: 300px;
      min-width: 960px;
      padding: 10px;
   }


А что касается свойства display: table, то это свойство не поддерживается только в IE6, 7, а они уже практически не поддерживаются.
Аватара пользователя
Колпаков Александр
Модератор
 
Сообщения: 78
Зарегистрирован: 03 июн 2011, 18:59
Откуда: Екатеринбург


Вернуться в CSS

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2

cron
Рейтинг@Mail.ru