ProMira
-
Posts
3 -
Joined
-
Last visited
ProMira's Achievements
Explorer (1/14)
-1
Reputation
-
Спасибо, помогло.
-
Здравствуйте, делаю скелет шаблона, столкнулся с проблемой, при использовании float:left, блок выходит за границы родителя. Тег используется всего 2 раза, в одной части сайта. Проблемная часть помечена в коде. HTML <html> <head> <title>Games For Life</title> <link rel="stylesheet" type="text/css" href="template.css"/> </head> <body> <div id="body"> <!--Head--> <div id="head"></div> <div id="link"></div> <!--/Head--> <div id="flash"><img src="images/flash.jpg" border="0"/></div><h4 class="indi_name"><u>Инди-проекты:</u></h4> <div id="indi"> <table class="indi_tabl" cellpadding="0" cellspacing="0" border="0"> <tr> <td class="indi1"> <span class="indi_name"> <img src="images/indi.png" class="img" border="1"/> <h4 class="indi_name"><u>Мега крутой заголовок</u></h4> <p class="indi_content">А тут совсем немного текста, описание и прочее, ограничение по символам 3-4 строчки..</p> </span> </td> <td class="indi1">sdfg</td> <td class="indi1">sdfg</td> <td class="indi2">sdfg</td> </tr> </table> </div> <div id="block"> <!--/Проблемный блок--> <div class="container"> <table class="news" cellpadding="0" cellcpacing="0"> <tr> <td>ololololololo</td> </tr> <tr> <td>ololololololo</td> </tr> </table> </div> <div class="container"><br><br><br>sdfgfdsfg</div> <div>sdfgfdsfg</div> <!--/Пробелмный блок--> </div> <div id="footer"></div> </div> </body> </html> css body { margin: 0 auto; background-color: #424340; } #body { margin: 0 auto; width: 900px; background-color: #fafafa; border: 1px #bdbdbd solid; -moz-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.9); /* Для Firefox */ -webkit-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.9); /* Для Safari и Chrome */ box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.9); /* Параметры тени */ } #head { width: 100%; height: 100px; background-image: url('images/bg_head.png'); } #link { width: 100%; height: 29px; background-image: url('images/bg_link.png'); } #flash { width: 800px; margin: 0 auto; } #indi { width: 100%; background-color: #fafafa; border-top: 1px #bdbdbd solid; border-bottom: 1px #bdbdbd solid; } .img { margin-top: 5px; margin-bottom: 0px; } .indi_content { margin-top: 0px; margin-left: 13px; font-size: 13px; } .indi_name { margin-left: 13px; margin-top:0; margin-bottom: 0px; padding: 0px; } .indi1 { width: 225px; border-right: 1px #bdbdbd solid; margin: 0 auto; } #block { width: 100%; } .container { width: 300px; height: 400px; } .news { width: 250px; margin: 0 auto; border-top: 1px #bdbdbd solid; border-left: 1px #bdbdbd solid; border-bottom: 1px #bdbdbd solid; border-right: 1px #bdbdbd solid; } #footer { width: 100%; height: 100px; background-image: url('images/bg_footer.png'); }
-
Собственно проблема в том, что DIV'ы лезут друг на друга. HTML: <!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" lang="en" xml:lang="en"> <head> <title>Alter Bridge Fan-Club</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" /> </head> <body> <!--HEAD--> <div id="head"> <div id="hleft"> <table class="menu"> <tr> <td class="name">Навигация</td> </tr> <tr> <td> <ul> <li>link 1</li> <li>link 2</li> <li>link 3</li> <li>link 4</li> <li>link 5</li> </ul> </td> </tr> </table> </div> <div id="hright"> <p id="link"><img src="img/link.png" alt="link"/></p> <br/> <table class="menu"> <tr> <td>Мы в соц. сетях</td> </tr> <tr> <td><p><img src="img/mm.png" alt="mm"/><br/><br/><img src="img/vk.gif" alt="vk"/></p></td> </tr> </table> </div> </div> <!--HEAD_END--> <!--CONT--> <div id="body"> <p id="news">Новости</p> <table> <tr> <td><p>Заголовок</p></td> </tr> <tr> <td><p>Сама новость</p></td> </tr> <tr> <td><p id="nothers">Новость добавил: *** | Дата: ***</p></td> </tr> </table> </div> <!--CONT_END--> <div id="end"> <p id="copy">CopyRight</p> </div> </body> </html> CSS: BODY { background-color: #000000; margin:0; padding: 0; min-width: 1024px; } .name { text-align: center; } #head { top: 0; left: 50%; margin-left: -500px; position: absolute; width: 100%; height: 360px; background-image:url('img/head.jpg'); background-repeat: no-repeat; } #hleft { position: fixed; width: 50%; padding: 5%; float: left; } .menu { border: 1px solid black; border-radius: 10px; width: 150px; height: 150px; background: rgba(120, 120, 120, 0.3); } #hright { position: relative; width: 50%; padding-left: 30%; float: right; } #body { background-color: #c8af7b; width: 512px; margin: 0 auto; }