<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

В начале курса у нас будет только идея, а в конце готовый продукт, который можно использовать в практических целях.

В рамках упражнений курса Вы параллельно со мной будете создавать свою большую программу на Java, что даст Вам необходимую практику, после которой для Вас уже не будет разницы, какого размера создавать программы.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Форум сайта MyRusakov.ru

Блоки выезжают под футер
15.10.2011 21:33:08 Блоки выезжают под футер Сообщение #1
brussens

brussens

Мега-мастер

Мега-мастер

Дата регистрации:
11.10.2011 22:50:07

Сообщений: 438

Сегодня решил сверстать главную страницу для нового проекта, только вот появилась проблема, при добавлении большого количества блоков в левой колонке, основной блок не тянется, и блоки просто выезжают вниз под футер, кто может помоч?
Профиль Ответить
15.10.2011 21:38:13 Блоки выезжают под футер Сообщение #2
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Покажите текущий HTML-код.
Профиль Ответить
15.10.2011 21:41:30 Блоки выезжают под футер Сообщение #3
brussens

brussens

Мега-мастер

Мега-мастер

Дата регистрации:
11.10.2011 22:50:07

Сообщений: 438

html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>ALGEBRA - Главная</title>
<link href="styles/index.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header"></div>
<div id="main">
<div id="headnav">
<div id="userpanel">
<div id="pr"><strong>Рейтинг: <a href="#">107,5</a></strong>
</div>
</div>
<div id="menubg">
<div id="menulogo"></div>
<ul id="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">Афиша</a></li>
<li><a href="#">Миксы</a></li>
<li><a href="#">Треки</a></li>
<li><a href="#">Ремиксы</a></li>
<li><a href="#">Поиск</a></li>
<li><a href="#">DJ's</a></li>
<li><a href="#">TOP</a></li>
<li><a href="#">Фото</a></li>
<li><a href="#">Видео</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Маркет</a></li>
</ul>
</div>
<div>
<div id="leftside">
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
</div>
<div id="contentside"></div>
<div id="rightside">
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer"><p>ALGEBRA &copy; 2011. Все права защищены!</p></div>

</body>
</html>

css
@charset "utf-8";
/* CSS Document */
body {
background-color:#000;
background-image:url("../images/header.png";
background-repeat:no-repeat;
}
#main {
background-color:#FFF;
width:990px;
min-height:1000px;
border-radius:7px 7px 0 0;
border-bottom-image: url("../images/border.png"/round;
}
#userpanel {
height:30px;
padding-top:15px;
}
#headnav {
padding-right:10px;
padding-left:10px;
}
#header {
min-height:350px;
}
#footer {
background-color:#999;
width:990px;
min-height:50px;
text-align:center;
padding-top:10px;
font-size:14px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
background-position:bottom;
position:absolute;
}
#leftside {
width:239px;
min-height:500px;
float:left;
}
#contentside {
width:470px;
min-height:500px;
float:left;
border:1px solid #000;
border-radius:7px;
margin:10px;
}
#rightside {
width:239px;
min-height:500px;
float:left;
}
#menubg {
background-color:#000;
height:30px;
padding-top:10px;
border-radius:7px;
}
#menu {
list-style:none;
display:inline;
color:#FFF;
padding-left:10px;
padding-right:10px;
}
#menu li{
list-style:none;
display:inline;
padding:3px;
color:#FFF;
font-size:12px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
#menu li a {
text-decoration:none;
color:#FFF;
}
#menu li a:hover {
text-decoration:none;
border-bottom: none;
color:#FFF;
border-bottom: 1px dashed #FFF;
}
#menu li a:active {
color:#FFF;
}
#menu li a:visited {
text-decoration:blink;
color:#FFF;
}
.block {
background-color:#FFF;
}
.blockbody {
background-color:#FFF;
padding:5px;
border:1px solid #000;
border-radius:7px;
margin-top:10px;
}
.blockbody h1 {
font-size:14px;
margin:5px;
}
#pr {
text-align:right;
font-size:12px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
#pr a {
background-color:#C30;
text-decoration:none;
color:#FFF;
padding:1px;
}
Профиль Ответить
15.10.2011 21:47:04 Блоки выезжают под футер Сообщение #4
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Добавьте перед блоком с footer, такой блок:
<div style="clear: both;"></div>
Профиль Ответить
15.10.2011 21:49:52 Блоки выезжают под футер Сообщение #5
brussens

brussens

Мега-мастер

Мега-мастер

Дата регистрации:
11.10.2011 22:50:07

Сообщений: 438

Спасибо, добавил, но только футер встал на место, что косается основного блока, то он не тянется всё равно(((
Профиль Ответить
15.10.2011 22:10:45 Блоки выезжают под футер Сообщение #6
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

У Вас вёрстка в основе неправильная. Тут исправить крайне проблемно, а дальше будет только хуже.
Основа блочной вёрстки для Вашего формата примерно такая:
Блок_головы
Блок_верхнего_меню
Блок_центральной_части
Левый_блок
Правый_блок
Центральный_блок
Блок_отмены_позиционирования
Блок_подвала

Поэтому переделайте вёрстку по этому шаблону.
"Блок отмены позиционирования" - это тот блок, что я дал в предыдущем сообщении.
Профиль Ответить
16.10.2011 20:31:53 Блоки выезжают под футер Сообщение #7
brussens

brussens

Мега-мастер

Мега-мастер

Дата регистрации:
11.10.2011 22:50:07

Сообщений: 438

Спасибо, Михаил. Начал заново делать по тому варианту, что вы мне сказали, только вот всё равно не тянется тот блок, в котором находятся сами блоки. т.е. левый, правый, и центральный, вот код:
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Главная</title>
<link href="styles/index.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="header"></div>
<div id="main">
<div id="userpanel">
<div id="pr"><strong>Рейтинг: <a href="#">107,5</a></strong>
</div>
</div>
<div id="leftside">
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
<div class="blockbody"><h1>Кто онлайн?</h1>
<div class="block" title="Кто онлайн?">0 пользователей онлайн.</div>
</div>
</div>
<div id="rightside"></div>
<div id="contentside"></div>

</div>
<div style="clear: both;"></div>
<div id="footer"></div>
</body>
</html>

css
@charset "utf-8";
/* CSS Document */
body {
background-color:#000;
}
#main {
background-color:#FFF;
width:990px;
min-height:600px;
margin-left:auto;
margin-right:auto;
}
#leftside {
background-color:#0F9;
width:245px;
min-height:600px;
float:left;
}
#rightside {
background-color:#0CF;
width:245px;
min-height:600px;
float:right;
}
#contentside {
background-color:#9F9;
width:500px;
min-height:600px;
float:left;
}
#footer {
background-color:#CCC;
background-position:bottom;
width:990px;
min-height:100px;
margin-left:auto;
margin-right:auto;
}
.block {
background-color:#FFF;
}
.blockbody {
background-color:#FFF;
padding:5px;
border:1px solid #000;
border-radius:7px;
margin-top:10px;
}
.blockbody h1 {
font-size:14px;
margin:5px;
}

Профиль Ответить
16.10.2011 20:36:16 Блоки выезжают под футер Сообщение #8
brussens

brussens

Мега-мастер

Мега-мастер

Дата регистрации:
11.10.2011 22:50:07

Сообщений: 438

Михаил, простите за ложную тревогу, решил проблему добавив после <div id="contentside"></div>
блок отмены позиционирования, если не сложно, прокомментируйте пожалуйста переделанный код, заранее благодарен)
Профиль Ответить
16.10.2011 20:39:06 Блоки выезжают под футер Сообщение #9
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Комментировать здесь особо нечего, структура является обычной блочной вёрсткой. И каждый верстальщик её использует в основе сайта.
Что касается блока отмены позиционирования, то он предназначен для того, чтобы отменить влияние свойства float, иначе блоки начнут залезать друг на друга. А если отменить (то есть блок с clear: both, то тогда последующие блоки будут находиться не сбоку предыдущих, а снизу, что и требуется для блока с footer.
Профиль Ответить