Смешанная вёрстка

середина в 8 осле едет вправо

 
Sometime CMS Community
Посетитель
no avatar
Сообщений: 63
Доброго времени суток.
сверстал я шаб,используя смешанную вёрстку.всё везде работает,но вот в восьмом осле середина едет вправо,
обтекание и маржа не помогают,гуглить устал,может кто подскажет,как убрать левый пробел в центре.
Тело и правила ниже.
Заранее благодарен.
Посмотреть можно здесь.смотреть в ИЕ8
Код PHP:
  1. <body>
  2. <div id="bottom-bg">
  3. <div id="top-left">
  4. <?php if (cmsCountModules("top-left")) { ?>
  5. <div><?php cmsModule("top-left"); ?></div>
  6. <?php } ?>
  7. </div>
  8.  
  9. <div id="top-right" class="grid_9">
  10. <?php if (!$inUser->id){ ?>
  11. <div class="mod_user_menu">
  12. <span class="register"><a href="/registration">Регистрация</a></span>
  13. <span class="login"><a href="/login">Вход</a></span>
  14. </div>
  15. <?php } else { ?>
  16. <?php cmsModule('top-right'); ?>
  17. <?php } ?>
  18. </div>
  19. <div class="clear_main"></div>
  20. <div id="wrapper_main">
  21.  
  22. <div id="header_main">
  23. <div id="weather"><?php cmsModule('weather'); ?></div>
  24. <div id="hmenu"><?php cmsModule('hmenu'); ?></div>
  25. <div id="search"><?php cmsModule('search'); ?></div>
  26. </div>
  27. <div id="pathway" class="container_12"><div class="grid_12"><?php cmsPathway('→'); ?></div></div>
  28. <div class="clear_main"></div>
  29.  
  30. <table border="0" cellpadding="0" cellspacing="0" width="100%" >
  31. <tbody>
  32. <tr>
  33. <?php if (cmsCountModules("left")) { ?>
  34. <td valign="top" align="left" >
  35. <div id="sidebar" class="left_coll">
  36. <?php cmsModule("left"); ?>
  37. </div>
  38. </td>
  39. <?php } ?>
  40. <td valign="top" align="left" >
  41. <div id="sidebar" class="center_coll">
  42. <?php cmsModule("top"); ?>
  43. <?php cmsBody(); ?>
  44.  
  45. <table border="0" cellpadding="0" cellspacing="0" width="100%" >
  46. <tr><td>
  47. <td valign="top" width="50%">
  48. <?php cmsModule("bottom1"); ?>
  49. </td>
  50. <td valign="top" width="50%">
  51. <?php cmsModule("bottom2"); ?>
  52. </td>
  53. </td></tr>
  54. </table>
  55. <?php cmsModule("bottom"); ?>
  56. </div>
  57. </td>
  58. <?php if (cmsCountModules("right")) { ?>
  59. <td valign="top" align="left" >
  60. <div id="sidebar" class="right_coll">
  61. <?php cmsModule("right"); ?>
  62. </div>
  63. </td>
  64. <?php } ?>
  65. </tr>
  66. </tbody>
  67. </table>
  68. <div class="clear_main"></div>
  69. <table border="0" cellpadding="0" cellspacing="0" width="100%" >
  70. <tbody>
  71. <tr>
  72. <?php if (cmsCountModules("footer1")) { ?>
  73. <td valign="top" width="25%">
  74. <div id="sidebar">
  75. <?php cmsModule("footer1"); ?>
  76. </div>
  77. </td>
  78. <?php } ?>
  79. <?php if (cmsCountModules("footer2")) { ?>
  80. <td valign="top" width="25%">
  81. <div id="sidebar">
  82. <?php cmsModule("footer2"); ?>
  83. </div>
  84. </td>
  85. <?php } ?>
  86. <?php if (cmsCountModules("footer3")) { ?>
  87. <td valign="top" width="25%">
  88. <div id="sidebar">
  89. <?php cmsModule("footer3"); ?>
  90. </div>
  91. </td>
  92. <?php } ?>
  93. <?php if (cmsCountModules("footer4")) { ?>
  94. <td valign="top" width="25%">
  95. <div id="sidebar" class=>
  96. <?php cmsModule("footer4"); ?>
  97. </div>
  98. </td>
  99. <?php } ?>
  100. </tr>
  101. </tbody>
  102. </table>
  103. <div class="clear_main"></div>
  104. <div id="footer_main">
  105. <div class="copyright"></div>
  106. </div>
  107. </div>
  108. <div>
  109.  <br>
  110.  <br>
  111.  <br>
  112.  <br>
  113.  <br>
  114.  <br>
  115.  <br>
  116. </div>
  117. </div>
  118. </body>
Код PHP:
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. border: 0;
  5. }
  6. #bottom-bg{
  7. width:100%;
  8. /*background:url(../images/bg-rules.jpg)no-repeat center top;*/
  9. background:url('../images/background_bottom.png') repeat-x left bottom;
  10.  
  11. }
  12. #wrapper_main {
  13. height:100%;
  14. width: 90%;
  15. margin-left: auto;
  16. margin-right: auto;
  17. margin-top:90px;
  18. margin-bottom:auto;
  19. /*margin: 0 auto;*/
  20. background:url(../images/bg.gif);
  21. border-bottom-left-radius: 10px 10px;
  22. -moz-border-bottom-left-radius: 10px 10px;
  23. border-bottom-right-radius: 10px 10px;
  24. -moz-border-bottom-right-radius: 10px 10px;
  25. border-top-left-radius: 10px 10px;
  26. -moz-border-top-left-radius: 10px 10px;
  27. border-top-right-radius: 10px 10px;
  28. -moz-border-top-right-radius: 10px 10px;
  29. -moz-border-radius:10px;
  30.  
  31. -moz-box-shadow:0 2px 0 #B4B4B4;
  32. box-shadow:0 2px 0 #B4B4B4;
  33.  
  34.  
  35. }
  36. #header_main {
  37. height: 135px;
  38. width:100%;
  39. background:url(../images/header.png);
  40.  
  41. }
  42.  
  43. #top-right{float:right;width:auto;margin-right:2px;margin-top:13px;}
  44. #top-left{float:left;width:auto;margin-top:-12px;margin-left:0;}
  45. #weather{float:right;width:auto;padding-left:1000px;margin-top:5px;margin-right:5px;}
  46.  
  47. #hmenu{float:left;
  48. width: 540px;
  49. margin-top:0}
  50. #search{float:right;
  51. width:475px;
  52. margin-right:0;
  53. margin-top:-37px;}
  54. #searchbtn{
  55. float:left;
  56. border:none;
  57. margin-top:4px;
  58. margin-left:-55px;
  59. }
  60. #searchinput{
  61. width:380px;
  62. height:14px;
  63. display:block;
  64. border:5px solid #779f1a;
  65. border-right:60px solid #779f1a;;
  66. border-bottom-left-radius: 7px 7px;
  67. border-bottom-right-radius: 7px 7px;
  68. border-top-left-radius: 7px 7px;
  69. border-top-right-radius: 7px 7px;
  70. -moz-border-radius: 7px;
  71. -webkit-border-radius: 7px;
  72. padding:5px;
  73. padding-left:13px;
  74. padding-right:13px;
  75. font-size:14px;
  76. color:#666;
  77. float:left;
  78. }
  79.  
  80. .clear_main {
  81. float: none;
  82. clear: both;
  83. margin: 0;
  84. padding: 0;
  85. }
  86. .left_coll{width:220px;float:left;}
  87. .right_coll{width:220px;float:right;}
  88. .center_coll{width:100%;float:left;text-align:left;}
  89. #footer_main {
  90. background:url(../images/lin_b1.gif);
  91. height: 50px;
  92. width:100%;
  93. background:transparent;
  94. border-bottom-left-radius: 10px 10px;
  95. -moz-border-bottom-left-radius: 10px 10px;
  96. border-bottom-right-radius: 10px 10px;
  97. -moz-border-bottom-right-radius: 10px 10px;
  98. border-top-left-radius: 10px 10px;
  99. -moz-border-top-left-radius: 10px 10px;
  100. border-top-right-radius: 10px 10px;
  101. -moz-border-top-right-radius: 10px 10px;
  102. -moz-border-radius:10px;
  103. margin-top:7px;
  104. margin-bottom:7px;
  105. -moz-box-shadow:0 5px 0 #B4B4B4;
  106. box-shadow:0 5px 0 #B4B4B4;
  107.  
  108. }
Я ещё зелёный в этой теме,все замечания и пожелания выслушаю и приму во внимание,это мой первый шаб
Редактировалось: 1 раз (Последний: 6 марта 2011 в 06:39)
Sometime CMS Community
Посетитель
no avatar
Сообщений: 63
Читал,что айдишник дива можно использовать только один раз на странице,а у меня ид sidebar прописан на все 3 колонки
может в этом трабл...
Реклама
cms
Посетитель
small user social cms
Медаль
Сообщений: 304
Да и Google Chrome неважно смотрится: впечатление, что правая колонка "уехала" вправо.
Ширина нижних модулей не соответствует ширине тех колонок, которые выше: левый нижний модуль шире, чем левая колонка, правый нижний модуль находится левее правой колонки.
Редактировалось: 1 раз (Последний: 6 марта 2011 в 07:52)
Сделано на INSTANT - Нижегородская социальная сеть
Sometime CMS Community
Посетитель
no avatar
Сообщений: 63
Да,я смотрю на 1280 ,в 1024 правая не помещается,надо исправлять,спасибо.Тоже не понимаю,середина в процентах,и даже,если авто,не подгоняется,хотя моды в любую ширину вписываются
Редактировалось: 1 раз (Последний: 6 марта 2011 в 08:06)
Sometime CMS Community
Посетитель
no avatar
Сообщений: 63
нижние подогнать на проблема,спасибо,то поправим,там всё в процентах и что то ещё...не знаю что,но браузеры все
идеально слушаются.Позиции footer 1.2.3.4.можно вычеркнуть из обсуждения,как и шапку
Редактировалось: 2 раз (Последний: 6 марта 2011 в 08:13)
Sometime CMS Community
Посетитель
no avatar
Сообщений: 63
хотелось бы добавить,что таблицу пришлось использовать,потому,что не хватило ума сделать формулу отображения модов
Посетитель
small user social cms
Медаль
Сообщений: 118
первое: модуль лефт не в ячейке
Код PHP:
  1. <tr>
  2. [b]<?php if (cmsCountModules("left")) { ?>[/b]
  3. <td valign="top" align="left" >
  4. <div id="sidebar" class="left_coll">
  5. <?php cmsModule("left"); ?>
  6. </div>
  7. </td>
дальше, что то много у вас "ячеек в ячейке", ето лишнее :
Код PHP:
  1. 045 <table border="0" cellpadding="0" cellspacing="0" width="100%" >
  2. 046 <tr>[b]<td>[/b]
  3. 047 <td valign="top" width="50%">
  4. 048 <?php cmsModule("bottom1"); ?>
  5. 049 </td>
  6. 050 <td valign="top" width="50%">
  7. 051 <?php cmsModule("bottom2"); ?>
  8. 052 [b]</td>[/b]
  9. 053 </td></tr>
  10. 054 </table>
пересмотрите все данные в таблице! информация выходит за ячейки
Создание веб проектов на Yii2 framework.
Разработка шаблонов для InstantCMS, модулей, компонентов.
lw-soft.com.ua
Sometime CMS Community
Посетитель
no avatar
Сообщений: 63
Yurik:
первое: модуль лефт не в ячейке
позволю несогласиться,это условие вне столбца,так и задумано)))
Yurik:
дальше, что то много у вас "ячеек в ячейке", ето лишнее :
спасибо,один td был лишним,убрал
Yurik:
пересмотрите все данные в таблице! информация выходит за ячейки
действительно,флеш мод онлайн-газета давал такую ошибку,попрощался с ним)
Впринципе проблемма решена,шаб вроде даже резиной стал..наверно....)))
Спасибо за помощь v
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.