powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Можно ли выборочно отменить атрибут CSS?
24 сообщений из 24, страница 1 из 1
Можно ли выборочно отменить атрибут CSS?
    #38762997
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Есть такой стиль:
Код: css
1.
iv#tree ul.device>li>div.device>div.label { border-collapse: collapse; border: 1px solid #333; width: 360px; padding: 2px; }


На экране отображаются блоки фиксированной ширины.
Но иногда в этом блоке нужно отобразить картинку (ширина картинки заранее не известна, но она наверняка больше 360 пикселов) и блок должен растянуться на ширину картинки.
Как это можно сделать?
Я пробовал добавлять в верстке (для div.label) style="width: auto !important", но в этом случае блок растягивается на ширину всей страницы.
Вместо auto пробовал указать none, не помогло.
________________________
Мы смотрим с оптимизмом...
...в оптический прицел.
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38763145
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
min -width:360px;

?
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38763247
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Это не совсем подходит.
Мне нужно, чтобы блоки были именно фиксированной ширины, за исключением некоторых случаев.
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38763336
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Верстка такая:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
<div id="tree">
  <div class="device">
    <div class="label"></div> - ширина 360px через стили
    <div class="info">
      ...
      <img src="..."/> - картинка неизвестной ширины
    </div>
  </div>
</div>
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38763391
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B.,

.. а скриптом посчитать ширину картинки и присвоить див-у - допускается правилами построения?
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38763510
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Можно, наверное.
Но я плохо знаю JS и не хотел бы переносить на него логику.
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38763517
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B.Верстка такая:
Соврал, с такой бы проблем не было.
Верстка такая:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<div id="tree">
  <div class="device">
    <div class="label"> - ширина 360px через стили
      <div class="info">
        ...
        <img src="..."/> - картинка неизвестной ширины
      </div>
    </div>
  </div>
</div>
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38763557
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B. , и что тут можно увидеть/сделать?

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
iv#tree ul.device>li>div.device>div.label { border-collapse: collapse; border: 1px solid #333; width: 360px; padding: 2px; 
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id="tree">
  <div class="device">
    <div class="label">
      <div class="info">
        ...
        <img src="..."/>
      </div>
    </div>
  </div>
</div>
</body>
</html>
</html>


Ты хоть бы пример нормальный сделал...
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38763566
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsa Alibek B. , и что тут можно увидеть/сделать?
Можно ли задать более избирательный селектор, который бы отменял width:360px ?
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38763575
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Страница формируется на сервере (PHP).
В момент формирования <div class="label"> я уже знаю, будет ли это обычный DIV или со встроенной в него картинкой.
И в этот момент я могу ему дописать в style выражение, которое бы аннулировало width:360px, если бы я его знал.
Ну либо в этот момент назначать ему другой класс (label2), но это менее удобно — его нужно будет во многих стилях повторять.
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38763589
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Да что ж это такое...
Опять напутал.
Alibek B.Страница формируется на сервере (PHP).

На сервере периодически запускается скрипт, который формирует XML.
Затем к этому XML применяется XSLT, результат сохраняется в HTML-файл, который и открывают посетители.
Но сути дела это особо не меняет — в XSL-файле я на момент обхода div.device уже знаю, будет ли внутри него картинка или нет.
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38763595
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B.Можно ли задать более избирательный селектор, который бы отменял width:360px ?
Скажу иначе... Твой селектор никоим образом не применяется к твоей предоставленой верстке.
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38763748
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B.,

В разметке отсутствуют ul .device> li >div.device

Лучше упростить это дело, смысла в таких подробностях нет.

Код: css
1.
#tree .device .device .label
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38763755
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Двух девиц подряд тоже нет.

#tree .device .label
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38764302
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsaТвой селектор никоим образом не применяется к твоей предоставленой верстке.
Реальная верстка громоздкая, я ее упростил. И при упрощении кое-что пропустил.
Естественно все промежуточные элементы в реальной верстке есть и селектор применяется.
Вот примерно так выглядит фрагмент верстки:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
      <div id="main">
         ...
         <div id="tree">
            <ul class="device">
               <li>
                  <div class="device" id="device:123">
                     <div onclick="return evtClickTreeItem(this);" class="icon1" title="Порт: 1"></div>
                     <div class="label state-ok">
                        <div class="host"><var class="name">123</var><var class="ip">IP <a href="http://10.1.10.241">10.1.10.241</a></var></div>
                        <div class="info"><var class="model">model<br/><span class="serial">s/n 1003505285</span></var><var class="tag">00-1F-CE-10-39-D2</var><br/></div>
                     </div>
                     <ul class="port">
                        <div class="line1"></div>
                        <li>
                           <div onclick="return evtClickTreeItem(this);" class="icon1"></div><var class="port">2</var>
                           <ul class="device">
                              <div class="line1"></div>
                              <li>
                                 <div class="device" id="device:234">
                                    <div onclick="return evtClickTreeItem(this);" class="icon1" title="Порт: 1"></div>
                                    <div class="label state-ok">
                                       <div class="host"><var class="name">234</var><var class="ip">IP <a href="http://10.1.12.152">10.1.12.152</a></var></div>
                                       <div class="info"><var class="model">model<br/><span class="serial">s/n AC21042188</span></var><var class="tag">00-03-0F-26-6D-77</var></div>
                                    </div>
                                    <ul class="port">
                                       <div class="line1"></div>
                                       <li>
                                          <div onclick="return evtClickTreeItem(this);" class="icon1" style="outline:1px dotted red;"></div><var class="port">2</var> (<var class="info">IP-камера CAM-105</var>)
                                          <ul class="device" style="display:none;">
                                             <div class=""></div>
                                             <li>
                                                <div class="device" id="device:CAM-105">
                                                   <div onclick="return evtClickTreeItem(this);" class="icon1" title="Порт: "></div>
                                                   <div class="label state-ok">
                                                      <div class="host"><var class="name">CAM-105</var><var class="ip">IP <a href="http://10.102.1.5">10.102.1.5</a></var></div>
                                                      <div class="info"><var class="model">AirCam</var><var class="tag">00-00-00-00-00-00</var><br/><var class="description">описание</var><br/><img class="graph" link="http://10.102.1.5/snapshot.cgi?chan=1"></img></div>
                                                   </div>
                                                </div>
                                             </li>
                                          </ul>
                                       </li>
                                    </ul>
                                 </div>
                              </li>
                           </ul>
                        </li>
                    </ul>
                  </div>
               </li>
            </ul>
         </div>
      </div>



Сейчас я указываю у картинки размер, чтобы влезать в верстку.
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38764366
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B. , ты знаешь что такое "тестовый пример"? Это (применительно к нашему разделу) небольшей, полностью функциональный html документ, отображающий проблему...

Так потрудись его сделать. Т.о. получишь шанс бесплатно решить свою проблему.
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38764572
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ну сократить можно примерно до такого:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
<html>
<head>
<title>test</title>
<style type='text/css'>
div.label { border: 1px solid #333; width: 360px; padding: 2px; }
</style>
</head>
<body>
  <div id="main">
    <div class="device">
      <div onclick="return evtClickTreeItem(this);" class="icon" title="Раскрыть/свернуть"></div>
      <div class="label">
        <div class="host">host1 title</div>
        <div class="info">host1 description</div>
      </div>
    </div>
    <div class="device">
      <div onclick="return evtClickTreeItem(this);" class="icon" title="Раскрыть/свернуть"></div>
      <div class="label">
        <div class="host">host2 title</div>
        <div class="info">host2 description<br/><img class="graph" src="..."/></div>
      </div>
    </div>
  </div>
</body>
</html>


На страницу выводятся блоки с описанием устройств, как правило блоки фиксированной ширины.
Для некоторых устройств (host2) в описании выводится картинка, в этом случае блок должен быть растянут по размерам картинки.
В реальной задаче устройства могут быть вложены одно в другое, глубина вложений произвольная.
Прикладываю скриншот реальной страницы, в данном примере картинка ужата, чтобы уместиться в ширину блока. А мне нужно растянуть блок, чтобы картинка отображалась в размере 100%.
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38764937
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B. , разметку менять можно? Или можно оперировать только этими тегами?
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38764943
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Нежелательно, она запутанная, да еще и в XSL.
Но если иначе не получится, значит буду менять.
А идея какая, вытащить .info из .label и поместить следом?
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38764970
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B.Ну сократить можно примерно до такого:
Пойдет?

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
div.label { 
	border: 1px solid #333; 
	width: 360px; 
	padding: 2px; 
	display: table-cell;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id="main">
	<div class="device">
		<div onclick="return evtClickTreeItem(this);" class="icon" title="Раскрыть/свернуть"></div>
		<div class="label">
			<div class="host">host1 title</div>
			<div class="info">host1 description</div>
		</div>
	</div>
	<div class="device">
		<div onclick="return evtClickTreeItem(this);" class="icon" title="Раскрыть/свернуть"></div>
		<div class="label">
			<div class="host">host2 title</div>
			<div class="info">host2 description<br/><img class="graph" src="http://www.eva.ro/club/public/user/1000000/526000/525035/32312.jpg"/></div>
		</div>
	</div>
</div>
</body>
</html>
</html>
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38764975
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B.А идея какая, вытащить .info из .label и поместить следом?
Неее... Дело в том, что нужное тебе поведение присуще только табличкам...
Только они растягиваются "под контент", если он больше указанных им размеров.
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38764981
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Да, получилось, спасибо. Если указать table-cell, то отлично работает, расползается где надо.
А чем это чревато?
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38765009
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B.А чем это чревато?
table-cell поддерживают только современные браузеры...
...
Рейтинг: 0 / 0
Можно ли выборочно отменить атрибут CSS?
    #38765124
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ну тогда это ерунда, мне это нужно только для служебных задач.
Спасибо за совет.
...
Рейтинг: 0 / 0
24 сообщений из 24, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Можно ли выборочно отменить атрибут CSS?
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]