За последние 24 часа нас посетили 17582 программиста и 1630 роботов. Сейчас ищут 1973 программиста ...

авто ширина блока + центрока по высоте на примере

Тема в разделе "HTML и CSS", создана пользователем NT Man, 16 мар 2010.

  1. NT Man

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

    С нами с:
    19 июн 2008
    Сообщения:
    103
    Симпатии:
    1
    Адрес:
    черт его знает
    HTML:
    1. <!DOCTYPE html>
    3.     <head>
    4.         <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    5.         <style>
    6.             * {border: dashed 1px #363636;}
    7.             a {
    8.                 display: inline-block;
    9.                 vertical-align: middle;
    10.                 height:100%;    
    11.             }
    12.             div.example {
    13.                 margin: auto 10px;
    14.                 padding: 1em;
    15.                 width: 300px;
    16.                 height: 300px;
    17.             }
    18.         </style>
    19.     </head>
    20.     <body>
    21.         <div class="example">
    22.             <a href="?"><b>Link 1</b></a>
    23.             <a href="?" style="float:right">Link 2</a>
    24.             <a href="?" style="float:right">Link 3</a>
    25.             <a href="?" style="float:right">Link 4</a>
    26.         </div>                    
    27.     </body>
    28. </html>
    1) Требуется чтобы блок Link1 расширился на все незанятое пространство.
    2) Надписи Link 1, Link 2, Link 3, Link 4 были по центру.
    Уже бьюсь сутки, видимо не так-то это просто сделать.
     
    #1 NT Man, 16 мар 2010
  2. Kreker

    Kreker Старожил

    С нами с:
    8 апр 2007
    Сообщения:
    5.433
    Симпатии:
    0
    А размеры блоков <a> фиксированные?
    Тут нужен table-cell, или таблица :) Либо нужно указывать в процентах: первый 70%, остальные - по 10%.
     
    #2 Kreker, 16 мар 2010
  3. NT Man

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

    С нами с:
    19 июн 2008
    Сообщения:
    103
    Симпатии:
    1
    Адрес:
    черт его знает
    Kreker, благодаря твоей наводке справился сам.
    HTML:
    1. <!DOCTYPE html>
    2.  <html>
    3.      <head>
    4.          <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    5.          <style>
    6.              * {border: dashed 1px #363636;}
    7.              a {
    8.                  display: table-cell;
    9.                  vertical-align: middle;
    10.              }
    11.              div.example {
    12.                  margin: auto 10px;
    13.                  padding: 1em;
    14.                  width: 300px;
    15.                  height: 300px;
    16.                  display: table;
    17.              }
    18.          </style>
    19.      </head>
    20.      <body>
    21.          <div class="example">
    22.              <a href="?" style="width:100%"><b>Link-1</b></a>
    23.              <a href="?">Link-2</a>
    24.              <a href="?">Link-3</a>
    25.              <a href="?">Link-4</a>
    26.          </div>                    
    27.      </body>
    28.  </html>
    Ты это имел в виду когда говорил "тут нужен table-cell"?
     
    #3 NT Man, 16 мар 2010
  4. Kreker

    Kreker Старожил

    С нами с:
    8 апр 2007
    Сообщения:
    5.433
    Симпатии:
    0
    Да :) Только в IE может хромать.
     
    #4 Kreker, 17 мар 2010
  5. karakh

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

    С нами с:
    11 дек 2007
    Сообщения:
    1.344
    Симпатии:
    0
    Точнее, в IE7 будет хромать. И хромает. IE7 это вообще нечто.
     
    #5 karakh, 17 мар 2010
  6. NT Man

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

    С нами с:
    19 июн 2008
    Сообщения:
    103
    Симпатии:
    1
    Адрес:
    черт его знает
    Да кстати, об ослике. эта конструкция работает только начиная с IE8.
    Может кто знает как то-же самое сверстать под IE6/7?
    Вот я начал делать вариант на таблицах:
    HTML:
    1.  
    2. <!DOCTYPE html>
    4.     <head>
    5.         <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    6.         <style>
    7.             * {border: dashed 1px #363636;}
    8.             div.example {
    9.                 border: dashed 1px #363636;
    10.                 margin: auto 10px;
    11.                 padding: 1em;
    12.                 width: 200px;
    13.                 height: 200px;
    14.             }
    15.             a {
    16.                 display: block;
    17.             }
    18.         </style>
    19.     </head>
    20.     <body>
    21.         <div class="example">
    22.         <table style="width:100%; height:100%">
    23.         <tr>
    24.             <td style="width:100%"><a href="?">Link_1</a></td>
    25.             <td><a href="?">Link_2</a></td>
    26.             <td><a href="?">Link_3</a></td>
    27.             <td><a href="?">Link_4</a></td>
    28.         </tr>
    29.         </table>           
    30.         </div>
    31.     </body>
    32. </html>
    33.  
    А вот ссылка в размер ячейки у меня неполучилась. :(
     
    #6 NT Man, 17 мар 2010
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)