Проблема с блоками

oleg.kan · January 3, 2013

Использовал разные свойства вроде float и display:block но не помогает.В общем ситуация следующая:Есть новость,фоны для заголовка и текста заданы в ячейках таблиц(это нужно,чтобы при увеличении кол-ва текста средний фон растягивался(если у кого-то есть альтернативный вариант пишите)) и еще 1 ячейка в таблицы для нижней части фона и мне нужно,чтобы эти блоки отталкивали футер.Точно такая же фигня со спанами в общем прикладываю код.

Хтмл пример со спанами

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<title>B?rnud?rzs R?GELE</title>
</head>
<div id="wrapper">
<div id="header">
<div id="top_line">
<ul>
<li class="left"><a href="#">Главная</a></li>
<li class="normal"><a href="#">О нас</a></li>
<li class="normal"><a href="#">Детский сад</a></li>
<li class="normal"><a href="#">Студии и курсы</a></li>
<li class="normal"><a href="#">Летний отдых</a></li>
<li class="right"><a href="#">Монтессори</a></li>
</ul>
</div>
<div id="logo">
<div id="nadpis"><img src="img/logo_nadpis.png" width="403" height="78"></div>
<div id="photo_1"><img src="img/logo_photo1.png" width="245" height="190"></div>
<div id="photo_2"><img src="img/logo_photo2.png" width="245" height="189"></div>
<div id="photo_3"><img src="img/logo_photo3.png" width="250" height="188"></div>
</div>
</div>
<div id="content">

<span id="content_title">Новости</span>
<span id="content_title">Новости</span>
<span id="content_title">Новости</span>
<span id="content_title">Новости</span>
<span id="content_title">Новости</span>
<span id="content_title">Новости</span>
<span id="content_title">Новости</span>
<span id="content_title">Новости</span>
<span id="content_title">Новости</span>
<span id="content_title">Новости</span>
<span id="content_title">Новости</span>

<!--<table class="news">
<tr>
<td background="img/news_head.png" width="400" height"40" class="news_header"><span> </span><span class="news_title">16 октября 2012 года в 17:30</span></td>
</tr>
<tr>
<td background="img/news_center.png" width="400" height"1" class="news_center">
<p>Состоится собрание для родителей детей от 0</p>
<p>до 3 лет, которые планируют посещать</p>
<p>студию "Вместе с мамой" (новая группа) и ещё</p>
<p>не был на собрании.</p></td>
</tr>
<tr>
<td background="img/news_footer.png" width="400" height"10" class="news_footer"> </td>
</tr>
</table>-->
<!--<table class="news">
<tr>
<td background="img/news_head.png" width="400" height"40" class="news_header"><span> </span><span class="news_title"><b>Нам исполняется 20 лет!</b></span></td>
</tr>
<tr>
<td background="img/news_center.png" width="400" height"1" class="news_center">
<p>Наш центр начал свою работу 1 сентября 1992</p>
<p>года.За эти годы мы вырастили и выпустили</p>
<p>много ребятишек. Многие из них уже закончили</p>
<p>школу и даже институт.Мы с радостью хотели</p>
<p>бы встретиться с нашими выпускниками,их</p>
<p>родителями,коллегами,друзьями на празд-</p>
<p>-ничном вечере!Желающие принять участие в</p>
<p>нашем юбилее – отзовитесь!Предварительная</p>
<p>дата встречи- 9 ноября...</p>
<img src="news/news 2.JPG" width="327" height="208">
</td>
</tr>
<tr>
<td background="img/news_footer.png" width="400" height"10" class="news_footer"> </td>
</tr>
</table>-->
</div>
<div class="clear"></div>
<div id="sidebar">

</div>
<div class="clear"></div>
<div id="footer">

</div>
</div>

<body>
</body>
</html>

Хтмл пример с новотными блоками

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<title>B?rnud?rzs R?GELE</title>
</head>
<div id="wrapper">
<div id="header">
<div id="top_line">
<ul>
<li class="left"><a href="#">Главная</a></li>
<li class="normal"><a href="#">О нас</a></li>
<li class="normal"><a href="#">Детский сад</a></li>
<li class="normal"><a href="#">Студии и курсы</a></li>
<li class="normal"><a href="#">Летний отдых</a></li>
<li class="right"><a href="#">Монтессори</a></li>
</ul>
</div>
<div id="logo">
<div id="nadpis"><img src="img/logo_nadpis.png" width="403" height="78"></div>
<div id="photo_1"><img src="img/logo_photo1.png" width="245" height="190"></div>
<div id="photo_2"><img src="img/logo_photo2.png" width="245" height="189"></div>
<div id="photo_3"><img src="img/logo_photo3.png" width="250" height="188"></div>
</div>
</div>
<div id="content">

<span id="content_title">Новости</span>

<table class="news">
<tr>
<td background="img/news_head.png" width="400" height"40" class="news_header"><span> </span><span class="news_title">16 октября 2012 года в 17:30</span></td>
</tr>
<tr>
<td background="img/news_center.png" width="400" height"1" class="news_center">
<p>Состоится собрание для родителей детей от 0</p>
<p>до 3 лет, которые планируют посещать</p>
<p>студию "Вместе с мамой" (новая группа) и ещё</p>
<p>не был на собрании.</p></td>
</tr>
<tr>
<td background="img/news_footer.png" width="400" height"10" class="news_footer"> </td>
</tr>
</table>
<table class="news">
<tr>
<td background="img/news_head.png" width="400" height"40" class="news_header"><span> </span><span class="news_title"><b>Нам исполняется 20 лет!</b></span></td>
</tr>
<tr>
<td background="img/news_center.png" width="400" height"1" class="news_center">
<p>Наш центр начал свою работу 1 сентября 1992</p>
<p>года.За эти годы мы вырастили и выпустили</p>
<p>много ребятишек. Многие из них уже закончили</p>
<p>школу и даже институт.Мы с радостью хотели</p>
<p>бы встретиться с нашими выпускниками,их</p>
<p>родителями,коллегами,друзьями на празд-</p>
<p>-ничном вечере!Желающие принять участие в</p>
<p>нашем юбилее – отзовитесь!Предварительная</p>
<p>дата встречи- 9 ноября...</p>
<img src="news/news 2.JPG" width="327" height="208">
</td>
</tr>
<tr>
<td background="img/news_footer.png" width="400" height"10" class="news_footer"> </td>
</tr>
</table>
</div>
<div class="clear"></div>
<div id="sidebar">

</div>
<div class="clear"></div>
<div id="footer">

</div>
</div>

<body>
</body>
</html>

цсс код

 @charset "utf-8";
/* CSS Document */
body {
margin:0;
padding:0;
background-image:url(../img/bg.jpg);
font-family:Arial, Helvetica, sans-serif;
}
#wrapper {
background-color:#fff;
margin-left:15%;
margin-right:15%;
width:70%;
max-width:1010px;
height:auto;
box-shadow:0 0 62px #fff;
moz-box-shadow:0 0 62px #fff;
webkit-box-shadow:0 0 62px #fff;
filter: progid:DXImageTransform.Microsoft.shadow(direction=90, color=#fff, strength=62px);
}
.clear {
clear:both;
}
#header {
margin:0;
padding-top:1px;
}
/*—————————--Верхняя панель———————————-*/
#top_line {
margin:auto;
width:99.7%;
height:40px;
outline:1px solid #999;
border:1px solid #fff;
background: #ececed; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VjZWNlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNWQyZDIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ececed 0%, #d5d2d2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ececed), color-stop(100%,#d5d2d2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ececed 0%,#d5d2d2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ececed 0%,#d5d2d2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ececed 0%,#d5d2d2 100%); /* IE10+ */
background: linear-gradient(to bottom, #ececed 0%,#d5d2d2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececed', endColorstr='#d5d2d2',GradientType=0 ); /* IE6-8 */
}
#top_line ul {
list-style:none;
width:100%;
margin-top:0;
margin-left:-40px;
}

#top_line ul li a {
width:160px;
height:40px;
margin-left:0;
float:left;
font-size:14pt;
color:#333;
text-decoration:none;
text-align:center;
display:table-cell;
vertical-align:bottom;
padding-top:10px;
}
li.normal {
border-right:1px solid #999;
border-left:1px solid #fff;
width:160px;
height:40px;
float:left;
}
li.right {
border-left:1px solid #fff;
width:177px;
height:40px;
float:left;
}
li.left {
border-right:1px solid #999;
width:177px;
height:40px;
float:left;
}
li:hover {
box-shadow:0 0 10px #000;
moz-box-shadow:0 0 10px #000;
webkit-box-shadow:0 0 10px #000;
filter: progid:DXImageTransform.Microsoft.shadow(direction=90, color=#000, strength=10px);
}
/*—————————--Верхняя панель———————————-*/
/*—————————--Лого———————————-*/
#logo {
margin-top:1px;
width:100%;
height:220px;
background: #4e9a06; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRlOWEwNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzczZDIxNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4YWUyMzQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #4e9a06 0%, #73d216 50%, #8ae234 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4e9a06), color-stop(50%,#73d216), color-stop(100%,#8ae234)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4e9a06 0%,#73d216 50%,#8ae234 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4e9a06 0%,#73d216 50%,#8ae234 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4e9a06 0%,#73d216 50%,#8ae234 100%); /* IE10+ */
background: linear-gradient(to bottom, #4e9a06 0%,#73d216 50%,#8ae234 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e9a06', endColorstr='#8ae234',GradientType=0 ); /* IE6-8 */
position:relative;
}
#nadpis {
position:absolute;
top:70px;
z-index:5;
}
#photo_1 {
position:absolute;
top:20px;
left:370px;
z-index:4;
}
#photo_2 {
position:absolute;
top:20px;
left:550px;
z-index:3;
}
#photo_3 {
position:absolute;
top:20px;
left:740px;
z-index:4;
}
/*—————————--Лого———————————-*/
/*—————————--Контент———————————-*/
#content {
width:45%;
height:300px;
margin-left:3.5%;
margin-top:15px;
float:left;
}
#content_title {
color:#333;
font-size:24pt;
text-shadow:0 0 1px #999;
margin:0 33%;
float:left;
display:block;
}
.news {
margin-top:30px;
margin-left:5%;
position:relative;
float:left;
}
.news_title {
color:#000;
font-size:15pt;
padding-left:15%;
}
.news_center {
position:relative;
top:-2px;
}
.news_text {
font-size:13pt;
padding:0 15px;
}
.news_center p {
font-size:13pt;
padding:0 15px;
line-height:3px;
}
.news_center img {
padding:2px 35px;
}
.news_footer {
font-size:6px;
position:relative;
top:-4px;
}
/*—————————--Контент———————————-*/
/*—————————--Сайдбар———————————-*/

/*—————————--Сайдбар———————————-*/
/*—————————--Футер———————————-*/
#footer {
width:100%;
height:80px;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VjZWNlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNWQyZDIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ececed 0%, #d5d2d2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ececed), color-stop(100%,#d5d2d2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ececed 0%,#d5d2d2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ececed 0%,#d5d2d2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ececed 0%,#d5d2d2 100%); /* IE10+ */
background: linear-gradient(to bottom, #ececed 0%,#d5d2d2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececed', endColorstr='#d5d2d2',GradientType=0 ); /* IE6-8 */
}
/*—————————--Футер———————————-*/

Edited January 5, 2013 by oleg.kan

alekseyk24 · January 3, 2013

#content {

width:45%;

height:300px; — эту уберите

margin-left:3.5%;

margin-top:15px;

float:left;

}

oleg.kan · January 4, 2013

спасибо,помогло.

Sign In

Проблема с блоками

Question

oleg.kan

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

alekseyk24

Link to comment

Share on other sites

oleg.kan

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information