Недавно я взял проект, создав веб-сайт для моего друга. Это сайт недвижимости, и вы можете просмотреть его here.Проблема с форматированием стороннего виджета с CSS
Сайт использует IDX для извлечения данных из MLS. MLS - это услуга множественного листинга, которая размещает дома для продажи и дает много информации о них, IDX (обмен данными через Интернет) захватывает эту информацию и заполняет ее на ваш сайт. Это тоже не дешево, по-моему.
Вещь с использованием IDX, ну, IDX, который мой клиент использует в любом случае, то есть IDX Broker, так это то, что их код находится на месте для виджетов и страниц. Это доступно для редактирования, но есть только несколько стилей, которые у них есть. Если вы хотите, чтобы что-то выглядело иначе, вам нужно отредактировать их css.
Я знаю некоторые css, но не так сильно, как хотелось бы, и я не могу получить этот код для виджета, который я хочу переделать, чтобы делать то, что хочу.
Я хочу, чтобы изображение было слева, а данные (текст) были справа, вероятно, в двух столбцах и выровнены с изображением. Этот виджет изначально был спроектирован с изображением сверху и текстовым центром, выровненным под ним, который является кодом, который я начал с этого виджета. Я изменил несколько вещей, чтобы получить текст с правой стороны и изображение слева (float: left;), и я изменил размер изображения на 350 пикселей по высоте и ширине. Текст с правой стороны находится напротив верхней части контейнера и не выравнивается с изображением. Кроме того, изображения появляются в разных размерах и, как представляется, имеют разные размеры полей. Я не уверен, почему это так, но я предполагаю, что это имеет какое-то отношение к изображениям на сайте MLS, откуда их тянет. Я играл около тонны, пытаясь добавить float, margin и align-center, чтобы попытаться заставить вещи выглядеть хорошо, но мне не повезло. Используемые селектора - это те, которые были установлены на месте IDX и те, которые я должен использовать. Кажется, он отформатирован с таблицами, строками и ячейками, но я не уверен, что и где изменения в них влияют. Существует также селектор классов с псевдо-классом, который называется # IDX-showcaseGallery-35264. IDX-showcaseLink: перед этим я не уверен, что это или делает. Я действительно знаю, что мне пришлось менять ширину в этом диапазоне от 100% до авто, чтобы получить текст с правой стороны изображения, не находясь под изображением.
В любом случае, я вставлю код ниже. Всем приветствуется всяческая помощь.
#IDX-showcaseGallery-35264.IDX-showcaseTable {
table-layout:fixed;
border-spacing:8px;
font-size:11px; }
#IDX-showcaseGallery-35264 .IDX-showcaseRow {
display:table-row; }
#IDX-showcaseGallery-35264 .IDX-showcaseCell {
display:table-cell; margin-top:20px;
}
#IDX-showcaseGallery-35264 .IDX-showcaseContainer {
border:1px solid #666;
-webkit-box-shadow: 1px 1px 3px rgba(22,22,22,.4);
box-shadow: 1px 1px 3px rgba(22,22,22,.4);
padding:3px;
}
#IDX-showcaseGallery-35264 .IDX-showcaseLink {
height: 100%;
width: auto;
font-size: 0;
text-align: center;
display: inline-block;
float: left;
}
#IDX-showcaseGallery-35264 .IDX-showcaseLink:before {
content: "";
display: inline-block;
vertical-align: middle;
}
#IDX-showcaseGallery-35264 .IDX-showcasePhoto {
height: 350px;
width: 350px;
display: inline-block;
float: left;
}
#IDX-showcaseGallery-35264 .IDX-showcaseCell div {
text-align: center;}
/*#IDX-showcaseGallery-35264 .IDX-showcaseListingID,
#IDX-showcaseGallery-35264 .IDX-showcaseBeds,
#IDX-showcaseGallery-35264 .IDX-showcaseBaths,
#IDX-showcaseGallery-35264 .IDX-showcaseFull,
#IDX-showcaseGallery-35264 .IDX-showcasePartial,
#IDX-showcaseGallery-35264 .IDX-showcaseRemarks,
#IDX-showcaseGallery-35264 .IDX-showcaseDisclaimerLink,
#IDX-showcaseGallery-35264 .IDX-showcaseStatus,*/
#IDX-showcaseGallery-35264 .IDX-showcaseStateAbrv {display:none;}
#IDX-showcaseGallery-35264 .IDX-showcaseContainer {
position:relative;
margin-top: 40px;}