Перейти к публикации

Взаимодействие элементов из разных дивов


Рекомендованные сообщения

Доброго времени суток. Возникла такая проблема, нужно сверстать страницу согласно макету, используя только flex и grid

Сразу появилась идея разбить страницу на три divа, первый это блок с породами кота, второй это блок с фотками и третий блок с рейтингом.

<body>
    <header>Бабуленькины котятки</header>
    <div class="global">
        <div class="menu">
            <a class="submenu" href="#" id="abis">Абиссинская</a>
            <a class="submenu" href="#" rel="brit"">Британская</a>
            <a class="submenu" href="#" rel="rus">Русская голубая</a>
            <a class="submenu" href="#" rel="siam">Сиамская</a>
        </div>
        <div class="cats">
            <img src="http://murkote.com/wp-content/uploads/2014/03/abissinskaya-koshka-foto.jpg" alt="" class="abis">
            <img src="http://murkote.com/wp-content/uploads/2015/06/australian-mist-5.jpg" alt="" class="cat">
            <img src="http://murkote.com/wp-content/uploads/2015/05/American-Bobtail-Cat.jpg" alt="" class="abis">
            <img src="http://murkote.com/wp-content/uploads/2015/06/american-curl-7.jpg" alt="" class="cat">
            <img src="http://murkote.com/wp-content/uploads/2015/06/Anatolijskya-koshka-2.jpg" alt="" class="abis">
            <img src="http://murkote.com/wp-content/uploads/2015/06/arabian-mau-1.jpg" alt="" class="cat">
            <img src="http://murkote.com/wp-content/uploads/2014/03/leopardovaya-bengalskaya-koshka.jpg" alt="" class="cat">
            <img src="http://murkote.com/wp-content/uploads/2015/06/Brazilian-Shorthair-cat-2.jpg" alt="" class="cat">
        </div>
        <div class="rating"></div>
    </div>
    <footer>Подвал</footer>
<style>
a {
    color: #000 !important;
    text-decoration: none;
}
body {
    background-color: gainsboro;
    display: flex;
    flex-direction: column;
}
header {
    text-align: center;
    font-size: 40px;
    font-style: bold;
}
img {
    width: 250px;
    height: 200px;
}
.global {
    display: -webkit-flex;
    display: flex;
    justify-content: space-around;
}
footer {
    color: wheat;
    background: black;
}
div.menu {
    display: flex;
    width: 250px;
    flex-wrap: wrap; 
    background: gray;
    align-content: flex-start;  
}
.submenu {
    display:flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    font-size: 25px;
    border-bottom: white 1px solid; 
}
.cats {
    display: flex;
    flex-wrap: wrap;
    width: 800px;
    height: 900px;
    justify-content: space-around;
}

.cats img:nth-child(2){
    width: 500px;
}

.cats img:nth-child(6) {
    width: 500px;
}

.cats img:nth-child(8) {
    width: 750px;
}

.rating {
    width: 250px;
    background: olive;
}


</style>

Но возникла проблема, надо сделать так, чтобы при выборе категории, кошки данной породы меняли прозрачность. Так как у меня фото и породы в разных блоках, я не понимаю как это сделать. Был вариант не добавлять категории в отдельный блок, но тогда как разметить страницу? Прошу помощи, или хотя бы небольшой подсказки

Ссылка на сообщение
Поделиться на других сайтах
6 минут назад, sasha_anto сказал:

Но возникла проблема, надо сделать так, чтобы при выборе категории, кошки данной породы меняли прозрачность.

Здравствуйте.

Проще всего это реализовать на JS

Ссылка на сообщение
Поделиться на других сайтах
Только что, klierik сказал:

Здравствуйте.

Проще всего это реализовать на JS

Да, об этом я знаю, но обязательный пункт в задании это не использовать js

Ссылка на сообщение
Поделиться на других сайтах
45 минут назад, sasha_anto сказал:

Да, об этом я знаю, но обязательный пункт в задании это не использовать js

В таком случае используйте PHP — после выбора категории сервер вернёт страницу с уже выбранными породами.

Ссылка на сообщение
Поделиться на других сайтах
1 минуту назад, klierik сказал:

В таком случае используйте PHP — после выбора категории сервер вернёт страницу с уже выбранными породами.

Мне можно использовать только html и css

Ссылка на сообщение
Поделиться на других сайтах
Только что, sasha_anto сказал:

Мне можно использовать только html и css

В таком случае я искренне вам сочувствую. От вас требуется "собрать автомобиль", пригодный для эксплуатации, но запрещено устанавливать колёса.

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

  • Похожие публикации

    • Махардзе Иосиф
      Автор: Махардзе Иосиф
      Приветствую, не судите пожалуйста строго, я начинающий верстальщик, итак, при вёрстке сайта столкнулся с проблемой, имеется изображение поверх надо наложить пару flex элементов, но ни как не получается, они вытесняют друг друга, margin и background использовать нельзя, изображение обязательно должно быть в теге img а блок контейнер резиновый т.е. без указания абсолютных величин, одним словом должно получиться так как на картинке.

    • cozy_eternity
      Автор: cozy_eternity
      Столкнулся с проблемой показа скрытых элементов. Ставлю div'у display:none и при выборе radio кнопки, div должен отображаться, но этого не происходит, прошу помочь..

       
      <label>Нужны ли распашные дверцы?</label> <p><input type="radio" name="swing" onclick="ShowElement1">Да</p> <p><input type="radio" name="swing">Нет</p> <div id="swing"> <p><label>Введите размер ячеек:</label></p> <p>Высота<input type="number"></p> <p>Ширина<input type="number"></p> <p>Глубина<input type="number"></p> </div> #swing { display: none; } function ShowElement1(){ document.getElementById("swing").style.display='block'; } Разобрался
    • Xandr555
      Автор: Xandr555
      Добрый день. Размещено 2 блока по 3 изображения, отцентрировано flex, по плану при наведении курсора картинка затемняется, сверху появляется описание. Стили работают как задумано только в Chrome и Opera. В Сафари рамка не всплывает, текст не выравнивается. В IE 11 рамка всплывает, текст не выравнивается. Заранее благодарю.
      <div class="wrapper"> <div class="demo-content"> <div class="part"> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample54.jpg> <figcaption><section class="imgone">По Вашему желанию электропроводку можно уложить в ПВХ-короб</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample73.jpg> <figcaption><section class="imgone">Красиво, эстетично и надежно - наше кредо!</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample58.jpg> <figcaption><section class="imgone">Такой вариант электропроводки рекомендуем, например, в подсобных постройках</section></figcaption> </figure> </div> </div> </div> <div class="wrapper"> <div class="demo-content"> <div class="part"> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample54.jpg> <figcaption><section class="imgone">Вмонтированный в стену электросчетчик делает Вашу квартиру более объемной</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample73.jpg> <figcaption><section class="imgone">Устанавливайте новые светильники, мы поможем подобрать их по мощности</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample58.jpg> <figcaption><section class="imgone">Мы устанавливаем розетки и выключатели в любой компоновке</section></figcaption> </figure> </div> </div> </div> *, *:after, *:before { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; } .wrapper{margin:0 auto} .demo-content { text-align: center; } .part{max-height:310px;max-height:100%;display:flex;display:-moz-flex;display: -webkit-flex;justify-content:center} figure.img-box { text-align: center; position: relative; display: inline-block; overflow: hidden; margin: 3px 3px; max-width: 300px; width:100%; background-color:#DCDCDC; -webkit-box-shadow: 0 8px 17px 0 hex(#cccccc), 0 6px 20px 0 hex(#cfcfcf); box-shadow: 0 8px 17px 0 hex(#cccccc), 0 6px 20px 0 hex(#cfcfcf); } figure.img-box * { -webkit-box-sizing: padding-box; box-sizing: padding-box; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } figure.img-box img { max-width: 100%; vertical-align: top; } figure.img-box figcaption { position:absolute; top:0; bottom:0; left:0; right:0; align-items:center; z-index:1; display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; flex-direction:column; -webkit-flex-direction:column; -moz-flex-direction:column; -ms-flex-direction:column; justify-content:center; opacity:0; } figure.img-box:after { border: 8px solid #FF0000; position: absolute; content: ""; display: block; top: 50%; bottom: 50%; left: 0; right: 0; -webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; opacity: 0; } figure.img-box:hover img { opacity:0.2; } figure.img-box:hover:after { top: 0; bottom: 0; opacity: 0.9; } .img-box .imgone { font-family:'Roboto',sans-serif; color:#00008B; font-size:16px; font-weight: 400; margin: 0; padding:0 10px; transform: scale(0); -webkit-transform:scale(0); -ms-transform:scale(0); -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; } .img-box:hover figcaption, .img-box:hover .imgone { transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); opacity: 1; } скриншоты прилагаю



  • Статистика пользователей

    47 306
    Всего пользователей
    1 451
    Рекорд онлайна
    thehostbest
    Новый пользователь
    thehostbest
    Регистрация
  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×
×
  • Создать...