Вывести блоками инфрормацию табличного типа

mikebob72 · November 30, 2009

Здравствуйте, люди доброй воли.

У меня такая проблема. Трехколоночный макет, сделанный по уроку по блочной верстке. Внутри блока #content хотелось бы выводить блоки с картинками и подписями - из БД.

Делаю строчку из таких блоков, с float:left, но когда отделяю "строчки" блоком #clear (clear:both), вторая "строчка" моих блоков падает на уровень бока #clear, который отделяет футер от других блоков.

Получается, clear:both опускает блок ниже всех всплывающих не только в родительском блоке но и во всем документе? Так же не должно быть...

Мне нужно, чтобы вторая "строчка" блоков .ryady следовала сразу за первой, и т.д., а не лежала ниже навигации (#left).

Т.е. по сути надо сверстать простую таблицу в блоке #content. Как это сделать? Кто подскажет - очень выручит, кто объяснит, что я не понимаю в том как всплывают блоки - отдельный респект.

Прилагаю код, стили.

Код:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link href="style_.css" rel="stylesheet" type="text/css">

</head>

<body>


<div id="container">

<div id="header" style="width:100%; height:100px">
<h1>Верх</h1>
</div>

<div id="clear"></div>
<div id="left">
  Лево
</div>
<div id="right">
Право
</div>

<div id="content" >

[b]<!--собственно выводимые блоки -->[/b]
<div class="ryady" >
    <div> <a href="index.php">
       <img border=0 id="im2" style="background-color:#000000; text-align:center" src="portret1.jpg" width="90px"  />
         </a>
    </div>
    <div ><br>jb jg ug yu yu yug ds g hf h h hf hf df dfg hf df h     hgf hgf  hgf  yut yu t yt<br>
       <a>статьи</a>
     </div>
</div>

[b]<!--собственно выводимые блоки -->[/b]

<div class="ryady" >
   <div> <a href="index.php">
          <img border=0 id="im3" style="background-color:#000000; text-align:center" src="portret1.jpg" width="90px"  />
        </a>
        </div>

   <div ><br>jb jg ug yu yu yug ds g hf h h hf hf df dfg hf df h     hgf hgf  hgf  yut yu t yt<br>
               <a>статьи</a>
       </div>
</div>

[b]<!--собственно выводимые блоки -->[/b]
<div class="ryady">
   <div> <a href="index.php">
            <img border=0 id="im4" style="background-color:#000000; text-align:center" src="portret1.jpg" width="90px"  />
         </a>
        </div>

   <div ><br>jb jg ug yu yu yug ds g hf h h hf hf df dfg hf df h     hgf hgf  hgf  yut yu t yt<br>
          <a>статьи</a>
        </div>
</div>

[b]<!--собственно выводимые блоки -->[/b]
<div class="ryady" >
   <div> <a href="index.php">
          <img border=0 id="im5" style="background-color:#000000; text-align:center" src="portret1.jpg" width="90px"  />
         </a>
        </div>

   <div ><br>jb jg ug yu yu yug ds g hf h h hf hf df dfg hf df h     hgf hgf  hgf  yut yu t yt<br>
          <a>статьи</a>
        </div>

</div>

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

[b]<!--собственно выводимые блоки -->[/b]
<div class="ryady" >

   <div> <a href="index.php">
       <img border=0 id="im6" style="background-color:#000000; text-align:center" src="portret1.jpg" width="90px"  />
         </a>
    </div>

   <div ><br>jb jg ug yu yu yug ds g hf h h hf hf df dfg hf df h     hgf hgf  hgf  yut yu t yt<br>
       <a>статьи</a>
     </div>

</div>

[b]<!--собственно выводимые блоки -->[/b]
<div class="ryady" >

   <div> <a href="index.php">
       <img border=0 id="im7" style="background-color:#000000; text-align:center" src="portret1.jpg" width="90px"  />
         </a>
    </div>

   <div ><br>jb jg ug yu yu yug ds g hf h h hf hf df dfg hf df h     hgf hgf  hgf  yut yu t yt<br>
       <a>статьи</a>
     </div>

</div>

[b]<!--собственно выводимые блоки -->[/b]
<div class="ryady" >
   <div> <a href="index.php">
          <img border=0 id="im10" style="background-color:#000000; text-align:center" src="portret1.jpg" width="90px"  />
         </a>
        </div>

   <div ><br>jb jg ug yu yu yug ds g hf h h hf hf df dfg hf df h     hgf hgf  hgf  yut yu t yt<br>
       <a>статьи</a>
     </div>

</div>

[b]<!--собственно выводимые блоки -->[/b]
<div class="ryady" >

   <div> <a href="index.php">
       <img border=0 id="im8" style="background-color:#000000; text-align:center" src="portret1.jpg" width="90px"  />
         </a>
    </div>

   <div ><br>jb jg ug yu yu yug ds g hf h h hf hf df dfg hf df h     hgf hgf  hgf  yut yu t yt<br>
       <a>статьи</a>
     </div>
</div>

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

[b]<!--собственно выводимые блоки -->[/b]
<div class="ryady" >
   <div> <a href="index.php">
       <img border=0 id="im9" style="background-color:#000000; text-align:center" src="portret1.jpg" width="90px"  />
         </a>
    </div>
    <div ><br>jb jg ug yu yu yug ds g hf h h hf hf df dfg hf df h     hgf hgf  hgf  yut yu t yt<br>
       <a>статьи</a>
     </div>
</div>
</div>

<div id="clear"></div>
<div id="footer">
   <p><strong>Footer</strong></p>
</div>
</div>
</body>
</html>

Код style_.css

Код:


* {
margin: 0;
padding: 0;
border: 0;
}

body, html {
   margin:0px;
   text-align:center;
   background-color: #FFFFFF;
}
#container{
   margin:0 auto;  
   text-align:left; 
   width:1000px;
   background-color: #FFFFFF;
   border: 4px solid #ccc;
}

#header{
   background-color: #0033FF;
}
#header h1 {
   margin: 0; 
   padding: 10px 0;
}
/
#left{
   float:left;
   margin-left:2px;
   background-color: #996633;
   height: 830px;
   width: 180px;
}

#right{
   width:180px; 
   background-color:#0099FF;
   float:right;
   height: 830px;
}

#content{
   margin-left:182px; /*îáÿçàòåëüíûé îòñòóï ñëåâà, äîëæåí áûòü íåìíîãî áîëüøå øèðèíû ëåâîé êîëîíêè */
   margin-right:182px;
   background-color: #F0F0F0;
   text-align: center;
}

#content .ryady{
   float:left;
   width:133px;
   text-align:center;
   padding-left:10px;
   padding-right:10px;
}
/*Для отладки - включаем у всех блоков границы*/
div {
   border: medium solid #333333;
}

/*Для отладки - включаем у всех блоков уже в #content  красные границы*/
#content div{
   border: 1px solid red;
}
#content .portrety div {
   margin:0px; 
   padding:10px 10px 0 10px;
   text-align: justify;
   color: #0066B3;
}
/*вот он себя плохо ведет */
#clear{
   height:0;
   font-size:1px;
   line-height:0px;
   clear:both;
   background-color: #FF0000;
}

#footer{
background-color:#d292bc;
}

Justnewone · November 30, 2009

Центральному блоку оверфлоу:хидден.

mikebob72 · November 30, 2009

Помогло, елы-палы! Для совместимости с Сафари и Оперой потребовалось уменьшить средний блок до 635 и обнулить margin-left. Может. оно и к лучшему. Посмотрим, что дальше с шаблоном будет, на других страницах сайта.

Спасибо. А то прошлый вечер был грустным.

А есть у этого всего логическое объяснение? Получается, overflow запрещает проваливаться дочерним тэгам ниже границы блока. И поэтому они не проваливаются под блок #left... Или бред это?

Justnewone · November 30, 2009

Помогло, елы-палы! Для совместимости с Сафари и Оперой потребовалось уменьшить средний блок до 635 и обнулить margin-left. Может. оно и к лучшему. Посмотрим, что дальше с шаблоном будет, на других страницах сайта.
Спасибо. А то прошлый вечер был грустным.
А есть у этого всего логическое объяснение? Получается, overflow запрещает проваливаться дочерним тэгам ниже границы блока. И поэтому они не проваливаются под блок #left... Или бред это?

есть объяснение. Лежит оно в объяснении взаимодействия флоат и обычного блоков.

Great Rash · December 1, 2009

И все-таки, почему же не вывести информацию табличного типа таблицей?

Sign In

Вывести блоками инфрормацию табличного типа

Question

mikebob72

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Justnewone

Link to comment

Share on other sites

mikebob72

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information