- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Как снизить ДРР до 4,38% и повысить продажи с помощью VK Рекламы
Для интернет-магазина инженерных систем
Мария Лосева
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Всем привет, не нашел ответа на свой вопрос, создаю новую тему.
Делаю резиновый дизайн, где 3 колонки, боковые имеют фиксированую ширину по 300px, а центральная растягивается по всей ширине моника то есть должна иметь width:100%. как вот, данная конструкция не работает :(.... помогите, в чем ошибка?, как лучше реализовать задачу?
<body>
<div id="container">
<div id="col-left">123</div>
<div id="col-center">123123</div>
<div id="col-right">123</div>
</div>
</body>
СSS
#container {
width:100%;
padding:5px;
background:#CCCCCC;
overflow:hidden;
}
#col-left {
width:300px;
background:#00CCFF;
float:left;
}
#col-center {
width:100%;
background:#0099FF;
float:left;
}
#col-right {
width:300px;
background: #0066FF;
float:left;
}
Я резиновые дизайны если честно надух не переношу, может быть зря конечно.. в данном случае мне не овтертется, пока не решу проблему, заранее спасибо.
Вот так это выглядит..
#col-right float:right;
не?
Вам нужно ширину для каждой колонки задавать в процентах. Если, к примеру, у Вас ширина контейнера по дизайну 900рх, то каждая колонка будет по 30%.
В html-коде центральный блок нужно поставить после боковых, т.е. вот так:
CSS-файл, соответственно, следующий:
#col-left {
width:300px;
background:#00CCFF;
float:left;
}
#col-center {
background:#0099FF;
margin:0 300px;
}
#col-right {
width:300px;
background: #0066FF;
float:right;
}
---------- Добавлено 26.12.2012 в 02:20 ----------
Вам нужно ширину для каждой колонки задавать в процентах. Если, к примеру, у Вас ширина контейнера по дизайну 900рх, то каждая колонка будет по 30%.
Ни к чему абсолютно. ТСу, я так понимаю, необходима фиксированная ширина боковых колонок, да и основной контейнер - на всю длину.
#col-right float:right;
не?
Не, пробовал, это нн канает.. нашел решение вот какое.. может кому пригодится.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Пример</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
*{padding: 0; margin: 0;}
#page{
width: 100%;
min-width: 800px;
}
* html #page {
width:auto;
padding-left: 800px;
}
* html #container2 {
margin-left: -800px;
position: relative;
}
* html #page, * html #container1, * html #container2{
height: 0;
}
#header {
clear: both;
width: 100%;
height:100px;
background:#9999FF;
}
#main{
width: 100%;
background:#99CC00;
}
#content{margin: 0 200px;}
#left{
float: left;
width: 300px;
background:#00CCFF;
}
#right{
float: right;
width: 300px;
background:#0099FF;
}
#footer{
clear: both;
width: 100%;
height:100px;
background:#9999FF;
}
</style>
</head>
<body>
<div id="page">
<div id="container1">
<div id="container2">
<div id="header">Header</div>
<div id="main">
<div id="right">
right
</div>
<div id="left">
left
</div>
<div id="content">
content
</div>
</div>
<div id="footer">Footer</div>
</div>
</div>
</div>
</body>
</html>
То есть проблему решил.
Спасибо всем, решение было под носом.
То есть проблему решил.
и content будет после всякого хлама в сайдбарах... ))
и content будет после всякого хлама в сайдбарах... ))
Ну это уже другой вопрос. Думаю, ТС разберется :)
печальное решение вы нашли, коду тьма, а толку ....
печальное решение вы нашли, коду тьма, а толку ....
В чем именно "печальное"? Может, приведете Ваш вариант?
ТС, вы бы дали ссылку, где нашли, может там и объяснение есть. Непонятно зачем вот этот кусок:
* html #page {width:auto;
padding-left: 800px;
}
* html #container2 {
margin-left: -800px;
position: relative;
}
* html #page, * html #container1, * html #container2{
height: 0;
}
В остальном, как я понимаю, решение совпадает с предложенным товарищем sweb27.