Подскажите пожалуйста, как можно создать в странице контактов ворд пресс подобное. Пробовала в таблице, <table> но не то получается. Буду благодарна за подсказку.
Что именно не получается? Вполне может быть и таблица: 2 строки, две колонки. В каждой ячейке два блока: заголовок с иконкой и сама информация. Всё остальное - через css. Хотя, если делаете адаптивный шаблон, лучше таблицы не использовать, но структуру это не отменяет, просто вместо таблицы - всё на дивах. Кстати, WordPress тут не при чём - это на 100% вопрос вёрстки.
Использую float, но блоки не встают ровненько, гляньте что не так делаю? HTML: <div class="row"> <div class="conta_w phone_cont"> <div class="sm_title cont1">Позвоните нам</div> <div class="cont_text ringo_phone"> <span class="binct-phone-number-1">xxxxxxxxxx</span><br> xxxxxxxxxxxxxxx </div> </div> <div class="conta_w email_cont"> <div class="sm_title cont2">Напишите нам</div> <div class="cont_text"> [email protected] </div> </div> <div class="clearfix"></div> <div class="conta_w clock_cont"> <div class="sm_title cont3">Время работы</div> <div class="cont_text"> с 8:00 до 18:00, без выходных </div> </div> <div class="conta_w adress_cont"> <div class="sm_title cont4">Адрес</div> <div class="cont_text"> г.Москва xxxxxxxxxx </div> </div> </div> _________________________________ .phone_cont { float: left; padding: 0px; margin-right: 20px; width: 40%; } .clock_cont { float: left; padding: 0px; margin-right: 150px; width: 40%; }
На сайте не размещено пока. Вот здесь посмотрите - https://jsfiddle.net/6bte15w9/ Каркас с адресом и времени работы не ровно отображаются
Вот на флексбоксе - https://jsfiddle.net/6bte15w9/8/ Можно было бы и без него, но лень. А вам советую найти хоть какой-то курс по вёрстке, потому что то, что вы делаете сейчас похоже на постройку дома путём раскидывания кирпичей и разбрызгивания поверх них цемента. У вас нет полноценного понимания, как это всё должно вцелом взаимодействовать, вы просто тулите что куда.
Спасибо за совет, я прохожу курсы на аадемии, и только учусь. А как например спустить или поднять какой-либо каркас (например написать нам) выше или ниже?
Что вы называете каркасом? Для смещения какого-либо блока можно использовать маржины, а для смещения его контента - паддинги.
margin-left margin-right? А по вертикали? Прежде всего контейниры завернутые в див, 4 блока текстовых. К примеру контейнер с временем работы, хочу поднять выше
Вы меня убиваете! Вот - https://www.w3schools.com/css/css_margin.asp Советую вам бросить срочно всё и хоть немного плистать какой-нибудь справочник по CSS, потому что обрывочность ваших знаний просто пугает. Так и называйте это контейнером. Каркас - это общая базовая структура. Отрицательный маржин. Но зачем? Сейчас все блоки аккурантно расположены по сетке (2 строки, 2 колонки).
Залила файлы на сервер. У меня почему то колонка с адресом ниже чем время работы - http://testovii.cafe-jara.ru Поэтому я задам отрицательный маржин: .clock_cont{ margin-bottom: -30px; }
Потому что вы невнимательны! Ещё раз посмотрите на фидл, который я поправил, а именно на html там. И научитесь пользоваться инструментами разработчика в браузере - благодаря подсетке блоков я за секунду увидел причину проблемы.
да, действительно не заметила --- Добавлено, 1 мар 2018 --- Ок, буду стараться смотреть в файрбаг. Подскажите еще пожалуйста. К примеру я хочу вставить слева всего этого каркаса логотип. Добавляю отдельный див с классом, в котором вставляю картинку, а классу задаю float: left - https://jsfiddle.net/wwnqjvLq/3/ вроде бы все хорошо на ПК, но вот на мобильном устройстве все ломается.
Он уже пару лет не работает (если вы браузер обновлять не забываете). В Мозилле давно есть встроенные инструменты. Как именно ломается? У вас должен быть для начала общий каркас страницы, а не просто накиданные отдельно блоки. Кроме того, для маленьких экранов можно писать отдельные стили через media queries. Вообще, в последние годы вёрстку делают по принципу mobile first, то есть, сначала пишут стили для минимального поддерживаемого разрешения, а затем через media queries добавляют стили для больших разрешений (только отличающиеся стили).
Заметила, значит я пользуюсь инструментами разработчика. В моем случае тема ворд пресс уже адаптивная под мобильники. Но я тегом img вставляю логотип в хедер (не пользуюсь в настройках возможность загрузить логотип), а так же эти дивы с каркасом, которые выше обсуждали. И они скорее всего вылазят за общий каркас шаблона. В итоге получается логотип на смартфоне на весь хедер, а текст что в дивах в стороне в куче налез друг на друга. Наверно рано мне еще пока сюда лезть. Пока изучаю сетки.
