Выравнивание по горизонтали Joomla, K2, mod_k2content

Тема в разделе "Верстка", создана пользователем one, 19 авг 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. one

    one

    Регистр.:
    22 июн 2011
    Сообщения:
    409
    Симпатии:
    40
    Из за разного размер тайтла нарушается выравнивание по горизонтали. Подскажите решение.
     

    Вложения:

  2. Trusteg

    Trusteg Создатель

    Регистр.:
    30 ноя 2012
    Сообщения:
    36
    Симпатии:
    11
    ссылка на сайт или html/css код?

    P.S. вообще можно для блока заголовка прописать в css файле высоту, и тогда должно выглядеть все нормально и сделать шрифт поменьше желательно
     
  3. one

    one

    Регистр.:
    22 июн 2011
    Сообщения:
    409
    Симпатии:
    40

    Вот фрагмент кода:

    Код:
    <div>
        <ul>
            <li>
                <a>title</a>
                <div>
                <a>image</a>
                </div>
            </li>
            <li>
                <a>title</a>
                <div>
                <a>image</a>
                </div>
            </li>
    ...
        </ul>
    </div>
    Как все расставить чтобы в выше показанном примере по горизонтали выравнивание было?
     
  4. artefakt777

    artefakt777

    Регистр.:
    15 июл 2012
    Сообщения:
    474
    Симпатии:
    119
    one нравится это.
  5. one

    one

    Регистр.:
    22 июн 2011
    Сообщения:
    409
    Симпатии:
    40
    То что доктор прописал. Взял пример с table. Правда в нем решение с одной строкой а как сделать перенос на 2, 3 и т.д. строку по мере увеличения ячеек?
     
  6. seraph22

    seraph22 Создатель

    Регистр.:
    23 мар 2012
    Сообщения:
    22
    Симпатии:
    14
    Для html.
    Код:
    <table>
    <tr><th>Lorem Ipsum is simply dummy text of the printing</th><th>Lorem Ipsum</th><th>Lorem Ipsum is simply dummy text</th><th>Lorem Ipsum is simply dummy text of the printing</th><th>Lorem</th></tr>
    <tr><th><img src="[URL]https://www.nulled.cc/data/avatars/l/277/277613.jpg?1332449465[/URL]" width="96" height="96" alt="аватар" id="avatar"></th>
    <th><img src="[URL]https://www.nulled.cc/data/avatars/l/277/277613.jpg?1332449465[/URL]" width="96" height="96" alt="аватар" id="avatar"></th>
    <th><img src="[URL]https://www.nulled.cc/data/avatars/l/277/277613.jpg?1332449465[/URL]" width="96" height="96" alt="аватар" id="avatar"></th>
    <th><img src="[URL]https://www.nulled.cc/data/avatars/l/277/277613.jpg?1332449465[/URL]" width="96" height="96" alt="аватар" id="avatar"></th>
    <th><img src="[URL]https://www.nulled.cc/data/avatars/l/277/277613.jpg?1332449465[/URL]" width="96" height="96" alt="аватар" id="avatar"></th>
    </tr>
    <tr><th>Lorem Ipsum is simply dummy text of the printing</th><th>Lorem Ipsum</th><th>Lorem Ipsum is simply dummy text</th><th>Lorem Ipsum is simply dummy text of the printing</th><th>Lorem</th></tr>
    <tr><th><img src="[URL]https://www.nulled.cc/data/avatars/l/277/277613.jpg?1332449465[/URL]" width="96" height="96" alt="аватар" id="avatar"></th>
    <th><img src="[URL]https://www.nulled.cc/data/avatars/l/277/277613.jpg?1332449465[/URL]" width="96" height="96" alt="аватар" id="avatar"></th>
    <th><img src="[URL]https://www.nulled.cc/data/avatars/l/277/277613.jpg?1332449465[/URL]" width="96" height="96" alt="аватар" id="avatar"></th>
    <th><img src="[URL]https://www.nulled.cc/data/avatars/l/277/277613.jpg?1332449465[/URL]" width="96" height="96" alt="аватар" id="avatar"></th>
    <th><img src="[URL]https://www.nulled.cc/data/avatars/l/277/277613.jpg?1332449465[/URL]" width="96" height="96" alt="аватар" id="avatar"></th>
    </tr>
    </table>
    
    Для css.
    Код:
     
    table, td, th {
    border:none;
    text-align:center;
    }
    table {
    width:auto;
    border-collapse:collapse;/*ячейки разделяются обычным способом*/
    margin:auto;
    }
    td, th {
    height:auto; /*меняй на пиксели чтобы получить требуемую высоту*/
    width:auto; /* меняй на пиксели чтобы получить требуемую ширину*/
    padding:5px;
    vertical-align:top;
    background-color:none;
    }
    
     
  7. one

    one

    Регистр.:
    22 июн 2011
    Сообщения:
    409
    Симпатии:
    40
    seraph22, пример кода внимательно изучили?
     
  8. Trusteg

    Trusteg Создатель

    Регистр.:
    30 ноя 2012
    Сообщения:
    36
    Симпатии:
    11
    в CSS
    Код:
    ul li {display:inline-block;vertical-align:bottom;}
    Само перенесет на следующую строку, как только ширина элементов списка превысит ширину внешнего блока
     
  9. one

    one

    Регистр.:
    22 июн 2011
    Сообщения:
    409
    Симпатии:
    40
    Ну вот не переносит...
     
  10. Trusteg

    Trusteg Создатель

    Регистр.:
    30 ноя 2012
    Сообщения:
    36
    Симпатии:
    11
    one, Сюда можете пример свой выложить?

    Попробуйте в CSS ul {width:X;}, где X - ширина внешнего блока