Качан Капусты
-
Posts
7 -
Joined
-
Last visited
Качан Капусты's Achievements
Explorer (1/14)
0
Reputation
-
Помогите, пожалуйста, сверстать такой макет: Условия такие: 1. Синий слой находится по центру экрана. 2. В оранжевом диве находится контент, ширина которого заранее неизвестна. Ширина оранжевого дива равна ширине контента в нем расположенного. Ширина синего и зеленого дива равна ширине оранжевого дива. 3. Оранжевый и зеленый дивы прибиты к левому краю синего дива. На таблицах это сверстать очень просто, код будет выглядеть примерно так: <center> <table> <tr><td height="200px">Это зеленый блок</td></tr> <tr><td height="100px">Это оранжевый блок, его ширина и ширина всей таблицы будет зависеть от ширины контента, расположенного в этом блоке</td></tr> </table> </center> А как нужный кроссбраузерный результат получить с помощью верстки на дивах?
-
Блок с фиксированным положением, обтекаемый текстом
Качан Капусты replied to Качан Капусты's question in HTML Coding
Хм... В случае с "top: 30%, position: relative; float: left" блок находится над всем контентом, если заменить топ на маргин-топ, то все объекты просто съезжают вниз на высоту 30%. Если position сделать absolute, то div2 находится где нужно, только текст из div1 его не обтекает, а находится сверху. -
Есть такой код: <div class="div1"> <div class="div2"></div> А тут любое количество любого контента, могут быть картинки, просто текст, другие дивы, списки или параграфы </div> div1 имеет заранее определенную ширину и растягивается по вертикали исходя из контента, который в нем размещен. div2 имеет заранее известные размеры. Нужно задать такие свойства для див2, чтобы он всегда был жестко прибит к левому краю div1, находился, например, на высоте 30% от верхнего края див1 и чтобы все содержимое див1 его обтекало.
-
Вывод слоя в отдельном плавающем окне
Качан Капусты replied to Качан Капусты's question in JavaScript
Спасибо, попробую. -
Есть форма, в ней несколько полей, каждое из полей находится в своем диве. Одно из полей выводится в слое с атрибутом "disply: none", этот слой нужно вывести в отдельном плавающем окошке. Для этого при клике по нужной кнопке в плавающем окне отображаю текст при помощи кода: document.getElementById("my-div").innerHtml. Текстовое поле при этом в плавающем окне отображается, но вот частью формы оно не является, данные введенные в таком поле серверу не передаются. Как я понимаю, это связано с тем, что в плавающее окно вставляется копия содержимого моего дива, а не сам див. Если воспользоваться каким-нибудь стандартным скриптом, для создания таких плавающих окошек, типа thickbox, то форма срабатывает корректно. Но вот как тот же сикбокс вставляет данные в плавающее окно я не смог разобраться. Как отобразить кусок формы внутри постороннего по умолчанию пустого дива, чтобы этот код по прежнему остался частью формы?
-
Как сделать так, чтобы слой-футер был всегда был внизу страницы
Качан Капусты replied to Качан Капусты's question in HTML Coding
Спасибо. Оказывается в мой код достаточно было добавить: <!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" xml:lang="en"> -
Как сделать так, чтобы слой-футер был всегда был внизу страницы
Качан Капусты posted a question in HTML Coding
Всем привет! Такая возникла проблемка. Есть три блока: хидер, тело, футер: __________________ | хидер | |__________________| | | | | | боди | |__________________| | футер | |__________________| Надо чтобы футер был всегда в самом низу страницы, вне зависимости от того, сколько контента в боди. Эту ссылку, изучил, но решение предложенное там мне не помогло. У меня два файла: Index.html и main.css вот их код: index.html: <html> <head> <title>сайт.ру</title> <link rel=stylesheet href=main.css type=text/css> </head> <body> <!-- Контейнер --> <div style='text-align: center; border: 0; width: 800px; height: 100%;position: relative; left:50%; margin-left:-400px; background-color: #fff'> <!-- Шапка --> <div style='text-align: center; border: 0; width: 800px; height: 86px; background-image: url(images/topbg.jpg)'> </div> <!-- //Шапка --> <!-- Тело --> <div style='text-align: center; border: 0; width: 800px; background-color: #fff; overflow: auto;'> Контент </div> <!-- //Тело --> <!-- Футер --> <div style='position: absolute; overflow: auto; left: 0px; bottom: 0px; border: 0; width: 800px; height: 50px; background-color: #ccc; margin: 0 auto;'> </div> <!-- //Футер --> </div> <!-- //Контейнер --> </body> </html> main.css: *{ margin: 0; padding: 0; border:0; } html { height: 100%; } body{ margin:0 auto; padding: 0; border:0; color:#333; background:#666; font: 62.5% Arial,Sans-Serif } Так вот, этот код работает правильно в ИЕ и Опере. То есть если контента меньше чем на всю страницу, то футер располагается внизу страницы, скроллбаров нет. Если контента больше чем на 1 экран, то появляются скроллбары и футер располагается в самом низу под контентом. В ФФ2 этот пример работает не корректно: если контента меньше чем на всю страницу, то футер выводится корректно, скроллбаров нет. Если контента больше чем на всю страницу, то футер отображается внизу окна, но если прокрутить окно вниз, то он (футер) остается на месте и перекрывает часть контента. То есть он располагается не под контентом, а пересекает его, оставаясь на месте при скролле окна. Как сделать так, чтобы и в ФФ футер был всегда под контетнтом?