За последние 24 часа нас посетили 98879 программистов и 5623 робота. Сейчас ищут 2404 программиста ...

прошу совета

Тема в разделе "PHP для новичков", создана пользователем Omicron, 26 ноя 2016.

  1. Omicron

    Omicron Новичок

    С нами с:
    26 ноя 2016
    Сообщения:
    2
    Симпатии:
    0
    Всем по привету!
    Ребята помогите пожалуйста, уже голова трещит никак не могу это исправить:)!
    Есть html шаблон : 1.png
    (все по учебнику для чайников) разделил код на две части header.php и main.php, создал index.php с кодом:
    <? include ("header.php"); ?>
    <? include ("main.php"); ?>
    получается вот такая беда(( : 2.png
     
    #1 Omicron, 26 ноя 2016
  2. Slavka

    Slavka Активный пользователь

    С нами с:
    1 окт 2013
    Сообщения:
    722
    Симпатии:
    41
    показывай оба файла - гдето <br> стоит походу
     
    #2 Slavka, 26 ноя 2016
  3. Omicron

    Omicron Новичок

    С нами с:
    26 ноя 2016
    Сообщения:
    2
    Симпатии:
    0
    вот header.php:

    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    6. <meta name="keywords" content="" />
    7. <meta name="description" content="" />
    8. <link href="templatemo_style.css" rel="stylesheet" type="text/css" />
    9. <script language="javascript" type="text/javascript">
    10. function clearText(field)
    11. {
    12.     if (field.defaultValue == field.value) field.value = '';
    13.     else if (field.value == '') field.value = field.defaultValue;
    14. }
    16. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    17.  
    18.  
    19. </head>
    21. <div id="templatemo_header_wrapper">
    22.  
    23.     <div id="templatemo_header">
    24.         <div id="site_title">
    25.             <a href="#"></a>
    26.             <span></span>
    27.         </div>
    28.         <div class="cleaner"></div>
    29.     </div>
    30. </div>
    31.  
    вот main.php:

    HTML:
    1.   <div id="templatemo_menu_wrapper">
    2.  
    3. </div>
    4.  
    5.   <div id="templatemo_content_outer_wrapper">
    6.     <div id="templatemo_content_inner_wrapper">
    7.  
    8.         <div id="tempatemo_content">
    9.      
    10.             <div class="side_column_w200 margin_right_20">
    11.          
    12.                 <div class="section_w170_p15">
    13.          
    14.                     <div class="header_02">
    15.                         Search</div>
    16.                  
    17.                     <form action="#" method="get">
    18.                         <input type="text" value="Enter keyword here..." name="q" size="10" class="inputfield" title="searchfield" onfocus="clearText(this)" onblur="clearText(this)" />
    19.                  
    20.                         <input type="submit" name="Search" value="Search" alt="Search" class="submitbutton" title="Search" />
    21.                     </form>
    22.  
    23.                     <div class="cleaner"></div>
    24.                 </div>
    25.                        
    26.              
    27.                 <div class="cleaner"></div>          
    28.             </div> <!-- end of left side column -->
    29.          
    30.             <div class="content_column margin_right_20">
    31.          
    32.        
    33.             </div> <!-- end of content column -->
    34.          
    35.    
    36.             <div class="cleaner"></div>
    37.      
    38.         </div><!-- end of content -->
    39.  
    40.     </div> <!-- end of inner content wrapper -->
    41.     </div> <!-- end of outer content wrapper -->
    42.  
    43. <!--  Free Website Templates by www.TemplateMo.com  -->
    44. </body>
    45. </html>
    --- Добавлено ---
    вот style.css: часть1
    Код (CSS):
    1. body {
    2.     margin: 0;
    3.     padding: 0;
    4.     line-height: 1.5em;
    5.     font-family: Georgia, "Times New Roman", Times, serif;
    6.     font-size: 12px;
    7.     color: #000000;
    8.     background: #ffffff;
    9. }
    10.        
    11. a:link, a:visited { color: #004358; text-decoration: none; font-weight: normal;}
    12. a:active, a:hover { color: #004358; text-decoration: underline;}
    13.  
    14. p { margin: 0px; padding: 0px; }
    15.  
    16. img { margin: 0px; padding: 0px; border: none; }
    17.  
    18. .cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }
    19.  
    20. .margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px;    }
    21. .margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px;    }
    22. .margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px;    }
    23. .margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px;    }
    24. .margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px;    }
    25. .margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px;    }
    26.  
    27. .margin_right_20 { margin-right: 20px; }
    28. .margin_right_40 { margin-right: 40px; }
    29.  
    30. .fl {
    31.     float: left;
    32. }
    33.  
    34. .fr {
    35.     float: right;
    36. }
    37.  
    38. .divider {
    39.     background: url(images/templatemo_divider.jpg) bottom repeat-x;
    40. }
    41.  
    42. #templatemo_container {
    43.     width: 990px;
    44.     margin: 0 auto;
    45. }
    46.  
    47. #templatemo_header_wrapper {
    48.     width: 1200px;
    49.     margin: 0 auto;
    50.     background: url(images/templatemo_header_bg.jpg) center top no-repeat;
    51. }
    52.  
    53. #templatemo_header {
    54.     clear: both;
    55.     width: 990px;
    56.     height: 320px;
    57.     margin: 0 auto;
    58.     background: url(images/templatemo_header_bg.jpg) center top no-repeat;
    59. }
    60.  
    61. #templatemo_header #site_title {
    62.     float: left;
    63.     width: 180px;
    64.     height: 50px;
    65.     margin: 205px 0 0 75px;
    66.     padding: 25px 20px 0 20px;
    67.     font-size: 40px;
    68.     color: #000000;
    69. }
    70.  
    71. #templatemo_header #site_title a{
    72.     color: #000000;
    73.     text-decoration: none;
    74. }
    75.  
    76. #templatemo_header #site_title span {
    77.     display: block;
    78.     margin-top: 10px;
    79.     margin-left: 5px;
    80.     font-size: 12px;
    81. }
    82.  
    83. /* menu */
    84. #templatemo_menu_wrapper {
    85.     clear: both;
    86.     width: 1200px;
    87.     height: 50px;
    88.     margin: 0 auto;
    89.     background: url(images/templatemo_menu_bg.jpg) top center no-repeat;
    90. }
    91.  
    92. #templatemo_menu {
    93.     width: 957px;
    94.     height: 50px;
    95.     padding: 0 0 0 33px;
    96.     margin: 0 auto;
    97.  
    98. }
    --- Добавлено ---
    вот style.css: часть2

    Код (CSS):
    1. #templatemo_menu ul {
    2.     margin: 0px;
    3.     padding: 0px;
    4.     list-style: none;
    5. }
    6.  
    7. #templatemo_menu ul li{
    8.     padding: 0px;
    9.     margin: 0px;
    10.     display: inline;
    11. }
    12.  
    13. #templatemo_menu ul li a{
    14.     float: left;
    15.     display: block;
    16.     height: 35px;
    17.     width: 156px;
    18.     margin-right: 3px;
    19.     padding-top: 15px;
    20.     text-align: center;
    21.     font-size: 14px;
    22.     text-decoration: none;
    23.     color: #000000;  
    24.     font-weight: bold;
    25.     outline: none;
    26. }
    27.  
    28. #templatemo_menu li a:hover, #templatemo_menu li .current{
    29.     color: #ffffff;
    30. }
    31.  
    32. /* end of menu*/
    33.  
    34. /* content */
    35.  
    36. #templatemo_content_outer_wrapper {
    37.     clear: both;
    38.     width: 1200px;
    39.     margin: 0 auto;
    40.     background: url(images/templatemo_content_bg_repeat.jpg) repeat-y;
    41. }
    42.  
    43. #templatemo_content_inner_wrapper {
    44.     width: 1200px;
    45.     margin: 0 auto;
    46.     background: url(images/templatemo_content_bg.jpg) top center no-repeat;
    47. }
    48.  
    49. #tempatemo_content {
    50.     width: 900px;
    51.     padding: 0 45px;
    52.     margin: 0 auto;
    53.     background: url(images/templatemo_content_bg.jpg) top center no-repeat;
    54. }
    55.  
    56. .side_column_w200 {
    57.     float: left;
    58.     width: 200px;
    59.     padding-top: 80px;
    60. }
    61.  
    62. .content_column {
    63.     position: relative;
    64.     float: left;
    65.     width: 400px;
    66.     padding: 0 30px;
    67.     padding-top: 80px;  
    68.     background:url(images/templatemo_middle_col_bg.png) repeat-y;
    69. }
    70.  
    71. .header_01 {
    72.     font-size: 20px;
    73.     color: #004358;
    74.     font-weight: bold;
    75.     margin-bottom: 10px;
    76. }
    77.  
    78. .header_02 {
    79.     font-size: 16px;
    80.     color: #004358;
    81.     font-weight: bold;
    82.     padding-bottom: 10px;
    83.     margin-bottom: 10px;
    84.     background: url(images/templatemo_divider.jpg) bottom repeat-x;
    85. }
    86.  
    87. .header_03 {
    88.     font-size: 12px;
    89.     color: #32697a;
    90.     font-weight: bold;
    91.     margin-bottom: 5px;
    92. }
    93.  
    94. .header_04 {
    95.     font-size: 12px;
    96.     color: #000000;
    97.     font-weight: bold;
    98.     margin-bottom: 10px;
    99. }
    100.  
    101. .header_03  a{
    102.     color: #32697a;
    103.     font-weight: bold;
    104. }
    --- Добавлено ---
    вот style.css: часть3

    Код (CSS):
    1. .section_w170_p15 {
    2.     width: 170px;
    3.     padding: 0 15px;
    4.     margin-bottom: 30px;
    5. }
    6.  
    7. .side_column_w200 form {
    8.     margin: 0px;
    9.     padding: 0px;
    10. }
    11.  
    12. .inputfield {
    13.     height: 16px;
    14.     width: 160px;
    15.     padding: 2px 5px;
    16.     margin: 0 0 10px 0;
    17.     font-size: 12px;
    18.     font-variant: normal;
    19.     line-height: normal;
    20. }
    21.  
    22. .submitbutton{
    23.     float: right;
    24.     margin: 0px;
    25.     padding: 0 6px 3px 6px;
    26.     cursor: pointer;
    27.     font-size: 12px;
    28.     text-align: center;
    29.     vertical-align: bottom;
    30.     white-space: pre;
    31. }
    32.  
    33. #message_input {
    34.     background:#FFFFFF none repeat fixed 0 0;
    35.     border:1px solid #BBBBBB;
    36.     display:block;
    37.     height: 80px;
    38.     margin-top:5px;
    39.     padding:5px;
    40.     width: 160px;
    41.     margin-bottom: 5px;
    42. }
    43.  
    44. .side_menu {
    45.     list-style: none;
    46.     padding: 0px;
    47.     margin: 0 0 0 0;
    48. }
    49.  
    50. .side_menu li {
    51.     padding: 0;
    52.     margin: 5px 0;
    53. }
    54.  
    55. .side_menu li a {
    56.     display: block;
    57.     color: #ffffff;
    58.     padding: 2px 10px;
    59.     background: #999;
    60. }
    61. .side_menu li a:hover {
    62.     text-decoration: none;
    63.     background: #666;
    64. }
    65.  
    66. .section_rss_twitter a{
    67.     display: block;
    68.     width: 170px;
    69.     padding: 20px 0 0 0;
    70.     font-size: 16px;
    71.     font-weight: bold;
    72.     color: #004358;  
    73. }
    74.  
    75. .section_rss_twitter a:hover {
    76.     text-decoration: none;  
    77. }
    78.  
    79. .section_rss_twitter a span {
    80.     font-size: 12px;
    81.     margin-top: 5px;
    82.     display: block;
    83.     letter-spacing: 5px;
    84. }
    85.  
    86. .rss a{
    87.  
    88.     background: url(images/rss_icon.png) right bottom no-repeat;
    89. }
    90.  
    91. .twitter a{
    92.  
    93.     background: url(images/twitter_icon.png) right bottom no-repeat;
    94. }
    95.  
    96. .news_section {
    97.     padding-bottom: 15px;
    98.     margin-bottom: 15px;
    99.     border-bottom: 1px solid #999;
    100. }
    101.  
    102.  
    103. .post_section {
    104.     clear: both;
    105.     padding-bottom: 20px;
    106.     background: url(images/templatemo_divider.jpg) bottom repeat-x;  
    107.     margin-bottom: 20px;
    108. }
    109.  
    110. .post_section p {
    111.     margin-bottom: 20px;
    112. }
    113.  
    114. .post_info {
    115.     font-size: 14px;
    116.     margin-bottom: 20px;
    117. }
     
    #3 Omicron, 26 ноя 2016
  4. Slavka

    Slavka Активный пользователь

    С нами с:
    1 окт 2013
    Сообщения:
    722
    Симпатии:
    41
    уф - давай разделим =)

    PHP:
    1. <? include ("header.php"); ?>
    2. echo "<hr>";
    3. <? include ("main.php"); ?>
    помотришь где будет пустота - до черты или после - если после надо смотреть 2 файл в самом начале ... и по нему двигать <hr>
    после какого то дива будет прыгать строка - ее и надо изучать
     
    #4 Slavka, 26 ноя 2016
  5. _ne_scaju_

    _ne_scaju_ Старожил

    С нами с:
    25 ноя 2016
    Сообщения:
    2.149
    Симпатии:
    118
    У тебя в стилях может быть проблема, попробуй везде где есть height:0px добавь min-height:0px; и еще может быть вторая проблема, ты не добавил стили для очистки, то-есть когда ты пишешь свойство float:right; то его нужно еще очищать что бы как раз не было вот этого промежутка. Будут еще вопросы пиши.
     
    #5 _ne_scaju_, 26 ноя 2016
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)