Как отцентровать среднюю колонку в таблице?

Тема в разделе "Веб-дизайн", создана пользователем Orbit, 8 окт 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Orbit

    Orbit Постоялец

    Регистр.:
    3 апр 2007
    Сообщения:
    145
    Симпатии:
    74
    подскажите пожалуйста.
    Таблица должна быть 100% ширины на все окно, средняя колонка должна быть фикс. ширины, скажем 800 пиксселей и располагаться строго по центру, т.е. заполняя окно разъезжаются боковые колонки. Как это можно сделать?
     
  2. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Вопервых покажи свой код.
    А вовторых поясни что у тебя будет в боковых колонках?
    Если тебе нужно отцентрировать страничку то это:

    HTML:
    <div class="center">
       Content
    </div>
    Код:
    .center{
       width:800px;
       left:50%;
       margin-left:-400px;
       position:absolute;
    }
     
  3. Orbit

    Orbit Постоялец

    Регистр.:
    3 апр 2007
    Сообщения:
    145
    Симпатии:
    74
    спасибо за ответ - там дело в том, что идет продолжение фона центральной части и только вправо.
    Сейчас задача упростилась - у центральной части фикс. не только ширина но и высота. думаю, разберусь.
    Кстати а если тупо прописать 50 проц. ширину для правой и для левой, а для центральной фиксировнную ширину - это не верный вариант? (у меня все разьехалось, что внутри, но думаю возможно подправить.)
     
  4. hipachka

    hipachka

    Регистр.:
    16 мар 2009
    Сообщения:
    391
    Симпатии:
    78
    Можно и так! У тебя на таблицах сделано ? Шаблон покажи, тебе конкретней можно будет сказать что и как.
     
    Orbit нравится это.
  5. капрал

    капрал

    Регистр.:
    2 окт 2008
    Сообщения:
    336
    Симпатии:
    45
    отцентрировать таблу - помниться хак был для этого:
    Код:
    <table cellpadding=0 cellspacing=0 width=100%>
    <tr>
    <td width=50%></td>
    <td>
    <table cellpadding=0 cellspacing=0 width=800>
    <tr>
    <td>
    <!--content-->
    </td>
    </tr>
    </table>
    </td>
    <td width=50%></td>
    </tr>
    </table>
    
     
    Orbit нравится это.
  6. Orbit

    Orbit Постоялец

    Регистр.:
    3 апр 2007
    Сообщения:
    145
    Симпатии:
    74
    Сама колонка то центрируется, но при этом с дивами, которые внутри начинает что-то происходить...
    Ниже пример кода. Если поменять ширину боковых колонок так, чтобы они не сдавливали среднюю, то все ок, оба дива стоят рядом. (например у левой колонки убрать ширину, а у правой поставить 10 процентов). Но в приведенном коде дивы упорно становятся один под другой. Подскажите, как сделать и чтобы колонка центрировалась и дивы друг под друга не прыгали?
    Код:
    <!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" />
    <title>test</title>
    <style type="text/css">
    body{
    margin:0;
    padding:0;
    }
    #left {width:50%}
    #right {width:50%}
    #middle {width:700px}
    #main {width:500px; float:right; background-color:#C66}
    #menu {width: 200px;  background-color:#09C}
    </style>
    </head>
    <body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td id="left">&nbsp;</td>
        <td id="middle">&nbsp;</td>
        <td id="right">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>
            <div id="main">&nbsp;</div>
            <div id="menu">&nbsp;</div> 
        </td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
    
     
  7. hipachka

    hipachka

    Регистр.:
    16 мар 2009
    Сообщения:
    391
    Симпатии:
    78
    По моему ты сам на свой вопрос уже ответил. Делай width у боковых колонок такой какой тебе нужно. Браузер читает - разрешение 1280px, значит 10% будет 128px. 1024px значит 102px и т.д.

    Тебе нужно просчитать как и на каких разрешениях должен выглядеть твой макет, а потом сделать это. Дивы всегда уходят друг под друга если им не хватает места для позиционирования.

    Удачных экспериментов )
     
  8. Orbit

    Orbit Постоялец

    Регистр.:
    3 апр 2007
    Сообщения:
    145
    Симпатии:
    74
    Там мне нужно чтобы они растягивались на всю ширину экрана (хотя бы правая) А средняя оставалась по центру.
    (в принципе я уже забил на дивы внутри и сделал все на таблицах...)
     
  9. Orbit

    Orbit Постоялец

    Регистр.:
    3 апр 2007
    Сообщения:
    145
    Симпатии:
    74
    это по-моему не о том. мне то таблицу надо растянуть, среднюю колонку в центре оставить а боковые растянуть.
     
  10. hipachka

    hipachka

    Регистр.:
    16 мар 2009
    Сообщения:
    391
    Симпатии:
    78
    Глянь вот эту тему :

    http://www.nulled.ws/showthread.php?t=150599

    В частности вот этот сайт:

    http://csstemplater.com/
    Там найдешь как распологать блоки в DIV верстке.

    Ну а в таблицах еще проще.
    Указываем ширину только для центральной колонки остальные автоматом растягиваются.

    PHP:
    <table width="100%" border="1">
      <
    tr>
        <
    td scope="col">&nbsp;</td>
        <
    td scope="col" width="800px">&nbsp;</td>
        <
    td scope="col">&nbsp;</td>
      </
    tr>
    </
    table>
     
Статус темы:
Закрыта.