Jump to content
  • Sign Up
  • 0

Проблема с текстом


Shenia132
 Share

Question

Есть дивы на сайте http://nrdesign.com.ua/ 

НАС ЧАСТО СПРАШИВАЮТ

 

Кликая по тексту Как мы работаем или Сколько стоят наши услуги выезжает текст с описанием этой услуги, но если по открывать сразу все то будет ничего не видно. Как сделать так чтобы если один открыт то кликая по другому первый закрывался. Помогите нужно срочно решить проблему.

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

в скрипте который их открывает добавьте закрытие всех элементов section.ac-container article, если конечно у вас нет подобной комбинации объектов еще где-нибудь, иначе придется закрывать их по классам .ac-large, .ac-large1 и т.п.

Link to comment
Share on other sites

  • 0
<div class = "often-ask">
<a href = "#"><img src = "images/price-of-services.png" alt = "Сколько стоят наши услуги"></a>
<section class="ac-container">
<div>
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2">Сколько стоят<br>наши услуги</label>
<article class="ac-medium">
<p>Услуг мы не предоставляем, однако если вы желаете установить любую CMS систему на свой сайт (при условии наличия у вас архива данной CMS), то можете обратиться к нам через форму обратной связи. Любая помощь в комментариях на сайте осуществляется исключительно на добровольных условиях.</p>
</article>
</div>
</section>
</div>
<div class = "often-ask">
<a href = "#"><img src = "images/ready-site.png" alt = "Когда будет готов сайт"></a>
<section class="ac-container">
<div>
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3">Когда будет<br>готов сайт</label>
<article class="ac-large">
<p>У нас два небольших проекта: "Форум твоего направления" и непосредственно этот сайт "Скрипты для сайтов". Большая часть времени уходит на их содержание и обслуживание.</p>
</article>
</div>
</section>
</div>
<div class = "often-ask">
<a href = "#"><img class = "last-img" src = "images/robots-start.png" alt = "Что нужно для начала работы"></a>
<section class="ac-container">
<div>
<input id="ac-4" name="accordion-1" type="checkbox" />
<label for="ac-4" class = "big-label">Что нужно<br>для начала роботы</label>
<article class="ac-large1">
<p>Связаться с нами можно через форму обратной связи (email почту), через социальные сети (twitter) или системы мгновенных сообщений: ICQ.</p>
</article>
</div>
</section>
</div>
</div>

css

 

.ac-container{
text-align: center;
    width: 150px;
margin: 10px auto 30px auto;
}
.ac-container label{
text-transform: uppercase;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
cursor: pointer;
color: #2d2d2d;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
font:22px Cuprum;
width: 140px;
right: 13px;
}
.ac-container label:hover{
 
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
 
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
}
.ac-container input:checked + label:hover:after{
}
.ac-container input{
display: none;
}
.ac-container article{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article p{
font-style: italic;
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ article{
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-small{
height: 140px;
width: 940px;
}
.ac-container input:checked ~ article.ac-medium{
height: 116px;
    width: 665px;
}
.ac-container input:checked ~ article.ac-large{
float: right;
    height: 89px;
    overflow: hidden;
    width: 617px;
}
 
.ac-container input:checked ~ article.ac-large1{
float: right;
    height: 89px;
    overflow: hidden;
width: 940px;
}
 
.ac-container .big-label {
width:190px;
position:relative;
right:41px;
}
Edited by Shenia132
Link to comment
Share on other sites

  • 0

оуу... у вас тут хитрая css конструкция, и реализовать толково через css свойства я не уверен, что это возможно. Такое лучше делать через js например так

Link to comment
Share on other sites

  • 0

Спасибо ! Скажите пожалуйста как мне на сайте nrdesign.com.ua сделать чтобы два последних пункта открывались в другую сторону, мне надо сделать так чтобы один открыл и он открылся на всю ширину блока, в первых двух пунктах это получается но последних два надо чтоб открывались в другую сторону (надеюсь объяснил понятно) и еще одна проблема когда открываешь пункт как мы работаем то двигаются все блоки

Link to comment
Share on other sites

  • 0

сдвигаются, потому что они у вас float и им не хватает места

чтобы открывались справа налево в последних блоках, сделайте им отрицательный отступ побольше

Link to comment
Share on other sites

  • 0

не знаю как вы увеличивали, но у меня при увеличении все норм получается и ничего ни куда не скачет

для .often убираем padding и ставим width:150% - при этом увидите свои блоки на одной строке и при открытии подсказок ни кто не прыгает.

НО ТАК ОСТАВЛЯТЬ НЕ НУЖНО!

решение проблемы таким и остается:

1. дать больше места вашим блокам

2. можно уменьшить размер блоков

3. сделать блоки таблицей

4. сделать блоки через display:inline; и запретить перенос на новую строку

 

PS кста, отрицательная ширина не работает и я советовал сделать отрицательный отступ для выпадающих блоков

например для .right установить margin: 0px 0px 0px -80%;

Edited by Switch74
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • andryha2008
      By andryha2008
      Доброго времени суток!
      Моё имя Андрей. Я представитель сообщества авторов (копирайтинг, рерайтинг). Я хочу обратиться к веб-разработчикам, SEO-оптимизаторам и людям других профессий, работа которых заключается в разработке, поддержке, оптимизации сайтов, онлайн проектов и пр.
       В моей команде есть как начинающие копирайтеры, так и люди с более 10-ти летним опытом. Соответственно они пишут уникальные тексты на разные тематики и по разным ценам. Также делают качественный рерайт. Владельцы сайтов, проектов постоянно нуждаются в контенте. Я могу этот контент предоставить.
      Все мои авторы пишут качественные и уникальные тексты. Здесь важно понимать, что если стоимость текста более низкая, то и качество соответственно тоже. Но каждый текст перед отправкой к заказчику дополнительно проверяется на уникальность и ошибки как орфографические, так и пунктуационные которые сразу же и исправляются. 
      У меня есть предложение. Вы как разработчики web ресурсов, проектов, оптимизаторы  проектов, работаете с заказчиками, создаёте для них проекты, которые постоянно нуждаются в контенте. А посему если вы будете рекомендовать мои услуги вашим заказчикам, и я с ними буду сотрудничать, то и вы сможете получать от меня свой процент от заказа.
      В этой несложной схеме выгода очевидна для всех:
      Заказчик получает желаемый контент не за все деньги мира Вы получаете свой процент от заказа Я распределяю заказы среди своих авторов и тоже зарабатываю Авторы работают и получают свою честно заработанную зарплату Теперь более подробно пройдёмся по пунктам:
      1.Цена для заказчика может колебаться в диапазоне 1$-3$ за 1000 знаков. Заказчику не нужно самостоятельно искать копирайтеров, рерайтеров. Ему не придётся больше долго и нудно искать необходимые ему текста на текстовых биржах и покупать кота в мешке (ведь бывают ситуации, когда приобретённый контент оказывается не такого качества, на который рассчитывал заказчик). Мои авторы пишут на разные темы, недолго и ни в коем случае не срывают сроков выполнения заказа. Ведь если у одного исполнителя «взорвётся микроволновка» или «утонет домашний питомец» то его сразу заменяет другой. И заказ будет выполнен вовремя. Более того, самостоятельный поиск, покупка контента, общение с авторами, вечный поиск нужных статьей на биржах, как правило, отнимают много времени. И так же, после того как заказчик найдет себе исполнителя, далеко не факт что техническое задание будет строго соблюдено.
       Я же предлагаю взять на себя эти все заботы. Таким образом заказчик экономит много времени, которые он будет использовать на другие, более важные дела, например, на развитие, оптимизацию, и рекламу своих проектов. Согласитесь, заказчику должно понравится это предложение.
      2.Вы, приводя мне заказчика, получаете свой процент от заказа, который может колебаться от 5% до 20% стоимости в зависимости от количества и объёмов заказов, которые требуются вашему заказчику. То есть вы просто рекомендуете меня и после того как заказчик проверит контент и произведёт оплату мне, вы просто получаете дополнительный доход, хоть и не такой большой, как от вашей основного вида деятельности. Можно сделать даже вечный процент (когда заказчик, которому вы порекомендовали меня будет делать заказы у меня без вашего ведома, свой процент вы всё равно будете получать от меня прямиком на карту). Все деньги, проценты, обороты, будут складываться в базу данных. Я работаю честно. Никого не забуду и не обижу. Это же и в моих интересах.
      3.Альтруистов в этом мире становится всё меньше и меньше. И я не альтруист. Я тоже хочу зарабатывать, выполняя роль посредника на контенте.
      4.Теперь автору не нужно самостоятельно «вылавливать» одиночные заказы на биржах, постоянно участвовать в тендерах чтобы получить долгожданный заказ, тратить много времени на поиск заказа, а после выполнения, искать следующий. Ведь половину рабочего времени копирайтер тратит именно на это, вместо того чтобы делать то, что он умеет: писать. В этом случае я обеспечиваю авторов постоянным потоком заказов, и они «с головой» погружаются в работу и работают, не переживая о поиске заказов. Многие копирайтеры предпочитают работать именно через посредников, поскольку за то время, что они потратят на поиск заказов они смогут неплохо заработать, если это же время потратить на работу.
      Если эта схема полностью белая и абсолютно всем выгодная, то почему бы вам не попробовать поработать со мной описанным выше методом?
       Связаться со мной можно по почте: [email protected]
      Спасибо за внимание и понимание. С уважением, Андрей
    • San4ous
      By San4ous
      Привет, подскажите пожалуйста, как мне сделать рамку вокруг изображения, между которыми можно вставить текст (как подпись к картинке), т.е как в Википедии. Если что, работаю в Sulime text html
    • Kristi
      By Kristi
      Подскажите можно увеличить расстояние между текстом и картинкой в маркированном списке. Конкретно для маркированного списка? 

    • digenis
    • pro100blich
      By pro100blich
      Особо не вдавался в подробности анимации, поэту прошу у вас.

      Нужно сделать так, чтобы буква при загрузки страницы, после 3с (ПРИМЕРНО) с центра экрана переместилась на 300px (ПРИМЕРНО) в любое из четырех направлений.

      P.S. Лишнего не пишите, и ссылки на темы не надо кидать.
       
  • Обсуждения

    • Switch74
      .tabs>input[type="radio"]:checked+label {   background-color: #fff;   border-bottom: 1px solid #fff; } Здесь и делаете стили для изменения нажатого таба если я правильно понял
    • Switch74
      все файлы должны быть в одной папке некоторые ссылки ссылаются на локальный компьютер - этого не должно быть некоторые маленькие картинки грузят очень большие файлы перепутанные ссылки - это скорее всего ваша ошибка
    • Иван Евгеньевич
      Здравствуйте! Уважаемые форумчане! Я начинающий начинать) прошу помощи,  есть макет сайта , хочу чтоб на главной странице были вкладки которые бы переключались по нажатию кнопки. но основной вопрос в том как сделать их разными. пример приведу в фото. Хочу как на фото сделать но незнаю как( а так же код выглядит таким образом      <div class="tabs">              <input type="radio" name="tab-btn" id="tab-btn-1" value="">              <label for="tab-btn-1">Свадьба</label>              <input type="radio" name="tab-btn" id="tab-btn-2" value="">              <label for="tab-btn-2">Мужу</label>              <input type="radio" name="tab-btn" id="tab-btn-3" value="">              <label for="tab-btn-3">Жене</label>              <input type="radio" name="tab-btn" id="tab-btn-4" value="">              <label for="tab-btn-4">Партнеру</label>              <input type="radio" name="tab-btn" id="tab-btn-5" value="">              <label for="tab-btn-5">Коллекции</label>              <input type="radio" name="tab-btn" id="tab-btn-6" value="">              <label for="tab-btn-6">Редкость</label>                            <div id="content-1">                <img src="images/Kolca1.png" alt="Кольца" class="kolca">                <p class="kolca11">Кольца</p>              </div>              <div id="content-2">                Содержимое 2              </div>              <div id="content-3">                Содержимое 3              </div>              <div id="content-4">                Содержимое 4              </div>              <div id="content-5">                Содержимое 5              </div>              <div id="content-6">                Содержимое 6              </div>     </div>   CSS code .tabs {   top: 1100px;   position: absolute;   left: 600px;   font-size: 50px; } .tabs>input[type="radio"] {   display: none; }   .tabs>div {   /* скрыть контент по умолчанию */   display: none;   border: 1px solid #e0e0e0;   padding: 10px 15px;   font-size: 16px; }   /* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */ #tab-btn-1:checked~#content-1, #tab-btn-2:checked~#content-2, #tab-btn-3:checked~#content-3, #tab-btn-4:checked~#content-4, #tab-btn-5:checked~#content-5, #tab-btn-6:checked~#content-6{   display: block; }   .tabs>label {   display: inline-block;   text-align: center;   vertical-align: middle;   user-select: none;   background-color: #f5f5f5;   border: 1px solid #e0e0e0;   padding: 2px 8px;   font-size: 16px;   line-height: 1.5;   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;   cursor: pointer;   position: relative;   top: 1px;     font-family: 'Gilroy';   font-style: normal;   font-weight: 500;   font-size: 18px;   line-height: 21px;   text-align: center;   letter-spacing: 0.1em;   text-transform: uppercase; }   .tabs>label:not(:first-of-type) {   border-left: none; }   .tabs>input[type="radio"]:checked+label {   background-color: #fff;   border-bottom: 1px solid #fff; }  
    • Наташа
      Сегодня index.html неожиданно начал загружаться, но некорректно. Ссылки на веб-страницы не работают, но я думаю, что я сама указала неправильный путь к файлам, сегодня буду это исправлять. Ещё почему-то отображаются не все иллюстрации, а те что отображаются - все перепутаны. Пробовала открывать иллюстрации на самом сервере, но и там почему-то название картинки одно, а картинка совсем другая. Адрес сайта http://j90365fr.beget.tech/  
    • Switch74
      адрес сайта можно по какому адресу грузится css?  
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy