Jump to content
  • 0

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


oleg.kan
 Share

Question

Использовал разные свойства вроде 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>

3755228.png

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

 <!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>

3760348.png

цсс код

 @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 by oleg.kan
Link to comment
Share on other sites

2 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy