mikebob72
-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by mikebob72
-
Вывести блоками инфрормацию табличного типа
mikebob72 replied to mikebob72's question in HTML Coding
Помогло, елы-палы! Для совместимости с Сафари и Оперой потребовалось уменьшить средний блок до 635 и обнулить margin-left. Может. оно и к лучшему. Посмотрим, что дальше с шаблоном будет, на других страницах сайта. Спасибо. А то прошлый вечер был грустным. А есть у этого всего логическое объяснение? Получается, overflow запрещает проваливаться дочерним тэгам ниже границы блока. И поэтому они не проваливаются под блок #left... Или бред это? -
Здравствуйте, люди доброй воли. У меня такая проблема. Трехколоночный макет, сделанный по уроку по блочной верстке. Внутри блока #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; }