|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
18.07.2012, 13:34 | #1 |
Пользователь
Регистрация: 15.01.2012
Сообщений: 52
|
Не изменяет свою высоту DIV с указанным min-height
У меня не изменяет свою высоту DIV с указанным для него min-height. Возможно это из-за фиксированного фона.
Вот коды: HTML: Код HTML:
<!DOCTYPE html> <html> <head> <title>My blog</title> <link href="style/main.css" rel="stylesheet"> <link href="style/other.css" rel="stylesheet"> </head> <body> <div id="main"> <div id="header"> <div class="logo"><?php include "./modules/logo.tpl"; ?></div> <div class="nav"><?php include "./modules/nav.tpl"; ?></div> </div> <div id="content-main"> <div id="content"> <?php include "./modules/content.tpl"; ?> </div> <div id="footer"><div style="padding: 12px;"> <?php include "./modules/footer.tpl"; ?> </div></div> </div> </div> </body> </html> Код HTML:
body { background: #FFFFFF; margin: 0; padding: 0; color: #000000; font-family: Tahoma; font-size: 13px; } #main { background: #f6eaa9 url('../images/background.png') fixed top center repeat; width: 80%; margin: 0 auto; height: 100%; -webkit-box-shadow: 0px 0px 70px #000000; /* Safari, Chrome */ -moz-box-shadow: 0px 0px 70px #000000; /* Firefox */ box-shadow: 0px 0px 70px #000000; } #header { width: 80%; height: 110px; margin: 0 auto; } .logo { width: 30%; float: left; height: 110px; margin: 0 auto; font-family: Logo; font-size: 75px; color: #000000; } .nav { width: 70%; float: right; height: 50px; margin: 0 auto; background: #d3bd83; border-radius: 10px; margin-top: 20px; padding: 0; font-family: Navigation; font-size: 27px; } .nav ul { height: 50px; margin: 0; padding: 0; padding-left: 20px; } .nav ul li { list-style: none; float: left; display: block; height: 18px; padding: 3px; padding-left: 8px; padding-right: 8px; margin-top: 1px; } .nav ul li:hover { background: #f6eaa9; height: 42px; } #content-main { width: 80%; margin: 0 auto; min-height: 600px; } #content { width: 85%; float: right; min-height: 500px; margin: 0 auto; background: #d3bd83; border-radius: 10px; margin-top: 30px; border: 1px solid #000000; } #footer { width: 85%; float: right; height: 40px; margin: 0 auto; background: #d3bd83; border-radius: 10px; margin-top: 25px; border: 1px solid #000000; text-align: center; } .new { width: 100%; min-height: 100px; margin: 0 auto; border: 1px solid #f6eaa9; border-radius: 10px; background: #F6EAA9; } .title-new { width: 100%; height: 49px; margin: 0 auto; color: #000000; font-family: Navigation; font-size: 30px; border-top-left-radius: 10px; border-top-right-radius: 10px; } .text-new { width: 100%; min-height: 50px; margin: 0 auto; font-family: Text-new; font-size: 14px; } .other-new { width: 95%; height: 20px; margin: 0 auto; border-top: 1px solid #c28d3b; color: #000000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; font-size: 10px; } Код HTML:
a:link, a:visited { color: #000000; text-decoration: none; } a:hover { color: #c28d3b; text-decoration: none; } @font-face { font-family: Logo; src: url('fonts/logo.ttf'); } @font-face { font-family: Navigation; src: url('fonts/nav.ttf'); } @font-face { font-family: Title; src: url('fonts/title.ttf'); } @font-face { font-family: Text-new; src: url('fonts/text-new.ttf'); } P.S. Блоки были сначала другие(на HTML 5), но я думал не работает, поэтому изменил. Последний раз редактировалось RelaX Inc.; 18.07.2012 в 13:39. |
19.07.2012, 10:12 | #2 |
Пользователь
Регистрация: 15.01.2012
Сообщений: 52
|
Нет, ну я конечно понимаю, что вопрос сложный, но ведь не на столько же, чтобы его не могли решить на специализированном форуме... Просмотров море, а ответа ни одного...
|
19.07.2012, 10:47 | #3 |
Форумчанин
Регистрация: 08.07.2010
Сообщений: 679
|
а вы думаете много желающих из 3-х кусков html и css собирать страницу и тестить ?
попробуйте float: right убрать у нужного блока |
19.07.2012, 11:14 | #4 |
Пользователь
Регистрация: 15.01.2012
Сообщений: 52
|
Cronos20, не обязательно тестировать. Возможно ведь это и популярная проблема. Я же не знаю. Ну и по тестировать тоже можно, раз это раздел помощи.
Ну а по теме. Если я уберу float: right;, то действительно работает, но как мне прижать #content и #footer к правому краю #content-main? |
19.07.2012, 14:21 | #5 |
Форумчанин
Регистрация: 08.07.2010
Сообщений: 679
|
выравнивание блока возможно с помощью margin(-left,-right) : auto
а с высотой float борются размещая ниже пустой div с clear: both |
19.07.2012, 14:40 | #6 |
Пользователь
Регистрация: 15.01.2012
Сообщений: 52
|
Cronos20, огромное спасибо. Работает. Данный способ взял на заметку. Тему можно закрывать.
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Как сделать блок на всю высоту окна минус высоту шапки и футера | Qaliti | HTML и CSS | 3 | 19.07.2012 13:20 |
Как растянуть div на оставшуюся высоту родительского div'a? | Gans.7 | HTML и CSS | 0 | 01.04.2012 10:55 |
Проблема height в теге div | moshkin_ura | HTML и CSS | 6 | 26.09.2011 20:16 |
Div - динамическая высота (height) | DNCH | HTML и CSS | 4 | 27.09.2010 22:48 |
div на всю высоту ячейки | Nikolay 0001 | JavaScript, Ajax | 5 | 30.11.2008 12:14 |