Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.02.2020, 13:26
Интересующийся
Отправить личное сообщение для Texnarik Посмотреть профиль Найти все сообщения от Texnarik
 
Регистрация: 22.03.2016
Сообщений: 10

Почему у меня не срабатывает @media в одном месте ?
Вот условие:



<style>

@media only screen and (max-width: 500px) {

.logo

}

</style>

<div class="logo">

<table width="100%">

<tr>

<td width='3%'></td>

 

<td width="24%" align='left' valign='center' class="responsive">

    <a href="https://speed-bux.ru/">

<div style="background: url('images/logo.png'); width: 206px; height: 50px;">

</div></a>

</td>

<td width="26%" align='left' valign='center'>

</td>

<td width="50%" valign="center"></div>




Вопрос: почему у меня не срабатывает @media? Я хотел чтобы на разных экранах было разное лого, но min и max вообще не срабатывает, как правильно сделать ?



Да, и вот что, когда я немного хитрю и делаю вот так:

<style>

@media (max-width: 500px) {

.logo {

display: none;

}}

</style>

<div class="logo">

<table width="100%">

<tr>

<td width='3%'></td>

 

<td width="24%" align='left' valign='center' class="responsive">

    <a href="https://speed-bux.ru/">

<div style="background: url('images/logo.png'); width: 206px; height: 50px;">

</div></a>

</td>

<td width="26%" align='left' valign='center'>

</td>

<td width="50%" valign="center"></div>

 

<style>

@media (min-width: 500px) {

.logom {

display: none;

}}

</style>

<div class="logom">

<table width="100%">

<tr>

<td width='3%'></td>

 

<td width="24%" align='left' valign='center' class="responsive">

    <a href="https://speed-bux.ru/">

<div style="background: url('images/logo.png'); width: 206px; height: 50px;">

</div></a>

</td>

<td width="26%" align='left' valign='center'>

</td>

<td width="50%" valign="center"></div>




После добавления @media (min-width: 500px) у меня едет дизайн, что ж не так ?
Ответить с цитированием
  #2 (permalink)  
Старый 27.02.2020, 14:07
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,745

Вот это
<td width="50%" valign="center"></div>
чего такое?
Почему нет </table> ?
Ответить с цитированием
  #3 (permalink)  
Старый 27.02.2020, 14:26
Интересующийся
Отправить личное сообщение для Texnarik Посмотреть профиль Найти все сообщения от Texnarik
 
Регистрация: 22.03.2016
Сообщений: 10

Сообщение от voraa Посмотреть сообщение
Вот это
<td width="50%" valign="center"></div>
чего такое?
Почему нет </table> ?
Ее закрытие у меня идет ниже, в шапке вставлен баннер 468х60 , я сделал так чтобы он не растягивал дизайн на телефоне, убрал, вот:
<style>
@media (max-width:500px){
.Banner
{
display: none;
}
}
</style>
<div class="Banner">
<div class="Banner" id="linkslot_275369"><script src="https://linkslot.ru/bancode.php?id=275369" async></script></div>
</div>

</td>
<td width='3%'></td>
</tr>
</table>
</div>


Может я неправильно поступил так ? Табле не срабатывает?

Ааа , е-мо-е , это td лишняя, точнее как раз от баннера, а не от лого.
Сейчас перепроверю это.

Последний раз редактировалось Texnarik, 27.02.2020 в 14:29.
Ответить с цитированием
  #4 (permalink)  
Старый 27.02.2020, 14:44
Интересующийся
Отправить личное сообщение для Texnarik Посмотреть профиль Найти все сообщения от Texnarik
 
Регистрация: 22.03.2016
Сообщений: 10

Вот что сейчас
<style>
@media (max-width: 500px) {
.logo {
display: none;
}}
</style>
<div class="logo">
<table width="100%">
<tr>
<td width='3%'></td>

<td width="24%" align='left' valign='center' class="responsive">
    <a href="https://speed-bux.ru/">
<div style="background: url('images/logo.png'); width: 206px; height: 50px;">
</div></a>
</td>
<td width="26%" align='left' valign='center'>
</td>
</div>

<style>
@media (min-width: 501px) {
.logom {
display: none;
}}
</style>
<div class="logom">
<table width="100%">
<tr>
<td width='3%'></td>

<td width="24%" align='left' valign='center' class="responsive">
    <a href="https://speed-bux.ru/">
<div style="background: url('images/logom.png'); width: 206px; height: 76px;">
</div></a>
</td>
<td width="26%" align='left' valign='center'>
</td>
</div>



При таком коде, у меня почему-то сразу 2 Лого на ПК мониторе, а на телефоне дизайе съехал, скрин:
Ответить с цитированием
  #5 (permalink)  
Старый 27.02.2020, 15:16
Интересующийся
Отправить личное сообщение для Texnarik Посмотреть профиль Найти все сообщения от Texnarik
 
Регистрация: 22.03.2016
Сообщений: 10

Спасибо тебе огромное, что ты заметил этот td , и спросил что это за незаконченная строка !!! Ты очень сильно помого ... Теперь у меня все более менее четко, все как я хотел !!! Спасибо от души !!! Я 2 дня ковырял все, пробовал разные прийомы, а этот td не мог заметить!)))

А вот что вышло в итоге:
<style>
@media (max-width: 500px) {
.logo {
display: none;
}}
</style>
<div class="logo">
<table width="100%">
<tr>
<td width='3%'></td>

<td width="24%" align='left' valign='center' class="responsive">
    <a href="https://speed-bux.ru/">
<div style="background: url('images/logo.png'); width: 206px; height: 50px;">
</div></a>
</td>
<td width="26%" align='left' valign='center'>
</td>
<td width="50%" valign="center">
<div class="Banner" id="linkslot_275369"><script src="https://linkslot.ru/bancode.php?id=275369" async></script></div>
</div>
</td>
</tr>
</table>
</div>

<style>
@media (min-width: 501px) {
.logom {
display: none;
}}

@media (max-width:500px){
.Banner
{
display: none;
}}
</style>
<div class="logom">
<table width="100%">
<tr>
<td width='3%'></td>

<td width="24%" align='left' valign='center' class="responsive">
    <a href="https://speed-bux.ru/">
<div style="background: url('images/logom.png'); width: 206px; height: 76px;">
</div></a>
</td>
<td width="26%" align='left' valign='center'>
</td>
</table>
</div>
Ответить с цитированием
  #6 (permalink)  
Старый 27.02.2020, 17:25
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,745

Есть хорошее правило - всегда закрывать все теги, где есть или может быть какое то содержимое. Даже, если их можно не закрывать.
<br> и <input>, конечно закрывать не надо,
А <li>, <p>, <td> ... - лучше закрывать.
И <tr> тоже.
Там есть в конце незакрытый.
Ответить с цитированием
  #7 (permalink)  
Старый 27.02.2020, 18:49
Интересующийся
Отправить личное сообщение для Texnarik Посмотреть профиль Найти все сообщения от Texnarik
 
Регистрация: 22.03.2016
Сообщений: 10

Точно ! Еще раз спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как зафиксировать кнопки чтобы они оставались на одном месте? mikefromru Элементы интерфейса 5 14.06.2017 23:15
отчаяния пост NightmareZ Оффтопик 6 25.04.2017 13:32
В одном месте функция работает нормально, в другом не работает вообще SkaN jQuery 10 21.03.2012 13:06
Почему функция срабатывает один раз? Bogdan808 Javascript под браузер 4 06.09.2010 23:41
Почему не срабатывает innerHTML? БВИ Internet Explorer 1 02.01.2009 19:00