igmar
-
Posts
104 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by igmar
-
Как сверстать такой простой сайт с 3-я колонками, заголовком и подвалом?
igmar replied to igmar's question in HTML Coding
Снова вопрос - как поместить картинку (прямоугольник) в центр Div (который желтый) http://igmar.hop.ru/index1.html высокая картинка центрируется по странице http://igmar.hop.ru/index.html когда сервер добавляет свою рекламу, то картинка перекрывает ее. http://igmar.hop.ru/index2.html широкая картинка сжимается страницу, но не центрируется по высоте Код нашел в инете, но не получается его доделать. Объясните, как бы поместить картинку в Div, который я потом помещу в другой Div. Размеры картинки неизвестны, ее нужно масштабировать под размер div. Но и размер родительского Div тоже неизвестен - он может быть как процент от его родительского Div. Мне нужно аналогично этому по виду http://igmar.hop.ru/testtabl1.html http://igmar.hop.ru/testtabl2.html Можно это сделать, если жестко не задавать размеры Div? -
Как сверстать такой простой сайт с 3-я колонками, заголовком и подвалом?
igmar replied to igmar's question in HTML Coding
Еще вопрос. Картинки могут не умещаться либо по ширине, либо по высоте (если пропорционально смасштабируются). Значит перед тем, как помещать их в div, нужно выяснить больше у них ширина или высота и в зависимости от результата задать в теге <img> либо style="width: 100%;" либо style=" height: 100%;" Так это делается? Потому что если style="width: 100%; height: 100%;" и ширина больше высоты, то картинка исказится при полном заполнении div. -
Как сверстать такой простой сайт с 3-я колонками, заголовком и подвалом?
igmar replied to igmar's question in HTML Coding
andrey7287, спасибо за ссылку. Почитаю.Объясните, кто может, почему не убирается вертикальнаяполоса прокрутки, главный div id="container" немного не умещается по высоте и отступает от верхней границы страницы. Я убрал все margin & padding - все равно не влезает. Пример взял с сайта и вставил свою картинку - она больше экрана, чтобы разобраться с масштабированием. <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Трехколоночный макет</title> <style type="text/css"> html, body { font: 0.8em Arial, Helvetica, sans-serif; /* Шрифт на веб-странице */ background: #D7E1F2; /* Цвет фона */ color: #ffe; /* Цвет текста */ height: 100%; } a { color: #008BCE; /* Цвет ссылок */ } #container { width: 1000px; /* Ширина макета */ height: 100%; margin: 0 auto; /* Выравниваем по центру */ background: #FCE600; /* Цвет колонок */ } #header { font-size: 2.2em; /* Размер текста */ text-align: center; /* Выравнивание по центру */ padding: 0px; /* Отступы вокруг текста */ background: #D71920; /* Цвет фона шапки */ } #nav, #aside { float: left; width: 200px; padding: 0px; } #content { background: #54B948; margin: 0 220px; /* Ширина колонок */ padding: 0px; text-align: center; height: 100%; } #aside { float: right; color: #000; } h2 { margin: 0 0 0em; } #footer { clear: both; /* Отменяем действие float */ padding: 0px; /* Отступы вокруг текста */ background: #D71920; /* Цвет фона подвала */ } </style> </head> <body> <div id="container"> <div id="nav"> <p><a href="stat.html">Статистика турнира</a></p> <p><a href="interview.html">Интервью с главным судьей</a></p> <p><a href="ask.html">Конкурсные вопросы</a></p> </div> <div id="aside"> <h3>Статистика</h3> <p>одиннадцать человек дошли до финала;</p> <p>один человек правильно указал в каком стиле писал Диего Веласкес;</p> <p>только один человек знал, кто изобрел пароход;</p> </div> <div id="content"> <img src="https://img-fotki.yandex.ru/get/5001/289412621.b4/0_140fcf_1d1b016e_orig" style="width: 100%; height: 100%;"</> </div> </div> </body></html> -
Как сверстать такой простой сайт с 3-я колонками, заголовком и подвалом?
igmar posted a question in HTML Coding
Если б порядком не замучился, то не стал бы заводить эту простую тему. Везде написано, что сейчас таблицы не нужно использовать для верстки, а нужны Div. Подскажите, как сверстать такой сайт - по типу сайтов с фотками и картинками. По высоте он будет на 100% страницы. Сверху будет заголовок с меню навигации. Снизу будет 3 колонки. В средней колонке будет картинка и она должна вся умещаться. Полос прокрутки в этом блоке быть не должно. Должен изменяться размер исходной картинки в этом блоке. Слева будет динамическое раскрывающееся меню. Оно может быть длинным - там нужна полоса прокрутки. Справа будет доп информация, тоже может понадобиться полоса прокрутки. Снизу будет небольшой подвал вспомогательной навигации. Я знаю, как это сделать таблицей на 100% высоты, а потом в ячейки поместить div и заполнять их информацией. А как это сделать только на div, чтобы в крайних блоках были полосы прокрутки, а в центральной не было? И чтобы, кроме заголовка и подвала, все блоки были одинаковой высоты? Попробовал на основе примера с сайта добавить заголовок и подвал - не получилось. Дочерние div выходят из родительского по высоте, а подвал привязывается к последнему короткому предыдущему div. Как это поправить? <!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=utf-8"> <style type="text/css"> #container { width: 651px; height: 100%; margin: 0 auto; border: 4px double black;} #header { font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */ font-weight: bold; /* Жирное начертание текста заголовка */ font-size: 80%; /* Размер шрифта */ color: black; /* Цвет текста заголовка */ width: 635px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ border: 1px solid black; /* Рамка вокруг слоя */ margin-left: 5px; /* Отступ слева */ margin-top: 0px; /* Отступ сверху */ } #footer { font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */ font-weight: bold; /* Жирное начертание текста заголовка */ font-size: 80%; /* Размер шрифта */ color: black; /* Цвет текста заголовка */ width: 635px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ border: 1px solid black; /* Рамка вокруг слоя */ margin-left: 5px; /* Отступ слева */ margin-top: 0px; /* Отступ сверху */ } #title1, #title2, #title3, #col1, #col2, #col3 { /* 1 */ font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */ font-weight: bold; /* Жирное начертание текста заголовка */ font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ width: 200px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ border: 1px solid black; /* Рамка вокруг слоя */ margin-left: 5px; /* Отступ слева */ margin-top: 2px; /* Отступ сверху */ float: left; /* Состыковка колонок по горизонтали */ } #col1, #col2, #col3 { /* 2 */ font-family: "Times New Roman", Times, serif; /* Шрифт с засечками */ font-size: 100%; /* Размер шрифта */ font-weight: normal; /* Нормальное начертание */ color: black; /* Цвет текста */ } /* Цвет фона каждого слоя */ #title1 { background: #B38541; } #title2 { background: #008159; } #title3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; } .tr { /* 3 */ clear: both; /* Отменяет действие float */ } </style> </head> <body><div id="container"><div id="header">Здесь блок меню</div> <div class="tr"> <div id="title1">Чебурашка</div> <div id="title2">Гена</div> <div id="title3">Шапокляк</div> </div> <div class="tr"> <div id="col1">Отряд мягкотелых, семейство лопоухих.<br>Это безобидное пушистое животное ныне находится на грани исчезновения, вследствие неправомерных действий людей охотившихся на чебурашек из-за их ценного меха и вкусного питательного мяса.</div> <div id="col2">Отряд длинномордых, семейство зеленых.<br>Хищник. Охотится на охотников, охотившихся за чебурашками. Ошибочно причисляется некоторыми авторами к отряду земноводных. Не имеет ничего общего с крокодилами.</div> <div id="col3">Отряд бабок, семейство вонючевредных.<br>Очень опасное существо из-за особенностей развития в пубертарном периоде. Является симбионтом с животным crysa larisa.</div> </div> <div id="footer">Подвал</div></div> </body></html>