Помогите с CSS задний фон криво отображается

Код: 
<style>
/* обёртка */ /* для ишака добавить  _zoom:1; */
.column{ overflow:hidden;}
/* лень писать для каждого блока отдельно, написал общие стили, блоки одинаковой ширины */
.left,
    .right{ padding-bottom:10000px; margin-bottom:-10000px; float:left; width:49.9%;}
/* или даже лучше, в ИЕ-6 фиксы добавляйте сами */
.left,
    .right{ padding-bottom:10000px; margin-bottom:-10000px; display:inline-block; vertical-align:top; width:49.9%;}
</style>

<div class="column">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>

за исключением _zoom:1; код валидный, старый ишак не понимает display:inline-block; надо будет добавить display:inline; и zoom:1;
 
Для просмотра ссылки Войди или Зарегистрируйся, я вот интересуюсь. Просветите. Сейчас есть два рабочих варианта: мой и ваш.
В чём принципиальная разница в них: с absolute positioning и вашем?
Ваше более корректное и правильное?
 
01K написал(а):
Ваше более корректное и правильное?
Нажмите для раскрытия...
нет правильного)
это ж не хак или костыль, какой больше нравится -- тот и используйте
абсолютное позиционирование использую только в случаях, когда элементы не должны быть резиновыми или это не планируется в будущем
то есть, для чего такое позиционирование и придумывалось
и с тем вариантом, который я предложил, очень просто сделать адаптивную вёрстку и сетку
сейчас очень популярны шаблонизаторы вроде скелетона или бутстрапа
делаю всегда свой шаблонизатор
вроде:

Код: 
<style>
.wrap{ overflow:hidden;}
/* две колонки */
    .column50{ padding-bottom:10000px; margin-bottom:-10000px; display:inline-block; vertical-align:top; width:49.9%;}
/* три колонки */
    .column33{ padding-bottom:10000px; margin-bottom:-10000px; display:inline-block; vertical-align:top; width:33%;}
/* четыре колонки */
    .column25{ padding-bottom:10000px; margin-bottom:-10000px; display:inline-block; vertical-align:top; width:24.9%;}
</style>
 
  • Нравится
Реакции: 01K
Ребят, теперь у меня косяк :)
Скрытое содержимое доступно для зарегистрированных пользователей!
 
Последнее редактирование:
01K написал(а):
Ребят, теперь у меня косяк :)
Нажмите для раскрытия...
проблема в высоте картинки с градиентом, ее высота меньше, чем блок с синим фоном. Либо переделать саму картинку, либо сделать градиент на css3
можно попробовать генератор градиента
Для просмотра ссылки Войди или Зарегистрируйся
 
  • Нравится
Реакции: 01K
spro1, спасибо!
Увеличил картинку градиента, как то не заметил этого вчера...
Тут назрел, надеюсь, последний косяк. Последняя картинка съезжает из за длинного текст в списке, а должна быть выше, чтобы текст доходил до неё и по необходимости переходил на новую строку.
На днях такое делал, а тут что-то разобраться не могу :nezn:
 
Последнее редактирование:
попробуйте блок feature2 вынести за пределы блока feature1

ну а потом для feature1 float:left; для feature2 float:right; и ширину нужно для обоих блоков выставить так, чтобы во wrapper влезли

HTML: 
<div class="feature1">
<h3>5 Причин Работать С Нами!</h3>
<h6>Узнайте, почему большинство выбирает нас!</h6>
<ul class="list-group">
<h6> Контрольное задание – проверяем себя!</h6>
</div>
<div class="feature2"></div>


а так я бы вообще не делил картинку и текст на разные дивы, можно все сделать в одном, для картинки просто флоат райт и все будет гуд)
 
  • Нравится
Реакции: 01K
ТС - сделай себе нормальный футер. Смотреть страшно.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Футер прижатый к низу</title>
<style>
html, body{height:100%;}
body{margin:0;}
.container{height:100%;}
.content{min-height:100%;margin-bottom:-160px;}
.all{padding:0 0 160px;overflow:hidden;}
.footer{height:160px;background:#00afdd; overflow:hidden;}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="all"><!--препятствует выпадению элементов и препятствует заползанию контента под блок футер-->
<!--сюда вставляем контент-->
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху