2001photo
-
Posts
4 -
Joined
-
Last visited
2001photo's Achievements
Explorer (1/14)
0
Reputation
-
Резина + две фиксированные одна под другой, проблема?
2001photo replied to 2001photo's question in HTML Coding
Нет, причина данного потока не в этом. Сетка делается под mediaqueries и хотел для небольших экранов поставить меню выше контента а виджеты под контент, просто восстановив поток блоков. Нет, причина данного потока не в этом. Сетка делается под mediaqueries и хотел для небольших экранов поставить меню выше контента а виджеты под контент, просто восстановив поток блоков. Варианты с последовательным размещением боковых блоков работают запросто, мне захотелось их разделить контентом ) -
Резина + две фиксированные одна под другой, проблема?
2001photo replied to 2001photo's question in HTML Coding
Спасибо, Боб. У меня как-то всё получилось, но в другой (рабочей) раскладке. Там уже много мусора в стилях, а чистить ее нет времени, поэтому не покажу. Рабочая раскладка отличается тем, что есть враппер для контента и боковых меню. Результат там был тот же что и для этой сетки. Вылечился тем, что для нижнего правого блока после float:right был сделан clear:right и всё встало на место. Однако на этой сетке это не сработало. Фиксированного меню как раз и хотелось избежать, ибо аккордеон. -
Проблема, как сохранив (важно!) данный порядок блоков сделать так, чтобы сайдбар прижался вверх к меню. Сейчас он начинается под контентом. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Слева резиновая, справа фиксированные колонки</title> <style type="text/css"> body { color: #000; /* цвет текста страницы */ background: #fff; /* фоновый цвет */ margin: 0; /* убираем поля по краям */ } #header { height: 100px; /* высота шапки */ background: #fc0; /* фон */ } #menu { width: 250px; /* ширина меню */ background: #0fc; float: right; /* всплывает вправо */ } #content { background: #eee; margin-right: 260px; /* размер поля справа */ } #sidebar { width: 250px; /* ширина сайдбара */ background: #c0f; float: right; /* всплытие вправо */ } #footer { height: 50px; color: #fff; background: #000; clear: both; /* убираем обтекание */ } </style> </head> <body> <div id="header">Шапка</div> <div id="menu"> <p>Меню</p> <p>Меню</p> <p>Меню</p> </div> <div id="content"> <p> Контент </p> <p>Контент </p> <p>Контент </p> <p>Контент </p> <p>Контент </p> <p>Контент </p> </div> <div id="sidebar"> <p>Сайдбар</p> <p>Сайдбар</p> <p>Сайдбар</p> </div> <div id="footer">Футер</div> </body> </html>
-
спасибо за этот макет с футером-хедером. в коде опечатка в <body">. Надо-ли что-то добавлять в данный маке для кроссбраузерности, или это уже кроссбраузерно?