<div> переносится на другую строку

Тема в разделе "Внешний вид, шаблоны, графика", создана пользователем libero, 11.11.2007.

  1. Offline

    libero Недавно здесь

    Регистрация:
    01.11.2007
    Сообщения:
    15
    Симпатии:
    0
    верстаю страничку (двухколонную!!!) при помощи дивов, резиновую, первая колонка - меню (она же sidebar) - 40%, вторая - основное тело (mainbody) - 59%

    в любом случае (сколько бы процентов, какой бы float) ни устанавливал, основное тело смещается на следующую строку

    CSS:
    Код (CODE):
    1. #wrap {
    2. width: 100%;
    3. }
    4.  
    5. #footer {
    6. clear: left;
    7. }
    8.  
    9.  
    10. #sidebar {
    11. float:none;
    12. width:40%;
    13. }
    14.  
    15. #content {
    16. float: right;
    17. display: inline;
    18.  
    19. width: 59%;
    20.  
    21. padding-right: 7px;
    22. padding-bottom: 2px;
    23. padding-left: 7px;
    24. padding-top: 2px;
    25.  
    26. background-color: #CCCCCC;
    27.  
    28. border-left-color: #696969;
    29. border-left-style: solid;
    30. border-left-width: 1px;
    31.  
    32.  
    33. border-right-color: #282828;
    34. border-right-style: solid;
    35. border-right-width: 1 px;
    36.  
    37.  
    38. border-top-color: #959595;
    39. border-top-style: solid;
    40. border-top-width: 1px;
    41.  
    42.  
    43. border-bottom-color: #1d1d1d;
    44. border-bottom-style: solid;
    45. border-bottom-width: 1px;
    46. }


    index.php:
    Код (CODE):
    1. <div id="wrap">
    2.  <div id="sidebar">
    3.    <div class="inside">
    4.      <?php mosLoadModules('left_menu');?>
    5.    </div>
    6.  </div>
    7.  <div id="content">
    8.    <div class="inside">
    9.      <?php mosMainBody(); ?>
    10.    </div>
    11.  </div>
    12.  <div id="footer">
    13.    <div class="inside">
    14.      <?php include_once( $mosConfig_absolute_path .'/includes/footer.php');?>
    15.    </div>
    16.  </div>
    17. </div><!--end of wrap-->


    как же сделать так, чтобы оно вставало туда, куда нужно? мозг сломал - не придумал (

    скрин:
     

    Вложения:

    • error.gif
      error.gif
      Размер файла:
      8.1 КБ
      Просмотров:
      17
    Последнее редактирование: 11.11.2007
  2.  
  3. Offline

    Viper Недавно здесь

    Регистрация:
    26.10.2006
    Сообщения:
    46
    Симпатии:
    2
    Пол:
    Мужской
    Ответ: <div> переносится на другую строку

    Код (CODE):
    1. #menu {
    2. float: left;
    3. width: 15%;
    4. border: 1px solid #cccccc;
    5. }
    6. #adv {
    7. float: left;
    8. width: 15%;
    9. border: 1px solid #cccccc;
    10. clear: left;
    11. }
    12. #content {
    13. float: right;
    14. width: 84%;
    15. border: 1px solid #cccccc;
    16. }
    17.  
    18. <div id="menu">
    19. ver 1.5.5 (09/06/2007)<br />
    20. ver 1.5.5 (09/06/2007)<br />
    21. ver 1.5.5 (09/06/2007)<br />
    22. ver 1.5.5 (09/06/2007)
    23. </div>
    24. <div id="content">
    25. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    26. </div>
    27. <div id="adv">
    28. ver 1.5.5 (09/06/2007)<br />
    29. ver 1.5.5 (09/06/2007)<br />
    30. ver 1.5.5 (09/06/2007)<br />
    31. ver 1.5.5 (09/06/2007)
    32. </div>


    а если такую структуру ?
     
  4. Azazello
    Offline

    Azazello Недавно здесь

    Регистрация:
    24.03.2007
    Сообщения:
    190
    Симпатии:
    4
    Пол:
    Мужской
    Ответ: <div> переносится на другую строку

    libero, все несколько проще, а решений много вот два из них :)
    1. ..касательно того что имеем у вас:
    a) Ваш #content имеет в своих стилях padding и border тем самым он уже не просто 59%, а несколько больше для некоторых браузеров.
    б) также имеем class="inside", который не описан в таблице стилей, тем самым засоряя код, создавая лишний хаос и очередную проблему для браузеров.
    в) главная ошибка в том что #sidebar должен иметь float:left ,а не "none"

    Решение проблемы: подчистить и убрать лишнее, также в размере вашего кода наблюдается #wrap не несущий в данной ситуации никакой смысловой и программной нагрузки. рекомендация дополнительная по отношению к footer (рекомендую поставить clear: both)

    Итого имеем чистое и рабочее
    Код (CODE):
    1. <style type="text/css">
    2. <!--
    3.  
    4. #footer {
    5.     clear: both;
    6.     background:#0099CC;
    7. }
    8. #sidebar {
    9.     background:#CCFFCC;
    10.     float:left;
    11.     width:40%;
    12. }
    13. #content {
    14.     float: right;
    15.     width: 59%;
    16.     border: 1px solid;
    17.     background-color: #CCCCCC;
    18.     border-left-color: #CC0000;
    19.     border-right-color: #FF9900;
    20.     border-top-color: #009900;
    21.     border-bottom-color: #003399;
    22. }
    23.  
    24. -->
    25. </style>
    26. </head>
    27. <body>
    28.  
    29.   <div id="sidebar">
    30.       <p>menu</p>
    31.   </div>
    32.  
    33.   <div id="content">
    34.       <p>12345</p>
    35.   </div>
    36.  
    37.   <div id="footer">
    38.       <p>footer</p>
    39.   </div>
    40.    
    41. <!--end of wrap-->
    42. </body>


    2. Несмотря на все подчистки и зачистки стилей - работу с двумя колонками рекомендую производить внутри таблицы (вставляете дивы внутрь ячейки и истязайте их сколько душе угодно. Причин тому очень много, особенно если вы настроены на "резинку".
     
    Последнее редактирование: 13.11.2007
  5. Offline

    libero Недавно здесь

    Регистрация:
    01.11.2007
    Сообщения:
    15
    Симпатии:
    0
    Ответ: <div> переносится на другую строку

    благодарю за ответы, они мне очень помогли

    использовал двухячеечную таблицу с дивами, все на ура

    2Viper, не совсем понял эту структуру =P и как следствие не смог попробовать (
     
  6. agruts
    Offline

    agruts Russian Joomla! Team

    Регистрация:
    01.03.2006
    Сообщения:
    612
    Симпатии:
    21
    Пол:
    Мужской
    Ответ: <div> переносится на другую строку

    переносилось, потому что нехватало места. Надо было пару процентов убавить у левого или правого дива.
    CSS слишком громоздкий, при таком раскладе, чтобы прописать все классы для всего сайта, получится в 2-3 раза больше кода, чем можно сделать:
    Код (CODE):
    1. html {
    2.     height: 100%;
    3.     margin-bottom: 1px;
    4. }
    5. body {
    6.     margin: 0;
    7.     padding: 0;
    8.     height: 100%;
    9. }
    10. #wrap {
    11.     width: auto;
    12.     margin: 0 auto;
    13.     padding: 0;
    14.    
    15. }
    16.  
    17. #footer {
    18.     clear: both;
    19.     height: auto;
    20.     padding: 2px 7px;
    21. }
    22.  
    23. #sidebar {
    24.     float:left;
    25.     width:36%;
    26.     height: auto;
    27.     padding: 2px 7px;
    28. }
    29.  
    30. #content {
    31.     float: right;
    32.     display: block;
    33.     width: 60%;
    34.     height: auto;
    35.     padding: 2px 7px;
    36.     background-color: #CCCCCC;
    37.     border-left: solid 1px #696969;
    38.     border-right: solid 1px #282828;
    39.     border-top: solid 1px #959595;
    40.     border-bottom: solid 1px #1d1d1d;
    41. }

    Вот тебе дивы, без таблиц:
    Код (PHP):
    1. <body>
    2. <div id=wrap>
    3.     <div id=sidebar>
    4.     <?php if (mosCountModules('left_menu')) : ?>
    5.         <div class="inside">
    6.             <?php mosLoadModules('left_menu');?>
    7.         </div>
    8.     <?php endif; ?>
    9.    </div>
    10.   <div id=content>
    11.   <div class="inside">
    12.      <?php mosMainBody(); ?>
    13.    </div>
    14.   </div>
    15. </div>
    16.  <div id=footer>
    17.  <div class="inside">
    18.      <?php include_once('includes/footer.php'); ?>
    19.    </div>
    20.  </div>
    21. </body>
     
  7. Offline

    Viper Недавно здесь

    Регистрация:
    26.10.2006
    Сообщения:
    46
    Симпатии:
    2
    Пол:
    Мужской
    Ответ: <div> переносится на другую строку

    что непонятного :) пример:

    1111 2222
    3333
    где 1111 - меню, 2222 - контент, 3333 - меню, модуль, что угодно.
    :)

    в бонус - http://www.csszengarden.com/?cssfile=205/205.css как пример
    а ещё лучше - http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
     
  8. Offline

    libero Недавно здесь

    Регистрация:
    01.11.2007
    Сообщения:
    15
    Симпатии:
    0
    Ответ: <div> переносится на другую строку

    ух ты, благодарствую обоим! мегаполезно
     
  9. agruts
    Offline

    agruts Russian Joomla! Team

    Регистрация:
    01.03.2006
    Сообщения:
    612
    Симпатии:
    21
    Пол:
    Мужской
    Ответ: <div> переносится на другую строку

    также рекомендую почитывать
    Adobe CSS Advisor

    чтобы исправлять ошибки в разметке
     

Поделиться этой страницей

Загрузка...