<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

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

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

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

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

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

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

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

Контент сайта обтекает левый блок снизу
13.09.2012 17:53:39 Контент сайта обтекает левый блок снизу Сообщение #1
al_im

al_im

Новичок

Новичок

Дата регистрации:
20.05.2012 18:25:19

Сообщений: 16

Здравствуйте.
Можете помочь исправить проблему? Мне нужно что бы сайт выглядил примерно так, но без добавления ячеек в таблице... http://s003.radikal.ru/i203/1209/14/5114295ac995.jpg , менял позиционирование у всех блоков, значение "float", пока что единственное что получилось(CSS):

#all {
margin-left: 224px;
}
table#page {
border: 0px solid black;
border-collapse: collapse;
width: 800px;
height: 500px;
}
td {
border: 1px solid black;
}
#content {
min-height: 320px;
font-family: Arial;
font-size: 84%;
color: #333;
line-height: 150%;
padding: 10px;
vertical-align: top;
}
#footer {
height: 30px;
}
#top {
height: 150px;
}
a {
color: blue;
margin-bottom: 2px;
text-decoration: none;
}
a:hover {
color: black;
}
.headert {
font-size: 190%;
text-transform: uppercase;
font-family: Verdana;
}
#menu {
float: left;
margin-right: 5px;
}
#menu ul {
text-align: center;
list-style: none;
margin: 0;
padding: 0;
width: 100px;
border: 1px solid black;
}
#menu ul li {
position: relative;
display: block;
padding: 2px;
border: 0px solid black;
text-decoration: none;
background-color: #FFE4B5;
}
#menu ul li:hover {
background-color: #FFCC66;
}
li ul {
display: none;
left: 100px;
position: absolute;
top: 0px;
}
li:hover ul {
display: block;
}

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Блочная верстка сайта</title>
<meta http-equiv="content-type" content="charset=windows-1251; text/html;">
<link rel="stylesheet" type="text/css" href="example.css">
</head>
<body>

<div id="all">
<table id="page">
<tr><td id="top">Шапка сайта</td></tr>
<tr><td id="content">
<div id="menu">
<ul>
<li><a href="http://s003.radikal.ru/i203/1209/14/5114295ac995.jpg">Главная</a>
<li><a href="#">Меню</a>
<ul>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
</ul>
<li><a href="#">Меню</a>
<ul>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
</ul>
<li><a href="#">Меню</a>
<ul>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
</ul>
</ul>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis cursus ullamcorper.
Nullam tempor nulla sit amet nulla dapibus dignissim. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. In in sapien sed elit euismod aliquet. Cras vitae
quam sed elit euismod eleifend eget a enim. Vivamus congue lacus non lacus consectetur hendrerit.
Sed ullamcorper diam vitae mi varius rutrum. Proin eget velit in dui bibendum ultricies. Fusce
varius scelerisque tellus, euismod sodales augue sollicitudin quis. Nam congue massa a tellus
tempus sed fringilla lorem varius. Donec condimentum gravida mauris vel sodales. Aenean dui
lectus, tristique ut faucibus at, tincidunt eget ipsum. Ut sed porttitor velit. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ligula neque, laoreet quis
semper ut, scelerisque ut eros. Sed in dictum ante.
Integer nec justo odio. Nulla facilisi. Morbi et leo est. Aenean dictum tincidunt dolor id consequat.
Nulla aliquet, nisi at pharetra suscipit, leo enim ornare mi, vel aliquam risus orci vitae purus. Duis
volutpat dapibus leo. Sed sit amet arcu eros.
Ut in dolor justo, non vulputate dolor. Aenean feugiat, sem quis dignissim volutpat, ipsum lorem ultric
ies ipsum, tincidunt elementum velit libero quis arcu. Etiam eget mauris quis mi faucibus consequat sit amet ac enim. Duis
in orci massa. Pellentesque sit amet nunc a justo convallis auctor et ut enim. Donec consequat lacinia rhoncus. Suspen
disse tincidunt magna eu diam pulvinar imperdiet. Praesent cursus venenatis elit, placerat tincidunt mi volutpat eget. Suspendisse potenti.
Maecenas iaculis, purus in euismod dapibus, neque lacus lacinia felis, sit amet gravida lectus elit vulputate ante.
Morbi et diam sem. Sed tincidunt erat at turpis fringilla gravida. Nulla ultricies libero in nisl vulpu
tate suscipit. Duis vestibulum magna quis ipsum vestibulum consectetur. Pellentesque non mi leo, quis vulputate puru
s. Donec nec quam dui, et faucibus arcu. Vestibulum iaculis nulla quis est interdum hendrerit. Aliquam rhoncus ligula vel
velit lobortis ut luctus nisl egestas. Aliquam at augue orci, ac gravida augue.
Pellentesque ipsum quam, commodo sed facilisis non, laoreet et ante. Etiam pellentes
que faucibus laoreet. Suspendisse urna dolor, molestie a consequat non, posuere a leo. Aliquam sit
amet metus mi, sit amet aliquam ante. In hac habitasse platea dictumst. Praesent sodales consequat
eros et cursus. Donec faucibus pharetra est, ac cursus est lobortis in. Pellentesque volutpat, turpis
non consequat elementum, velit urna scelerisque arcu, eu iaculis nisl elit ut arcu.
Duis fringilla dictum ultricies. Proin iaculis, turpis vel mattis auctor, mi nisl dapibus arcu,
at facilisis augue sem fermentum urna. Suspendisse nunc magna, tempor vel dictum ut, tincidunt vitae mauris. Mauris aliquam s
em nec
ipsum suscipit in ultrices est egestas. Nunc tempor, massa eu vehicula rutrum, massa nulla viverra mauris, ut fring
illa massa ligula et metus. Nunc leo metus, ullamcorper vitae vehicula eget, condimentum id massa. Etiam molestie, elit ut volutpat rhoncus, ligula massa rhoncus sapien, ut auctor ipsum ante nec eros. Aliquam erat volutpat.
In auctor, tellus quis suscipit tempus, est felis lobortis erat, euismod consequat nibh mauris id ante. Proin tempor consequat dolo
r, vitae luctus purus placerat id. Maecenas nec nibh non enim eleifend semper vel quis augue. Donec ligula nulla, ultricies nec tempor
et, tempor et erat. Integer volutpat, lacus non molestie facilisis, purus eros molestie ante, id eleifend diam quam vitae elit. Suspe
ndisse potenti. Donec vitae iaculis arcu.
Maecenas ultrices lectus sed ipsum aliquet viverra. Proin enim tellus, semper a tincidunt in, consequat id justo. Nam non metus feli
s, at rhoncus libero. Vestibulum rutrum congue tempus. Nullam quis malesuada arcu. Sed imperdiet, elit et semper porta, libero ipsum ornare elit, convallis volutpat tellus lorem in tortor. Integer eu tellus dui. Cras justo justo, condimentum et porta at, adipiscing a velit.
</td></tr>
<tr><td id="footer">Подвал сайта</td></tr>
</table>
</div>

</body>
</html>


Подскажите пожалуйста как можно добиться без добавления ячеек в таблицу результата показанного на скриншоте? Заранее благодарю.
Профиль Ответить
13.09.2012 20:21:43 Контент сайта обтекает левый блок снизу Сообщение #2
Admin

Admin

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

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

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

Сообщений: 3063

Тут всё равно придется хотя бы в отдельный блок <div> ставить сам текст, и его уже позиционировать.
Профиль Ответить
14.09.2012 17:11:45 Контент сайта обтекает левый блок снизу Сообщение #3
al_im

al_im

Новичок

Новичок

Дата регистрации:
20.05.2012 18:25:19

Сообщений: 16

Что то сам сделал...

CSS:

#all {
margin-left: 224px;
}
table#page {
border: 0px solid black;
border-collapse: collapse;
width: 800px;
height: 500px;
}
td {
border: 1px solid black;
}
#content {
min-height: 320px;
font-family: Arial;
font-size: 84%;
color: #333;
line-height: 150%;
padding: 10px;
vertical-align: top;
}
#footer {
height: 30px;
}
#top {
height: 150px;
}
a {
color: blue;
margin-bottom: 2px;
text-decoration: none;
}
a:hover {
color: black;
}
.headert {
font-size: 190%;
text-transform: uppercase;
font-family: Verdana;
}
#menu {
float: left;
margin-right: 5px;
}
#menu ul {
text-align: center;
list-style: none;
margin: 0;
padding: 0;
width: 100px;
border: 1px solid black;
}
#menu ul li {
position: relative;
display: block;
padding: 2px;
border: 0px solid black;
text-decoration: none;
background-color: #FFE4B5;
}
#left {
background-color: lightgray;
border: 1px solid black;
width: 165px;
height: 500px;
padding: 5px;
}
#menu ul li:hover {
background-color: #FFCC66;
}
li ul {
display: none;
left: 100px;
position: absolute;
top: 0px;
}
li:hover ul {
display: block;
}
#container {
float: right;
width: 605px;
}


HTML:

<!DOCTYPE html>
<html>
<head>
<title>Блочная верстка сайта</title>
<meta http-equiv="content-type" content="charset=windows-1251; text/html;">
<link rel="stylesheet" type="text/css" href="example.css">
</head>
<body>

<div id="all">
<table id="page">
<tr><td id="top">Шапка сайта</td></tr>
<tr><td id="content">
<div id="left">
<div id="menu">
<ul>
<li><a href="http://s003.radikal.ru/i203/1209/14/5114295ac995.jpg">Главная</a>
<li><a href="#">Меню</a>
<ul>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
</ul>
<li><a href="#">Меню</a>
<ul>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
</ul>
<li><a href="#">Меню</a>
<ul>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
</ul>
</ul>
</div>
</div>
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis cursus ullamcorper.
Nullam tempor nulla sit amet nulla dapibus dignissim. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. In in sapien sed elit euismod aliquet. Cras vitae
quam sed elit euismod eleifend eget a enim. Vivamus congue lacus non lacus consectetur hendrerit.
Sed ullamcorper diam vitae mi varius rutrum. Proin eget velit in dui bibendum ultricies. Fusce
varius scelerisque tellus, euismod sodales augue sollicitudin quis. Nam congue massa a tellus
tempus sed fringilla lorem varius. Donec condimentum gravida mauris vel sodales. Aenean dui
lectus, tristique ut faucibus at, tincidunt eget ipsum. Ut sed porttitor velit. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ligula neque, laoreet quis
semper ut, scelerisque ut eros. Sed in dictum ante.
Integer nec justo odio. Nulla facilisi. Morbi et leo est. Aenean dictum tincidunt dolor id consequat.
Nulla aliquet, nisi at pharetra suscipit, leo enim ornare mi, vel aliquam risus orci vitae purus. Duis
volutpat dapibus leo. Sed sit amet arcu eros.
Ut in dolor justo, non vulputate dolor. Aenean feugiat, sem quis dignissim volutpat, ipsum lorem ultric
ies ipsum, tincidunt elementum velit libero quis arcu. Etiam eget mauris quis mi faucibus consequat sit amet ac enim. Duis
in orci massa. Pellentesque sit amet nunc a justo convallis auctor et ut enim. Donec consequat lacinia rhoncus. Suspen
disse tincidunt magna eu diam pulvinar imperdiet. Praesent cursus venenatis elit, placerat tincidunt mi volutpat eget. Suspendisse potenti.
Maecenas iaculis, purus in euismod dapibus, neque lacus lacinia felis, sit amet gravida lectus elit vulputate ante.
Morbi et diam sem. Sed tincidunt erat at turpis fringilla gravida. Nulla ultricies libero in nisl vulpu
tate suscipit. Duis vestibulum magna quis ipsum vestibulum consectetur. Pellentesque non mi leo, quis vulputate puru
s. Donec nec quam dui, et faucibus arcu. Vestibulum iaculis nulla quis est interdum hendrerit. Aliquam rhoncus ligula vel
velit lobortis ut luctus nisl egestas. Aliquam at augue orci, ac gravida augue.
Pellentesque ipsum quam, commodo sed facilisis non, laoreet et ante. Etiam pellentes
que faucibus laoreet. Suspendisse urna dolor, molestie a consequat non, posuere a leo. Aliquam sit
amet metus mi, sit amet aliquam ante. In hac habitasse platea dictumst. Praesent sodales consequat
eros et cursus. Donec faucibus pharetra est, ac cursus est lobortis in. Pellentesque volutpat, turpis
non consequat elementum, velit urna scelerisque arcu, eu iaculis nisl elit ut arcu.
Duis fringilla dictum ultricies. Proin iaculis, turpis vel mattis auctor, mi nisl dapibus arcu,
at facilisis augue sem fermentum urna. Suspendisse nunc magna, tempor vel dictum ut, tincidunt vitae mauris. Mauris aliquam s
em nec
ipsum suscipit in ultrices est egestas. Nunc tempor, massa eu vehicula rutrum, massa nulla viverra mauris, ut fring
illa massa ligula et metus. Nunc leo metus, ullamcorper vitae vehicula eget, condimentum id massa. Etiam molestie, elit ut volutpat rhoncus, ligula massa rhoncus sapien, ut auctor ipsum ante nec eros. Aliquam erat volutpat.
In auctor, tellus quis suscipit tempus, est felis lobortis erat, euismod consequat nibh mauris id ante. Proin tempor consequat dolo
r, vitae luctus purus placerat id. Maecenas nec nibh non enim eleifend semper vel quis augue. Donec ligula nulla, ultricies nec tempor
et, tempor et erat. Integer volutpat, lacus non molestie facilisis, purus eros molestie ante, id eleifend diam quam vitae elit. Suspe
ndisse potenti. Donec vitae iaculis arcu.
Maecenas ultrices lectus sed ipsum aliquet viverra. Proin enim tellus, semper a tincidunt in, consequat id justo. Nam non metus feli
s, at rhoncus libero. Vestibulum rutrum congue tempus. Nullam quis malesuada arcu. Sed imperdiet, elit et semper porta, libero ipsum ornare elit, convallis volutpat tellus lorem in tortor. Integer eu tellus dui. Cras justo justo, condimentum et porta at, adipiscing a velit.
</div>
</td></tr>
<tr><td id="footer">Подвал сайта</td></tr>
</table>
</div>

</body>
</html>


Но теперь, если я увеличиваю высоту блока - контент "уезжает" под левый блок(в котором находится меню), можете как то помочь? Спасибо.
Профиль Ответить
14.09.2012 18:37:49 Контент сайта обтекает левый блок снизу Сообщение #4
Admin

Admin

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

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

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

Сообщений: 3063

position:absolute к контейнеру меню, и ещё уменьшить ширину блока с текстом.
Профиль Ответить
14.09.2012 19:11:36 Контент сайта обтекает левый блок снизу Сообщение #5
al_im

al_im

Новичок

Новичок

Дата регистрации:
20.05.2012 18:25:19

Сообщений: 16

Спасибо Вам большое, остался только один вопрос: как сделать так что б левый блок тянулся вместе с контентом, пробовал добавлять position: relative;, во все всевозможные контейнеры, но блок все равно остается на месте. CSS:

#all {
margin-left: 224px;
}
table#page {
border: 0px solid black;
border-collapse: collapse;
width: 800px;
height: 500px;
}
td {
border: 1px solid black;
}
#content {
min-height: 320px;
font-family: Arial;
font-size: 84%;
color: #333;
line-height: 150%;
padding: 10px;
vertical-align: top;
}
#footer {
height: 30px;
}
#top {
height: 150px;
background-image: url(top.jpg);
background-repeat: ;
}
a {
color: blue;
margin-bottom: 2px;
text-decoration: none;
}
a:hover {
color: black;
}
.headert {
font-size: 190%;
text-transform: uppercase;
font-family: Verdana;
}
#menu {
float: left;
margin-right: 5px;
}
#menu ul {
text-align: center;
list-style: none;
margin: 0;
padding: 0;
width: 100px;
border: 1px solid black;
}
#menu ul li {
position: relative;
display: block;
padding: 2px;
border: 0px solid black;
text-decoration: none;
background-color: #FFE4B5;
}
#left {
background-color: lightgray;
border-right: 1px solid black;
border-bottom: 1px solid black;
width: 175px;
height: 100%;
padding: 5px;
margin-left: -10px;
margin-top: -10px;
position: absolute;
}
#menu ul li:hover {
background-color: #FFCC66;
}
li ul {
display: none;
left: 100px;
position: absolute;
top: 0px;
}
li:hover ul {
display: block;
}
#container {
float: right;
width: 590px;
}


HTML:

<!DOCTYPE html>
<html>
<head>
<title>Блочная верстка сайта</title>
<meta http-equiv="content-type" content="charset=windows-1251; text/html;">
<link rel="stylesheet" type="text/css" href="example.css">
</head>
<body>

<div id="all">
<table id="page">
<tr><td id="top">Шапка сайта</td></tr>
<tr><td id="content">
<div id="cb">
<div id="left">
<div id="menu">
<ul>
<li><a href="http://s003.radikal.ru/i203/1209/14/5114295ac995.jpg">Главная</a>
<li><a href="#">Меню</a>
<ul>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
</ul>
<li><a href="#">Меню</a>
<ul>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
</ul>
<li><a href="#">Меню</a>
<ul>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
<li><a href="#">Подменю</a></li>
</ul>
</ul>
</div>
</div>
<div id="container">
Ut sagittis, arcu adipiscing vehicula tempus, nulla sapien imperdiet tellus, ut lobortis diam libero ut libero. Sed eget eros nec metus vulputate tempus. Integer urna massa, elementum vitae placerat eget, ultricies vitae nibh. Vestibulum placerat elit sed erat molestie vel euismod dolor consequat. Donec id dolor nisi. Integer magna dui, varius at pharetra vitae, dignissim vel dui. Praesent nunc magna, dignissim at ornare tristique, mattis ut lectus. Proin nibh libero, dignissim et fringilla at, tempor eu dolor.

Curabitur vehicula libero arcu, auctor interdum diam. Nunc sit amet dui sed urna laoreet tincidunt. Cras nec nibh leo. Sed ornare dapibus arcu, eu cursus enim tempor ut. Fusce tortor elit, pretium ut tempor ut, lacinia blandit libero. In volutpat massa nibh, at vulputate turpis. In laoreet, ante pulvinar eleifend adipiscing, tellus nunc tincidunt risus, sit amet suscipit dolor erat ac elit. Sed mollis vestibulum purus, et ultrices lacus laoreet nec. Vivamus vel tortor eu nibh consequat placerat. In turpis tortor, consequat at dictum quis, ultrices at arcu. Suspendisse aliquet aliquet mauris, bibendum aliquet tellus euismod luctus. Curabitur luctus blandit leo, vitae commodo metus facilisis et. Donec ultricies nunc sit amet felis iaculis in egestas leo vehicula. Pellentesque mi purus, elementum sed varius non, faucibus eu velit. Sed eget massa quis nulla semper gravida.

Nunc et ante ut tortor venenatis sagittis sed quis est. Cras mauris orci, rutrum id tempus ut, laoreet ut nisi. Nulla elit velit, auctor id sollicitudin a, mattis vel nisl. Proin cursus orci ut nisi consectetur facilisis. Morbi aliquam felis sed dolor consequat pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet nulla ipsum, eget gravida augue. Integer rutrum vestibulum mi, eu euismod metus volutpat in. Vestibulum sapien sem, ullamcorper ac feugiat eget, tincidunt ut leo. Curabitur dictum semper tortor vitae pellentesque. Praesent ac orci nec nibh rhoncus accumsan. Nulla nec turpis tellus, nec aliquam quam. Sed scelerisque leo quis magna blandit a ornare augue porta. Praesent eget nisl quam, quis mattis odio.

Aenean consectetur ultricies enim, ac volutpat mi eleifend a. Suspendisse aliquam aliquet sem tincidunt cursus. Sed lorem turpis, hendrerit ut venenatis nec, cursus ac sem. Integer eu eros metus, nec sodales magna. Pellentesque eu nisi diam, eu malesuada urna. Suspendisse potenti. Praesent laoreet lorem sit amet diam posuere eget malesuada mauris consectetur. Praesent luctus pulvinar laoreet. Morbi mattis euismod arcu, sed consequat nisi porttitor at.

Morbi gravida cursus pharetra. Ut semper sem at tellus laoreet ac rhoncus tellus dictum. Suspendisse potenti. Nunc ac luctus urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In condimentum sagittis nulla, in cursus quam placerat a. Vivamus rutrum egestas augue, vel lacinia felis egestas a. Proin tortor massa, rhoncus at scelerisque ac, viverra ac diam. Integer vehicula, tortor quis aliquam commodo, turpis lacus scelerisque sapien, at ornare tortor diam ut enim. Etiam a neque ipsum, ut adipiscing mi.

Phasellus in neque est. Curabitur vulputate convallis sagittis. Sed accumsan lacus in metus suscipit pretium. Sed pulvinar porttitor porta. Etiam elit mauris, aliquet vitae sollicitudin nec, rutrum vitae velit. Proin tristique est quis risus eleifend at sollicitudin felis cursus. Nam rhoncus neque nulla, sed lacinia leo. Maecenas vitae quam vel risus interdum vestibulum.

Suspendisse eu dui nibh. Praesent porttitor ipsum vitae arcu tincidunt et mollis risus rhoncus. Maecenas at lectus ac leo luctus pharetra quis non nulla. Cras quis nibh elit. Vestibulum sit amet mauris purus. Nunc at dui orci, vitae ultrices leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Nullam tristique, enim in interdum viverra, metus ipsum commodo ipsum, ut volutpat sapien nibh mattis justo. Ut est metus, ultrices vitae ullamcorper in, fringilla a turpis. Vestibulum id risus odio. Nunc tincidunt turpis eu libero malesuada ut convallis leo pretium. Integer placerat sagittis mattis. Sed neque tortor, ullamcorper et sodales at, auctor vitae odio. Vestibulum consequat congue magna, quis vehicula quam ultricies non. Morbi quis massa sed tortor dictum aliquam.

Curabitur convallis eros vel turpis dapibus consectetur. Integer at enim risus. Nulla facilisi. Vestibulum at justo ut lacus ultrices condimentum. Vestibulum adipiscing aliquam euismod. Fusce mattis mauris ut purus interdum vulputate. In feugiat dolor sit amet orci semper ultricies bibendum lorem ullamcorper. Mauris neque turpis, dignissim eget fermentum a, laoreet vulputate ligula. Suspendisse purus sem, cursus vulputate molestie ac, vestibulum sodales sapien. Aenean vestibulum purus in ipsum suscipit in auctor risus imperdiet. In et tincidunt lectus.

Etiam tempor pellentesque dolor, a consectetur dui placerat et. Suspendisse rutrum iaculis magna quis ullamcorper. Donec libero nulla, condimentum ut imperdiet non, malesuada vel orci. Phasellus at arcu ut lorem vehicula aliquet sit amet ac leo. Phasellus convallis lorem sem, ut tempus nisi. Nulla nunc leo, viverra sed tempus non, ullamcorper a sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut sapien molestie enim dictum vulputate sit amet et nisl.

In volutpat, arcu eget dictum interdum, tortor nisl tempus quam, quis congue velit orci ut turpis. Aliquam sed neque ante. Aenean nec leo nunc, at mattis urna. Quisque sodales justo et felis facilisis fringilla. Donec auctor blandit risus sed viverra. Proin feugiat, sapien eget feugiat vehicula, ligula nisl mattis tellus, eget elementum dolor dolor ac erat. Vestibulum congue sodales ultricies. Aliquam eleifend pharetra arcu, elementum sagittis diam scelerisque in. Vestibulum scelerisque, dolor ut egestas placerat, velit urna tempus lacus, eu accumsan erat enim in augue. Sed posuere placerat sollicitudin. Nunc nec elementum arcu. Nulla id ante risus. In hac habitasse platea dictumst. Vivamus quis ipsum non quam rhoncus facilisis sit amet et felis. Suspendisse potenti.

Phasellus scelerisque nunc risus. Donec mollis euismod egestas. Morbi consequat, metus nec laoreet pulvinar, urna purus pretium massa, vel semper elit libero ut erat. Nulla commodo vestibulum mauris id scelerisque. Ut ac enim orci, nec aliquet justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum, libero id vehicula hendrerit, velit nunc pellentesque velit, a vulputate ante sapien in felis. Integer a elit et diam tincidunt imperdiet ut a eros. Aliquam elit quam, fringilla in venenatis nec, dignissim non purus.

Donec consequat elit dignissim augue tincidunt pellentesque. Sed gravida turpis felis. Donec leo massa, pharetra vel tincidunt a, lacinia non tellus. Nam rhoncus lectus in leo interdum tristique. Pellentesque semper elit consequat metus porttitor vel faucibus quam cursus. Pellentesque placerat neque et nibh tincidunt vitae ullamcorper turpis sagittis. Aenean non urna nunc. Donec tincidunt elit at erat luctus iaculis. Vestibulum nec odio eu magna aliquet malesuada quis elementum neque. Aenean interdum sapien sed enim dignissim at mollis ante pharetra. Sed elementum, dui eget consequat viverra, dolor velit pharetra nulla, vel consectetur urna velit eget magna. Donec venenatis justo nec magna vestibulum congue aliquam dui posuere. Duis ac tellus sed libero vestibulum fringilla. Proin accumsan, elit et dapibus porttitor, augue lorem volutpat urna, ac mattis sem orci et mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

In faucibus massa ac dolor sollicitudin a elementum magna molestie. Aliquam erat volutpat. Duis faucibus neque eu ligula euismod ut semper eros mattis. Curabitur et tortor eros, ac consequat nibh. Vestibulum bibendum laoreet cursus. Phasellus nec nunc orci. Nam suscipit eros non erat interdum tincidunt aliquam justo iaculis. Suspendisse vestibulum libero lectus. Proin dapibus turpis non magna pretium non molestie quam hendrerit.

Aliquam at augue vitae nibh tincidunt accumsan. Nulla facilisi. Mauris vestibulum convallis gravida. Donec et purus justo, et aliquet orci. Proin dignissim sagittis nulla, in cursus est vulputate sed. Nullam dictum, erat sit amet aliquam vestibulum, est velit venenatis quam, sit amet mattis dui enim ut tortor. Pellentesque at magna tortor.

Etiam neque velit, condimentum at aliquam nec, feugiat in neque. Aenean id nisi in metus scelerisque luctus. Nullam facilisis enim vitae lectus tempor faucibus. In ut quam at ante luctus dapibus nec vel augue. Praesent rutrum mauris et erat suscipit accumsan. Duis pellentesque facilisis euismod. Fusce eros leo, bibendum a elementum eget, porta et nisl. Sed at diam eget orci iaculis aliquet. Vivamus malesuada, risus posuere interdum pellentesque, turpis nulla blandit nunc, luctus lobortis lorem quam a metus. Etiam bibendum, purus nec venenatis aliquam, nisi mauris eleifend ipsum, id iaculis orci metus eget lorem. Sed eu nibh erat, eget imperdiet leo. Vestibulum porttitor cursus fermentum. Mauris mi magna, lobortis at facilisis ut, tristique et quam. Vestibulum scelerisque urna venenatis dui ornare rutrum. Vivamus placerat, erat placerat tincidunt cursus, turpis neque molestie leo, bibendum dapibus mi sapien sit amet urna.

Proin nibh leo, consequat vel accumsan in, molestie a lacus. Etiam commodo orci massa, eu dictum elit. Nunc convallis dignissim faucibus. Nam semper nisl ac turpis vehicula a condimentum mi malesuada. Praesent laoreet sapien id diam dapibus ut posuere turpis faucibus. Pellentesque at metus sem. Vivamus ornare scelerisque molestie. Nunc convallis tincidunt aliquet. Integer libero tellus, placerat sed laoreet eu, mollis pretium quam.

In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer nunc erat, suscipit ac molestie sit amet, pharetra vitae lectus. Curabitur diam nisl, laoreet eu dictum a, gravida sed quam. Donec lacinia, mi nec lobortis sollicitudin, ligula lorem molestie risus, sit amet tempus lacus lectus ac tellus. Nulla nec neque turpis. Integer a justo quis lorem condimentum molestie.

Nunc nunc est, viverra in mollis ac, facilisis eu mi. Pellentesque enim orci, scelerisque eu gravida sit amet, tincidunt pretium velit. Donec mattis lectus eget felis molestie vitae rutrum arcu dignissim. Nam tempus ante ac libero venenatis placerat dapibus quam ultrices. Integer urna ipsum, tincidunt non laoreet vel, malesuada blandit mi. Integer condimentum luctus orci, eu molestie odio dictum vitae. Duis ut erat non erat mollis sodales at nec purus. Praesent libero nisi, accumsan egestas posuere ac, tempor quis felis. Aenean gravida urna sit amet elit sollicitudin auctor. Vestibulum rutrum, justo et porttitor luctus, velit nulla auctor libero, vitae ultricies justo nisi sed massa. Suspendisse purus massa, vestibulum et tempus ut, fermentum ullamcorper mauris. Nulla metus turpis, dapibus quis gravida at, vehicula porttitor leo. Proin eu lobortis orci. Sed tincidunt convallis lorem a feugiat. Ut hendrerit facilisis mi ut rutrum.

Vestibulum sed lectus eu ligula hendrerit condimentum. Integer nisl quam, semper vel ullamcorper non, hendrerit ultricies lacus. Aenean fermentum velit non neque dictum vel luctus libero egestas. Integer porttitor auctor lorem, non volutpat elit scelerisque ut. Suspendisse malesuada lectus non nulla aliquet quis pretium risus pellentesque. Sed commodo ipsum eget eros vehicula ultrices. Vestibulum velit justo, venenatis in congue vel, egestas sit amet quam. Phasellus lobortis leo in nisl tristique eget semper elit varius. Proin faucibus egestas ligula egestas malesuada. Vivamus eros leo, posuere a commodo a, varius tempus lorem. Duis quis eros nulla. Phasellus ut tempus massa. Suspendisse hendrerit magna ligula.

Integer eleifend odio ut dui adipiscing lacinia. Vestibulum rhoncus arcu eu lorem gravida id sagittis metus semper. Morbi gravida dictum nisi bibendum porttitor. Donec neque libero, rhoncus vitae sagittis quis, tempor id nisl. Morbi vehicula, mi in convallis eleifend, nulla justo tempor lectus, auctor pulvinar libero ante feugiat nisi. Nunc vitae erat vel ligula tristique ornare. Donec interdum urna non diam molestie porta placerat nisl molestie. Quisque lectus enim, malesuada ac dictum nec, tristique ac ligula. Etiam at dolor vitae dui suscipit placerat. </div>
</td></tr>
<tr><td id="footer">Подвал сайта</td></tr>
</table>
</div>

</body>
</html>
Профиль Ответить
16.09.2012 10:39:29 Контент сайта обтекает левый блок снизу Сообщение #6
Admin

Admin

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

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

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

Сообщений: 3063

Тут тоже можно что-нибудь придумать. Оба этих дива должны быть в родительском контейнере, относительно которого их и нужно масштабировать.
Профиль Ответить
16.09.2012 11:40:09 Контент сайта обтекает левый блок снизу Сообщение #7
al_im

al_im

Новичок

Новичок

Дата регистрации:
20.05.2012 18:25:19

Сообщений: 16

Можете какой-нибудь примерный код дать?...
Профиль Ответить