Выравнять фото по верхнему краю таблицы

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем Sergi, 25.07.2014.

  1. Offline

    Sergi Пользователь

    Регистрация:
    03.11.2009
    Сообщения:
    85
    Симпатии:
    0
    Пол:
    Мужской
    Стал переносить сайт с Joostinа на Joomla 3 и столкнулся с такой проблемой: после копирования кода материала в Joomla фото стали выравниваться особым образом (см. вложения) в зависимости от их размера и теста написанного под ними. Нужно что бы все фото выравнивались по верхнему краю таблицы, хотя до этого такой проблемы не было, просто копировал код без изменений. Редактор в Joomla JCE, шаблон protostar
    Вот собственно код скриншота во вложении:

    <table style="width: 400px;" border="0" align="center">
    <tbody>
    <tr>
    <td><a title="Что бы посетить и сфотографировать сенот без кучи туристов, то сюда надо приезжать рано утром." href="images/stories/America/Mexica/Playa/DSC09801.jpg" rel="iLoad|Ик Киль" target="_self"><img style="float: left; margin: 5px; width: 900px; height: 600px;" title="Ик Киль" src="images/stories/America/Mexica/Playa/DSC09801.jpg" alt="сенот" width="900" height="600" /></a><br /> Что бы посетить и сфотографировать сенот без кучи туристов, то сюда надо приезжать рано утром.</td>
    <td>&nbsp;<a title="Корни растений в сеноте опускаются с поверхности земли до самой воды, представляет тем самым, довольно необычное зрелище." href="images/stories/America/Mexica/Playa/DSC09811.jpg" rel="iLoad|Ик Киль" target="_self"><img style="float: left; margin: 5px; width: 900px; height: 600px;" title="Ик-Киль" src="images/stories/America/Mexica/Playa/DSC09811.jpg" alt="сенот" width="900" height="600" /></a><br /> Корни растений в сеноте опускаются с поверхности земли до самой воды, представляет тем самым, довольно необычное зрелище.</td>
    <td><a title="сенот Ик Киль" href="images/stories/America/Mexica/Playa/DSC09820.jpg" rel="iLoad|Ик Киль" target="_self"><img style="float: left; margin: 5px; width: 900px; height: 600px;" title="Ик Киль" src="images/stories/America/Mexica/Playa/DSC09820.jpg" alt="сенот" width="900" height="600" /></a>
    </td>
    </tr>
    <tr>
    <td><a title="сенот" href="images/stories/America/Mexica/Playa/DSC09821.jpg" rel="iLoad|Ик Киль" target="_self"><img style="float: left; margin: 5px; width: 900px; height: 601px;" title="Ик Киль" src="images/stories/America/Mexica/Playa/DSC09821.jpg" alt="сенот" width="900" height="601" /></a>
    </td>
    <td><a title="сеноты" href="images/stories/America/Mexica/Playa/DSC09822.jpg" rel="iLoad|Ик Киль" target="_self"><img style="float: left; margin: 5px; width: 900px; height: 540px;" title="сеноты" src="images/stories/America/Mexica/Playa/DSC09822.jpg" alt="Ик Киль" width="900" height="540" /></a>
    </td>
    </tr>
    </tbody>
    </table>
     

    Вложения:

    • sait.jpg
      sait.jpg
      Размер файла:
      239.4 КБ
      Просмотров:
      8
  2.  
  3. DKraev
    Offline

    DKraev <i>(aka gft)</i>

    Регистрация:
    16.08.2008
    Сообщения:
    1 627
    Симпатии:
    216
    Пол:
    Мужской
    Ячейка таблицы по умолчанию имеет стиль vertical-align:middle;

    По всей видимости в старом CSS было принудительно выставлено vertical-align:top;

    Можете прописать в css table td {vertical-align:top;} - будет применено ко всем таблицам на сайте
     
  4. Offline

    Sergi Пользователь

    Регистрация:
    03.11.2009
    Сообщения:
    85
    Симпатии:
    0
    Пол:
    Мужской
    Вот нашел в css
    .table td {
    padding: 8px;
    line-height: 18px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd;
    }
    выходит прописано как надо
    нашел еще
    img {
    max-width: 100%;
    width: auto \9;
    height: auto;
    vertical-align: top; здесь middle исправил на top не помогло
    border: 0;
    -ms-interpolation-mode: bicubic;
    }

    Блин, мне эта проблема всё дело тормозит

    Пробовал переименовать файл template css на template1, весь шаблон разъехался по всей ширине экрана фотки приняли оригинальный размер width="900" height="600", но расположение осталось прежнее то есть не изменилось.
    Пробовал файл template css из старого сайта заменить в джумле 3 там шаблон protostar, весь текст разехался по всей ширине монитора, таблица осталась в заданных размерах, но и положение фоток не изменилось, то есть по верхнему краю ничего не выравнялось. Такое впечатление, что где-то еще это прописано.
    на всякий случай файл css загрузил
     

    Вложения:

    • template.txt
      Размер файла:
      153.5 КБ
      Просмотров:
      0
    Последнее редактирование: 26.07.2014
  5. DKraev
    Offline

    DKraev <i>(aka gft)</i>

    Регистрация:
    16.08.2008
    Сообщения:
    1 627
    Симпатии:
    216
    Пол:
    Мужской
    Простите, но тормозите вы сами. Адрес сайта где? Был-бы - уже давно помогли бы.
     
  6. Offline

    Sergi Пользователь

    Регистрация:
    03.11.2009
    Сообщения:
    85
    Симпатии:
    0
    Пол:
    Мужской
    Я занимаюсь переносом сайта локально. Переношу с Joostina на Joomla 3. Например: так выглядит стр., которую переношу http://туризм-фотографии.рф//index.php?option=com_content&task=view&id=177&Itemid=99999999, а так уже когда перенес код простым копированием (см. вложение). Могу добавить, что использую стандартный шаблон protostar, уже включённый в джумлу.
     

    Вложения:

    • sait.jpg
      sait.jpg
      Размер файла:
      239.4 КБ
      Просмотров:
      4
  7. DKraev
    Offline

    DKraev <i>(aka gft)</i>

    Регистрация:
    16.08.2008
    Сообщения:
    1 627
    Симпатии:
    216
    Пол:
    Мужской
  8. Offline

    Sergi Пользователь

    Регистрация:
    03.11.2009
    Сообщения:
    85
    Симпатии:
    0
    Пол:
    Мужской
    С тем сайтом, который доступен в инете проблем нет. Его я переношу на локальной машине на 3 джумлу, вот там как раз проблемы, как всё выглядит показно в скриншоте в предыдущем посте.
    --- добавлено: 28.07.2014, первое сообщение размещено: 28.07.2014 ---
    Поиском в файле template.css нашел все записи vertical-align: middle; и исправил на vertical-align: top; не помогло.
    Для эксперимента файл css в шаблоне protostar заменил файлом из шаблона beez3 где все фото выравнены по верхнему краю таблицы, так же не помогло.
    Напрашивается вывод, что положение фото в таблице прописано где-то в другом месте.
    Пробовал через тотал в папке шаблона найти файлы с записью middle, таковых нет.
    Неужели эта задача не разрешима???
     
  9. DKraev
    Offline

    DKraev <i>(aka gft)</i>

    Регистрация:
    16.08.2008
    Сообщения:
    1 627
    Симпатии:
    216
    Пол:
    Мужской
    Попробуйте добавить в css:

    Код (css):
    1. caption, td, th, tr {
    2. vertical-align: top !important;
    3. }
     
    Последнее редактирование модератором: 29.07.2014
    Sergi нравится это.
  10. Offline

    Sergi Пользователь

    Регистрация:
    03.11.2009
    Сообщения:
    85
    Симпатии:
    0
    Пол:
    Мужской
    Спасибо помогло!
    Если бы почаще с css работал, возможно додумался бы и сам до !important;, а так приходиться делать когда что-нибудь переделать или доделать, надо а это раз в год.
    Еще раз спасибо.
     

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

Загрузка...